D3 = Data-Driven Documents

d3.js is a data visualization framework in JavaScript for the web. It leverages open web standards such as DOM, CSS and SVG.

Processing.js
Raphaƫl
d3.js Google Charts
Highcharts

Examples

Draw a rectangle
Bind data
Adding time

Selections

W3C Selector API.

Data joins

Input data is an array of arbitrary values, such as numbers, strings or objects.

var series = [1,2,3,4,5,6];
d3.selectAll('div').data(series);

By default, data is joined to elements by index. An optional key can be passed in to preserve object constancy across transitions.

Upon data join, d3 generates three virtual selections: enter, update and exit.

Data joins explained

Tell d3 what you want

Not covered in this presentation

d3.js official site (lots of examples)
d3.js on Github