d3.js

There have been various previous attempts to bring data visualization to web browsers. The most notable examples were the Prefuse, Flare, and Protovis toolkits, which can all be considered as direct predecessors of D3.js.{{citation needed|date=April 2023}}

Prefuse was a visualization toolkit created in 2005 that required usage of Java, and visualizations were rendered within browsers with a Java plug-in. Flare was a similar toolkit from 2007 that used ActionScript, and required a Flash plug-in for rendering.{{citation needed|date=April 2023}}

In 2009, based on the experience of developing and utilizing Prefuse and Flare, Jeffrey Heer, Mike Bostock, and Vadim Ogievetsky of Stanford University's Stanford Visualization Group created Protovis, a JavaScript library to generate SVG graphics from data. The library was known to data visualization practitioners and academics.Academic example: {{citation|last1=Savva|first1=Manolis|last2=Kong|first2=Nicholas|last3=Chhajta|first3=Arti|last4=Li|first4=Feifei|last5=Agrawala|first5=Maneesh|last6=Heer|first6=Jeffrey|title=ReVision: Automated Classification, Analysisand Redesign of Chart Images|journal=ACM User Interface Software & Technology|year=2011|url=http://vis.stanford.edu/papers/revision |access-date=January 23, 2013}}

In 2011, the development of Protovis was stopped to focus on a new project, D3.js. Informed by experiences with Protovis, Bostock, along with Heer and Ogievetsky, developed D3.js to provide a more expressive framework that, at the same time, focuses on web standards and provides improved performance.{{harvnb|Bostock|Ogievetsky|Heer|2011}}

The D3.js library uses pre-built functions to select elements, create SVG objects, style them, or add transitions, dynamic effects, or tooltips. These objects can also be styled using CSS. Large datasets can be bound to SVG objects using D3.js functions to generate text/graphic charts and diagrams. The data can be in various formats such as JSON, comma-separated values (CSV) or geoJSON, but, if required, JavaScript functions can be written to read other data formats.

The central principle of D3.js design is to enable the programmer to first use a CSS-style selector to select a given set of Document Object Model (DOM) nodes, then use operators to manipulate them in a similar manner to jQuery.{{harvnb|Bostock|Ogievetsky|Heer|2011}}, chap. 3 For example, one may select all HTML paragraph elements (represented by {{tag|p}}), and then change their text color, e.g. to lavender:

d3.selectAll("p") // select all

elements

.style("color", "lavender") // set style "color" to value "lavender"

.attr("class", "squares") // set attribute "class" to value "squares"

.attr("x", 50); // set attribute "x" (horizontal position) to value 50px

The selection can be based on an HTML tag, class, identifier, attribute, or place in the hierarchy. Once elements are selected, one can apply operations to them. This includes getting and setting attributes, display texts, and styles (as in the above example). Elements may also be added and removed. This process of modifying, creating and removing HTML elements can be made dependent on data, which is the basic concept of D3.js.

By declaring a transition, values for attributes and styles can be smoothly interpolated over a certain time. The following code will make all HTML {{tag|p}} elements on a page gradually change their text color to pink:

d3.selectAll("p") // select all

elements

.transition("trans_1") // transition with name "trans_1"

.delay(0) // transition starting 0ms after trigger

.duration(500) // transitioning for 500ms

.ease(d3.easeLinear) // transition easing progression is linear...

.style("color", "pink"); // ... to color: pink

For more advanced uses, loaded data drives the creation of elements. D3.js loads a given dataset, then, for each of its elements, creates an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events).{{citation|date=February 5, 2012|first=Mike|last=Bostock|title=Thinking with Joins|url=http://bost.ocks.org/mike/join/}}{{cite web |title=A Pen by Lopez Hugo |website=Codepen.io |access-date=2016-08-01 |url=http://codepen.io/hugolpz/pen/wBorvq |archive-date=March 22, 2016 |url-status=dead |archive-url=https://web.archive.org/web/20160322021453/http://codepen.io/hugolpz/pen/wBorvq }}{{cite web|url=http://jsfiddle.net/9sggtr7a/ |title=Edit fiddle |website=JSFiddle.net |access-date=2016-08-01}}

// Data

var countriesData = [

{ name: "Ireland", income: 53000, life: 78, pop: 6378, color: "black" },

{ name: "Norway", income: 73000, life: 87, pop: 5084, color: "blue" },

{ name: "Tanzania", income: 27000, life: 50, pop: 3407, color: "grey" }

];

// Create SVG container

var svg = d3.select("#hook").append("svg")

.attr("width", 120)

.attr("height", 120)

.style("background-color", "#D0D0D0");

// Create SVG elements from data

svg.selectAll("circle") // create virtual circle template

.data(countriesData) // bind data

.join("circle") // joins data to the selection and creates circle elements for each individual data

.attr("id", function(d) { return d.name }) // set the circle's id according to the country name

.attr("cx", function(d) { return d.income / 1000 }) // set the circle's horizontal position according to income

.attr("cy", function(d) { return d.life }) // set the circle's vertical position according to life expectancy

.attr("r", function(d) { return d.pop / 1000 * 2 }) // set the circle's radius according to country's population

.attr("fill", function(d) { return d.color }); // set the circle's color according to country's color

Generated SVG graphics are designed according to the provided data.

Once a dataset is bound to a document, use of D3.js typically follows a pattern wherein an explicit .enter() function, an implicit "update," and an explicit .exit() function is invoked for each item in the bound dataset. Any methods chained after the .enter() command will be called for each item in the dataset not already represented by a DOM node in the selection (the previous selectAll()). Likewise, the implicit update function is called on all existing selected nodes for which there is a corresponding item in the dataset, and .exit() is called on all existing selected nodes that do not have an item in the dataset to bind to them. The D3.js documentation provides several examples of how this works.{{cite web|url=https://mbostock.github.io/d3/tutorial/circle.html |title=Three Little Circles |website=Mbostock.github.io |access-date=2016-08-01}}

{{Portal|Free and open-source software}}

• JavaScript framework
• JavaScript library
• Open-source software

{{Reflist}}

; Background on D3.js itself

• {{citation |first1=Michael |last1=Bostock |first2=Vadim |last2=Ogievetsky |first3=Jeffrey |last3=Heer |title = D3: Data-Driven Documents |journal=IEEE Transactions on Visualization and Computer Graphics |date=October 2011 |publisher=IEEE Press |url = http://vis.stanford.edu/papers/d3 |volume=17 |issue=12 |pages=2301–2309 |doi=10.1109/TVCG.2011.185 |pmid=22034350 |s2cid=505461 |url-access=subscription }}

; Using D3.js - beginner level

• {{citation |author=Murray, Scott |title = Interactive Data Visualization for the Web, An Introduction to Designing with D3 |edition=1st |date=March 2013 |publisher=O’Reilly Media |location = Sebastopol, California |isbn=978-1-4493-3973-9 |url = http://shop.oreilly.com/product/0636920026938.do }}
• {{citation |first1=Simon |last1=Timms |title = Social Data Visualization with HTML5 and JavaScript |edition=1st |date=September 2013 |publisher=Packt Publishing |location = Birmingham |isbn=978-1-7821-6654-2 |url = http://www.packtpub.com/social-data-visualization-with-html5-and-javascript/book }}

; Using D3.js - intermediate level

• {{citation |first1=Mike |last1=Dewar |title=Getting Started with D3 |series=Creating Data-Driven Documents |edition=1st |editor1-first=Julie |editor1-last=Steele |editor2-first=Meghan |editor2-last=Blanchette |date=June 2012 |publisher=O’Reilly Media |location = Sebastopol, California |isbn=978-1-4493-2879-5 |url = https://books.google.com/books?id=-1Zk213nXsYC }}
• {{citation |first = Nick |last = Qi Zhu |title = Data Visualization with D3.js Cookbook |edition=1st |date=October 2013 |publisher=Packt Publishing |location = Birmingham |isbn=978-1-7821-6216-2 |url = http://www.packtpub.com/data-visualization-with-d3-js-cookbook/book }}

; Others

• {{citation |last1=Newton|first1=Thomas|last2=Villarreal|first2=Oscar |title=Learning D3.js Mapping |year=2014|publisher=Packt Publishing |location = Birmingham |isbn=9781783985609 |page=126 |url = https://www.packtpub.com/web-development/learning-d3js-mapping }}
• {{citation |url = https://www.packtpub.com/web-development/mastering-d3js |title = Mastering D3.js |first=Pablo |last=Navarro Castillo|year=2014|publisher=Packt Publishing |location = Birmingham |isbn=9781783286270 |page=352 }}
• {{citation |url = https://www.packtpub.com/web-development/data-visualization-d3js |title = Data Visualization with d3.js |first=Swizec |last=Teller |year=2013 |publisher=Packt Publishing |location = Birmingham |isbn=9781782160007 |page=194 }}
• {{citation |url=http://shop.oreilly.com/product/9781939902023.do |title=Developing a D3.js Edge: Constructing Reusable D3 Components and Charts |first=Christophe |last=Viau |year=2013 |publisher=Bleeding Edge Press |isbn=9781939902023 |page=268 |access-date=August 27, 2014 |archive-url=https://web.archive.org/web/20140903081155/http://shop.oreilly.com/product/9781939902023.do |archive-date=September 3, 2014 |url-status=dead }}
• {{citation |title = D3.js in Action |first=Elijah |last=Meeks|year=2014|publisher=Manning Publications |isbn=9781617292118 |page = 325 }}
• {{citation |url = https://leanpub.com/D3-Tips-and-Tricks |title = D3 Tips and Tricks |first=Malcolm|last=Maclean|year=2014|publisher=Leanpub |page = 580 }}
• {{citation |url = http://www.informit.com/store/visual-storytelling-with-d3-an-introduction-to-data-9780321933171 |title=Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript |first=Ritchie |last=King |year=2014 |publisher=Addison-Wesley Data & Analytics Series |page = 288 |isbn=978-0-321-93317-1 }}

; Videos

• {{citation |first = Nikhil |last = Gopal |title = D3 and CoffeeScript: A Python Programmer's Introduction to Web Visualizations |date=October 2014 |publisher=O’Reilly Media |location = Sebastopol, California |url = http://shop.oreilly.com/product/110000663.do }}
• {{citation |first1 = Ritchie |last1=King |title=D3 Visualization LiveLessons: An Introduction to Data Visualization in JavaScript |date= December 2014 |publisher=Addison-Wesley Professional |url = http://www.informit.com/store/d3-visualization-livelessons-an-introduction-to-data-9780134087139 }}

• The Vega and Vega-Lite visualisation grammars are a declarative visualization specification built on parts of D3.js.

{{Commons category|D3.js}}

• {{Official website}}
• [https://observablehq.com/@d3/gallery D3.js Gallery]
• [http://bl.ocksplorer.org Blocksplorer], search for blocks by methods used
• D3 "reusable chart" libraries:
• C3 https://c3js.org
• Plotly https://plot.ly/javascript
• [https://bl.ock.org bl.ock.org] {{Webarchive|url=https://web.archive.org/web/20170407074420/http://bl.ock.org/ |date=April 7, 2017 }} and [https://blockbuilder.org blockbuilder.org]: popular early gallery system.
• [https://observablehq.com Observablehq.com] : main D3js playground.

{{Authority control}}

Category:Articles with example JavaScript code

Visualization software

Category:Free software programmed in JavaScript

Category:JavaScript libraries

Category:JavaScript visualization toolkits

Category:Software using the BSD license

Category:Visualization API