D3.js

This article or section is a stub. It does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

Draft

Introduction[edit | edit source]

“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[edit | edit source]

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[edit | edit source]

Official[edit | edit source]

D3.js Wiki at GiHub. This website includes documentation and links to other resources (including source)

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

Other[edit | edit source]

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

Bibliography[edit | edit source]

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