Review: 4 supercool JavaScript tools for data visualization

Free, open source D3, InfoViz, Processing.js, and Recline.js bring dynamic, interactive -- and jaw-dropping -- data-driven graphics to the Web browser

Page 2 of 11


You may have already seen D3 (short for Data-Driven Documents) in action -- it's the visualization library behind many of the interactive infographics on the New York Times online edition's pages. Links to some of those articles are at the website of Michael Bostock -- the principal author of D3, though he acknowledges considerable contributions from Jason Davies.

D3 is the offspring of an earlier project called Protovis. The evolution from Protovis to D3 -- as well as an excellent overview of D3's internals -- can be found in the paper, "D3: Data-Driven Documents," by Bostock, Vadim Ogievetsky, and Jeff Heer.

D3 is similar to jQuery in that it manipulates the DOM directly. This sets it apart from most other visualization tools, which execute in a separate set of objects and functions and call into the DOM through standard APIs. D3 employs entities already familiar to Web developers. For example, you can use CSS to style elements that D3 manipulates. Also, because D3 uses internally the same structures employed by the browser to represent the document, you can work with existing browser-based development and debugging tools with D3.

In D3's world, selections are key. Selections allow you to easily and iteratively perform operations on sets of document nodes. To change the color of all paragraph elements:

d3.selectAll("p").style("color", "white");

This technique of "chaining" a pipeline of functions -- each passing its results to the function appended to its right -- will be familiar to users of jQuery and Prototype. D3 programmers use it to concisely express multiple actions in a compact space. Selectors make DOM node manipulations as simple as setting attributes and styles, or as complex as sorting nodes, adding nodes, and removing nodes.

This D3 example is a modified bubble diagram, shown here with the "circle" element altered so that a rectangle is used in place of the bubble.
| 1 2 3 4 5 6 7 8 9 10 11 Page 2