D3.js is a JavaScript library that uses digital data to drive the creation and control of
dynamic and interactive graphical forms which run in web browsers. It is a tool for data
visualization in W3C-compliant computing, making use of the widely implemented Scalable
Vector Graphics, JavaScript, HTML5, and Cascading Style Sheets standards. It is the successor
to the earlier Protovis framework. In contrast to many other libraries, D3 allows great control
over the final visual result. Its development was noted in 2011, as version 2.0.0 was released
in August 2011.
Context The first web browsers appeared in the early
1990s. They were initially capable of displaying static web pages only: the only way for a
user to interact with the web was through clicking links and scrolling pages. There
were many efforts to overcome such limitations. One of the most significant was the integration
of JavaScript as the scripting language for web browsers. JavaScript gradually became
the de facto standard language for creating web pages with rich user interactivity. This
played a crucial role in the decision to use JavaScript as the language of D3.js.
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 2009, based on the experience of developing
and utilizing Prefuse and Flare, Professor Jeff Heer, Ph.D. student Mike Bostock, and
M.S. student Vadim Ogievetsky of Stanford University's Stanford Visualization Group
created Protovis, a JavaScript library to generate SVG graphics from data. The library
received notable acceptance both by data visualization practitioners and academics.
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. Technical principles
Embedded within an HTML webpage, the JavaScript D3.js library uses pre-built JavaScript functions
to select elements, create SVG objects, style them, or add transitions, dynamic effects
or tooltips to them. These objects can also be widely styled using CSS. Large datasets
can be easily bound to SVG objects using simple D3 functions to generate rich text/graphic
charts and diagrams. The data can be in various formats, most commonly JSON, comma-separated
values or geoJSON, but, if required, JavaScript functions can be written to read other data
formats. Selections
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 nodes, then use operators to manipulate them
in a similar manner to jQuery. For example, by using D3, one may select all HTML ...
elements, and then change their text color, e.g. to lavender:
The selection can be based on 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. 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. Transitions
By declaring a transition, values for attributes and styles can be smoothly interpolated over
a certain time. The following code will make all HTML ... elements on a page gradually
change their text color to 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.
Data-binding For more advanced uses, loaded data drives
the creation of elements. D3 load a given dataset, then, for each element of it, create
an SVG object with associated properties and behaviors.
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 API Structure
D3.js API contains several hundred functions, and they can be grouped into following logical
units: Selections
Transitions Arrays
Math Color
Scales SVG
Time Layouts
Geography Geometry
Behaviors Math
Generation of pseudorandom numbers with normal, log-normal, Bates, and Irwin-Hall distributions.
Transformations in 2D: translation, rotation, skew, and scaling.
Arrays D3 array operations are built to complement
existing array support in JavaScript. D3 extends this functionality with:
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. Geometry
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. Color
Support for RGB, HSL, HCL, and L*a*b* color representation.
Brightening, darkening, and interpolation of colors.
Usage 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:
Datacopia SAS
Tableau R
Processing 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
dc.js - Dimensional Charting Javascript Library c3.js - D3-based reusable chart library
Non-D3 Chart libraries: AnyChart
Highcharts JS Flot
Peity Timeline.js
ZingChart Graph visualisation:
Sigma.js Arbor.js
References
Further reading Background on data visualization and information
graphics: Kirk, Andy, Data Visualization: a successful
design process, Birmingham: Packt Publishing, ISBN 978-1-84969-346-2
Cairo, Alberto, The
Functional Art, Berkeley: Peachpit, ISBN 978-0321834737 Background on D3.js itself:
Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey, D3: Data-Driven Documents, IEEE Transactions
on Visualization and Computer Graphics, IEEE Press
Using D3.js - beginner level: Murray, Scott, Interactive Data Visualization
for the Web, An Introduction to Designing with D3, Sebastopol, California: O’Reilly
Media, ISBN 978-1-4493-3973-9 Timms, Simon, Social Data Visualization with
HTML5 and JavaScript, Birmingham: Packt Publishing, ISBN 978-1-7821-6654-2
Using D3.js - intermediate level: Dewar, Mike, Steele, Julie; Blanchette, Meghan,
eds., Getting Started with D3, Creating Data-Driven Documents, Sebastopol, California: O’Reilly
Media, ISBN 978-1-4493-2879-5 Qi Zhu, Nick, Data Visualization with D3.js
Cookbook, Birmingham: Packt Publishing, ISBN 978-1-7821-6216-2 Others
Navarro Castillo, Pablo, Mastering D3.js, Birmingham: Packt Publishing, p. 352, ISBN 9781783286270
Teller, Swizec, Data Visualization with d3.js, Birmingham: Packt Publishing, p. 194, ISBN 9781782160007
Viau, Christophe, Developing a D3.js Edge: Constructing Reusable D3 Components and Charts,
Bleeding Edge Press, p. 268, ISBN 9781939902023 Meeks, Elijah, D3.js in Action, Manning Publications,
p. 325, ISBN 9781617292118 Maclean, Malcolm, D3 Tips and Tricks, Leanpub,
p. 580 External links
Official website D3.js Gallery