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.

Examples

Selections

W3C Selector API.

• tag

  d3.select('div')

• class

  d3.select('.circle')

• id

  d3.select('#vis')

• attribute

  d3.select('input[type=text]')

• containment

  d3.select('#vis div')

• adjacency

  d3.select('p ~ .help')

• combination

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

• Set element styles and attributes

  var series = [{w: 10, h: 20}, {w: 30, h: 40}];
  d3.selectAll('div')
    .data(series)
    .style('width', function(d,i){ return d.w + 'px'; })
    .style('height', function(d){ return d.h + 'px'; })

• Draw shapes

  selection.enter().append('circle')
    .attr('cx', toPx)
    .attr('cy', toPx)
    .attr('r', 10)

• Setup Transition

  selection.exit()
    .transition()
      .duration(800)
      .attr('cx', toPx)
      .attr('cy', toPx)
      .attr('r', 80)
      .remove()

Not covered in this presentation

• Interaction and animation
• Modules
  • Time
  • Layouts
  • SVG Shapes
  • Scale
  • Axes
  • Behaviors (drag, zoom)
  • geo
  • ...

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