Free, open source D3, InfoViz, Processing.js, and Recline.js bring dynamic, interactive -- and jaw-dropping -- data-driven graphics to the Web browser
D3 binds data to DOM nodes via the
data() function. Typically chained after a select operation,
data() builds data nodes and associates them with DOM nodes returned from the selection. You can think of the data as being "joined" to the DOM nodes. This joined data ultimately drives the visualization of the elements represented by the DOM nodes. It determines the height of bars in a bar chart, the size of bubbles in a bubble graph, the position of teardrop markers on a map, and so on.
Data joining is a key component of what D3 refers to as the "general update pattern." A style of coding a D3 application, the general update pattern starts with a selection operation, which is then followed by operations that add elements corresponding to new data via D3's
enter() function, update existing elements (by modifying whatever element attributes need modification), and remove elements corresponding to data that is no longer part of the visualization, via D3's
exit() function. Although difficult to grasp initially, the general update pattern nicely manages a visualization's entire lifecycle.
Data also drives D3's transitions, allowing the tool to produce dynamic displays, as opposed to simply painting static graphics. The relative size of bubbles in a bubble graph swell or shrink, and bar charts rise and fall, as new data enters the visualization and old data exits.
In D3, a transition is implemented as a key-frame animation of two frames: starting and ending. The starting frame is a visual element's current state. The ending frame is defined by data that specifies the values of attributes to be applied to that element. D3's interpolator functions handle the transition. D3 supplies interpolators for things like numbers and colors; it's smart enough to peek into strings and locate and interpolate embedded values such as the font size in a font specification. You can define your own interpolator functions; D3 even integrates with CSS3 transitions.
Where does the data come from? Although you can embed it directly into your application, D3 has functions for reading data from external sources: text files, CSV files, JSON documents, and others. It can even read an HTML document and parse its contents into a document tree.
D3 displays a radial, Reingold-Tilford tree. The data is from the Flare ActionScript library's API.