|Developer(s)||Michael (Mike) Bostock|
|Stable release||3.3.1 / September 17, 2010|
|Development status||Superseded by D3|
The central principle of D3 design is to enable programmer to first use a CSS-style selector to select a given sets 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");
Selection can be based on tag (as in the example above), class, identifier, attribute, or place in hierarchy. Once elements are selected, one can apply operations on them. This includes getting and setting attributes, display texts, and styles (as in the above example). Also, elements can be added and removed. This process of modifying, creating and removing HTML elements, can be made dependent on data - and this is the basic concept of using D3.js.
By declaring a transition, values for attributes and styles can be smoothly interpolated over a certain time. 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");
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.
D3.js API contains several hundred functions, and they can be grouped into following logical units:
Data visualization company Datameer officially uses D3.js as its core technology, while The New York Times sometimes uses it for rich graphs. Other uses include ID Editor for editing OpenStreetMap. D3.js has been extensively used for GIS map making, managing both GeoJSON and Topojson files as input.
- "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
- "d3 Releases".
- 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.
- Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (October 2011), D3: Data-Driven Documents, IEEE Transactions on Visualization and Computer Graphics, IEEE Press
- 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
- 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
- Qi Zhu, Nick (October 2013), Data Visualization with D3.js Cookbook (1st ed.), Birmingham: Packt Publishing, ISBN 978-1-7821-6216-2