D3.js

Draft

Introduction

“D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.” (d3js.org, April 2013)

If you want a quick introduction with a few slides, you can see a Macwright presentation about D3. But as stated in the presentatino, keep in mind that "d3 requires deep proficiency in javascript".

Introductory D3 + SVG example

D3 perfectly works with HTML and CSS. However, we get more power from using SVG.

Live example:

• d3-intro-1.html

Chaining

D3 implements a chaining mechanism using the CSS W3C Selectors API. Read a chain from right to left or bottom to top. The following are equivalent:

// take 1
 d3.selectAll("p").style("color", "white");
// take 2
 d3
   .selectAll("p")
   .style("color", "white");

Anonymous functions

The following just returns the value it is given.

function(d) {
   return d;
}

The following code would take the value of the currently selected data element (i.e. one of [50, 100, 150, 200, 250] and insert it into the the "text" child of the current DOM element. “Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions.” (d3js.org).

.text(function(d) {return d;});

The following code defines a function that will be given both the value of the currently selected data element and its position.

 .attr("cx", function(d, i) {return 25 + (i * 50 + i * d * 0.1 );})

Links

Official

• D3.js Wiki at GiHub. This website includes documentation and links to other resources (including source)
  • Examples Gallery
  • Tutorials and Talks
  • API Reference
  • d3.js on Stack Overflow
  • d3-js Google Group

• http://d3js.org/ - Short intro page with links to the above and the source code zip file.

Other

• http://bost.ocks.org/mike/join/
• D3 Tutorials by Scott Murray (Original tutorial expanded into the book)

Bibliography

• Michael Bostock, Vadim Ogievetsky and Jeffrey Heer (). D3 : Data-Driven Documents, IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011

• Scott Murray (2013). Interactive Data Visualization for the Web. An Introduction to Designing with D3. O'Reilly Media