d3.js

Data-Driven Documents

Introduction

d3.js: Data-Driven Documents

• JavaScript Library
• Open source
• developed by Michael Bostock and others at Stanford University
• former work on Protovis Library

d3.js: Data-Driven Documents

• not a traditional visualization framework
• focus on efficient manipulation of documents based on data
• bind arbitrary data to the DOM
• apply data-driven transformations to the document
• functional/declarative style
• support for interaction and animation
• you have to do the graphical representation yourself!
• but has helpers for SVG generation

Selections

• operate on arbitrary sets of nodes called selections
• W3C Selectors API or Sizzle fallback

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

Dynamic Properties

• bind data to a selection
• apply functions to styles, attributes and other properties
• a lot of built-in reusable functions available
• bound data available as first argument
• you can omit the data operator the second time!

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d, i) { return d + "px"; });
    

Enter and Exit

• enter: selects all data elements without a DOM representation
• exit: selects all DOM elements without data
• common pattern
• perform only necessary modifications

var p = d3.select("body").selectAll("p")  // Update…
    .data([4, 8, 15, 16, 23, 42])
    .text(String);
p.enter().append("p") // Enter…
    .text(String);
p.exit().remove();    // Exit…
    

Subselections

• generate a subselection by calling selectAll on an existing selection
• maintains the hierarchical structure

d3.selectAll("ul")
    .data(questions) // an array of questions
  .selectAll("li")
    // a nested array of responses
    .data(function(d) { return d.responses; }) 
    // the text of the response
    .text(function(d) { return d.text; }); 
    

Transitions

• with d3.js they are easy!
• various tweening functions
• interpolation of basic types, numbers and numbers in strings (e.g. "15px")

// fade background from white to black in 1s
d3.select("body").transition()
    .duration(1000)
    .style("background-color", "black");
    

Demo Time

Data Format (CSV)

year,country,survival,children,population
1960,Zimbabwe,0.8458,7.16,3752373
1960,Zambia,0.7904,7.02,3044733
1960,Vietnam,0.90311951,7.09,35172657
1960,Venezuela,0.916,6.62,7562108
1960,Vanuatu,0.8399,7.2,63702
1960,Uruguay,0.9381,2.88,2538095
1960,United States,0.9699,3.59,186326215
    

• compiled data from http://www.gapminder.org/data/

Do you speak JavaScript?! ☺

More Demos

Resources

• Documentation and Source Code
  http://mbostock.github.com/d3/
• D3: Data-Driven Documents (Stanford Paper)
  http://vis.stanford.edu/papers/d3
• Don't forget to look at the examples!
  https://github.com/mbostock/d3/tree/master/examples

</talk>

Questions?