LOGO
EDITORIAL
JAVASCRIPT DOM Helper
SPOTS ON D3.js
ARTIST'S CORNER Sensorial Expressions and Emotion: Part II

SPOTS ON

D3.js
Data-Driven Documents
Author: DS
Published: July 2011

Created by Mike Bostock, co-lead of the now defunct Protovis project, D3.js [1] is a free JavaScript library for manipulating documents based on data. It includes an SVG module with shape generators and utilities. The author claims that D3 is not a charting library and this intriguing statement conceals a radical difference in approach from Protovis as well as other well known libraries.

One of the basic concepts behind this approach is that of considering the browser's Document Object Model as the “scene graph”, the term commonly used to designate the set of graphical objects in vector-based graphics editors, and to use it directly rather than creating a new lexicon of shapes (wedges, bars, dots, etc.), with the immediate consequence of “exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG”, thus avoiding to learn a new intermediate proprietary representation. The flexibility implied by this type of approach is particularly important when you want to design dynamic or interactive visualizations – most charting libraries only support static visualizations.

Using D3 you create visualizations by composing graphical primitives (shapes) rather than choosing and configuring a particular chart type. The fact that this “graphical approach” gives you more flexibility in the types of visualizations you can create, rather than being restricted to the standard pie, bar, or other graphical preset, may seem negligible. In reality it reveals the outstanding capability of controlling in a very precise, clear and direct manner the appearance of the work, providing the low-level control needed by artists. A step forward towards the grail of painless, effective collaboration between the coder and the designer, even where those two may be one and the same person.

D3-chord
Chord Diagram

Features

D3 implements node selection methods. The selectAll method in particular is useful for processing and styling masses of data (especially in a loose development model where the DOM objects are not referenced), whether at runtime or dynamically, doing the tedious DOM API work behind the scenes and allowing for easy manipulations. Selections can be filtered.

In its presentation D3 predicates “Transformation, not Representation”. True, where libraries like Processing, Raphaël, or Protovis and others introduce a new vocabulary and marks to learn, D3 leverages directly on the standard HTML and SVG languages. One of the the many advantages being that, as new features are introduced by the specifications and the browsers, you’ll be able to just use them without having to wait for a toolkit update.

As an example the author states “In Processing, you create a circle using the ellipse operator, which takes four arguments: the x and y of the ellipse center, and the width and height. Raphaël provides an ellipse operator with the same arguments, and a circle operator that takes three arguments using radius. Protovis defines pv.Dot and pv.Wedge mark types. D3, in contrast, does not reinvent the wheel. Instead, using the standard svg:circle element: ”

svg.append("svg:circle")
  .attr("cx", 50)
  .attr("cy", 40)
  .attr("r", 10);

Well, I can only strongly agree with the author. We can see how this goes in the direction shown in the DOM Helper article in this same issue.

An interesting feature is data binding through the D3 data operator [sic], a method that binds data to a selection under the form of an array of data values, such as an array of numbers or objects. These values can then be assigned to style or presentation attributes of the selected nodes sequentially, by default, or specifying an optional key function to override the indices. In this respect we note that the properties style and attr, as well as several others, can get functions of data, not just constants. This is designed to facilitate dynamic transformation of documents.

svg.append("svg:g")
  .selectAll("path")
  .data(chord.groups)
  .enter().append("svg:path")
  .style("fill", function(d) { return fill(d.index); })

The bound data is stored into a property for future reference and the data operator can be omitted on subsequent selections.

More Than Just Charts

D3 has a large collection of functions and “function factories” for all sorts of operations, neatly organized in modules (core, scale, svg, layout, geo, geom, chart, behavior). The modules are optional and are not included in the default build. All that you need to make way more than just charts!

The documentation is constituted of the API reference and tutorials. Learning D3 through the examples comes naturally, and then the API reference will give a deeper insight. Although the presentation insists on trivial HTML manipulation with the clear intent of addressing a wide public, all the on-line examples (except Treemap) use SVG. They are rather sophisticated, edifying, well presented and appealing. By looking at the conciseness of the code (practically as easy as reading a newspaper) you can see how well D3 does what it claims. There are more examples in the package, note however that all those many that import data through the csv or json modules do not work locally for those browsers that don't yet support XHR 2.0, which is still a working draft.

A dark note: some on-line examples don't work for IE9, basically those using the method setProperty. It's also unfortunate to see that one of the examples added by users rejects IE9 with a crude test returning an equally crude “Sorry, Internet Explorer is not supported, please get a modern browser like Chrome or Firefox”! This is an attitude, and for works of the class of D3 the inclusion of examples by third parties should be monitored.

Conclusion

D3 belongs to a new generation of libraries, providing the user with a direct interface to the DOM factory, where a cat is called a cat. With D3 the user will not spend his energy learning yet a new way to make a box, he will be able to focus right away on the functionality and for that he will find in D3 a plethora of methods and helper functions to assist him. If you haven't yet, I urge you to discover D3.