|Developer(s)||Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, and community|
|Stable release||3.5.2 / 7 December 2014|
At the same time, researchers, engineers, and practitioners from various branches of engineering and science looked for tools that would enable web browsers to visually present data within web pages. There were multiple projects with that goal, each of which had its successes and failures, and inspired the subsequent ones. The most notable examples were the Prefuse, Flare, and Protovis toolkits, which can all be considered as direct predecessors of D3.js.
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.
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 (Bostock, Ogievetsky & Heer 2011).
The central principle of D3 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 (see Bostock, Ogievetsky & Heer 2011, chap. 3). For example, by using D3, one may select all HTML
<p>...</p> elements, and then change their text color, e.g. to lavender:
d3.selectAll("p") .style("color", "lavender");
The selection can be based on tag (as in the above example), 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
<p>...</p> elements on a page gradually change their text color to pink:
d3.selectAll("p") .transition() .style("color", "pink");
The default duration of such transitions is 250ms. However, this value can be changed in the code. Besides duration, important characteristics of transitions are delay and ease.
For more advanced uses, loaded data drives the creation of elements. D3 loads a given dataset, then, for each element of it, create an SVG object with associated properties (shape, colors, values) and behaviors (transitions, events). 
Appending nodes using Data
Once data is bound d3js will follow a pattern utilizing explicit .enter() command, an implicit update and explicit .exit(). Using method chaining anything following the .enter() command will be called for each data item that isn't represented by a node on the selection while update is called on all existing nodes and .exit() is called on all existing nodes that do not have data to bind to them. There are several examples of how this works 
D3.js API contains several hundred functions, and they can be grouped into following logical units:
- Generation of pseudorandom numbers with normal, log-normal, Bates, and Irwin-Hall distributions.
- Transformations in 2D: translation, rotation, skew, and scaling.
- Functions for finding minimum, maximum, extent, sum, mean, median, and quantile of an array.
- Functions for ordering, shuffling, permuting, merging, and bisecting arrays.
- Functions for nesting arrays.
- Functions for manipulating associative arrays.
- Support for map and set collections.
- Computing convex hull of a set of points.
- Computing Voronoi tesselation of a set of points.
- Support for point quadtree data structure.
- Support for basic operations on polygons.
- Support for RGB, HSL, HCL, and L*a*b* color representation.
- Brightening, darkening, and interpolation of colors.
Data visualization company Datameer officially uses D3.js as its core technology, while The New York Times sometimes uses it for rich graphs. It is used by the iD editor for editing OpenStreetMap. D3.js has been extensively used for GIS map making, managing both GeoJSON and Topojson files as input.
Related Tools and Libraries
General visualisation tools and libraries:
Tools built on top of D3.js:
- freeDataMap - Company data visualisation tool
- dimple.js - Flexible axis-based charting API
- Cubism - Time series visualisation
- Rickshaw - Toolkit for creating interactive time series graphs
- NVD3 - Re-usable charts for d3
- Crossfilter - Fast Multidimensional Filtering for Coordinated Views
- c3.js - D3-based reusable chart library
Non-D3 Chart libraries:
- "d3 Releases". Retrieved 20141212. Check date values in:
- "For Protovis Users", D3.js, retrieved August 18, 2012
- Viau, Christophe (June 26, 2012), "What’s behind our Business Infographics Designer? D3.js of course", Datameer's blog, retrieved August 18, 2012
- Myatt, Glenn J.; Johnson, Wayne P. (September 2011), "5.10 Further reading", Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: John Wiley & Sons, p. A–2, ISBN 978-0-470-53649-0, retrieved January 23, 2013
- "Release Notes", D3.js, retrieved August 22, 2012
- Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Automated Classification, Analysisand Redesign of Chart Images", ACM User Interface Software & Technology (UIST), retrieved January 23, 2013
- Ashkenas, Jeremy; Bloch, Matthew; Carter, Shan; Cox, Amanda (May 17, 2012). "The Facebook Offering: How It Compares". nytimes.com. Retrieved January 23, 2013.
- "New OpenStreetMap Editor iD Increases Participation". Retrieved 26 December 2013.
- "iD". OpenStreetMap wiki. Retrieved 26 December 2013.
Background on data visualization and information graphics:
- Kirk, Andy (December 2012), Data Visualization: a successful design process (1st ed.), Birmingham: Packt Publishing, ISBN 978-1-84969-346-2
- Cairo, Alberto (August 2012), The Functional Art (1st ed.), Berkeley: Peachpit, ISBN 978-0321834737
Background on D3.js itself:
- Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (October 2011), D3: Data-Driven Documents, IEEE Transactions on Visualization and Computer Graphics, IEEE Press
Using D3.js - beginner level:
- Murray, Scott (March 2013), Interactive Data Visualization for the Web, An Introduction to Designing with D3 (1st ed.), Sebastopol, California: O’Reilly Media, ISBN 978-1-4493-3973-9
Using D3.js - intermediate level:
- Dewar, Mike (June 2012), Steele, Julie; Blanchette, Meghan, eds., Getting Started with D3, Creating Data-Driven Documents (1st ed.), Sebastopol, California: O’Reilly Media, ISBN 978-1-4493-2879-5
- Qi Zhu, Nick (October 2013), Data Visualization with D3.js Cookbook (1st ed.), Birmingham: Packt Publishing, ISBN 978-1-7821-6216-2
- Teller, Swizec (2013), Data Visualization with d3.js, Birmingham: Packt Publishing, p. 194, ISBN 9781782160007
- Viau, Christophe (2013), Developing a D3.js Edge: Constructing Reusable D3 Components and Charts, Bleeding Edge Press, p. 268, ISBN 9781939902023
- Meeks, Elijah (2014), D3.js in Action, Manning Publications, p. 325, ISBN 9781617292118
- Maclean, Malcolm (2014), D3 Tips and Tricks, Leanpub, p. 580
- Gopal, Nikhil (October 2014), D3 and CoffeeScript: A Python Programmer's Introduction to Web Visualizations, Sebastopol, California: O’Reilly Media
|Wikimedia Commons has media related to D3.js.|