Intro to d3.js

Data Driven Documents

dzwarg@sapient.com

Useful Links

Follow Along: http://d3-reveal-demo.dzwarg.c9.io/
Cloud9 workspace: https://c9.io/dzwarg/d3-reveal-demo
Github Repo: https://github.com/dzwarg/d3-reveal-demo

Data Driven

d3.js is designed to present data

Documents

Strong support for web standards

HTML5
CSS selectors
SVG

Live Code Examples

Code snippets are live d3 demos

Edit the code if you are following along in your browser

SVG Primitives

https://github.com/mbostock/d3/wiki/SVG-Shapes

RECT


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('rect')
  .style('fill', 'red')
  .attr('height', h/2)
  .attr('width', w/2)
  .attr('x', -w/4)
  .attr('y', -h/4);

CIRCLE


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('circle')
  .style('fill', 'red')
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('r', w/8);

ELLIPSE


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('ellipse')
  .style('fill', 'red')
  .attr('cx', 0)
  .attr('cy', 0)
  .attr('rx', w/4)
  .attr('ry', w/8);

LINE


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('line')
  .style('stroke', 'red')
  .attr('x1', -w/8)
  .attr('y1', -w/8)
  .attr('x2', w/8)
  .attr('y2', w/8);

POLYLINE


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('polyline')
  .style('stroke', 'red')
  .style('fill', 'none')
  .attr('points', '-100,-100 -50,100 50,100 100,-100');

POLYGON


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('polygon')
  .style('stroke', 'red')
  .style('fill', 'none')
  .attr('points', '-100,-100 -50,100 50,100 100,-100');

TEXT


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('text')
  .style('fill', 'red')
  .style('stroke', 'none')
  .attr('x', -150)
  .attr('y', 10)
  .text('Hello, Global Markets!');

Selections

Work with sets of elements.

d3.select


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('text')
  .style('fill', 'red')
  .style('stroke', 'none')
  .attr('x', -175)
  .attr('y', 10)
  .text(d3.select('.select.sandbox svg').property('namespaceURI'));

d3.selectAll


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('circle').attr('cx', -100).attr('cy', 0).attr('r', 25);
g.append('circle').attr('cx',    0).attr('cy', 0).attr('r', 25);
g.append('circle').attr('cx',  100).attr('cy', 0).attr('r', 25);

g.append('text')
    .attr('x', 150)
    .attr('y', 10)
    .text('= ' + g.selectAll('circle').size());

d3.data


// g = an SVG 'g' element, h = height in px, w = width in px
var data = g.selectAll('circle')
    .data([-100, 0, 100])
  .enter()
    .append('circle').attr('cy', 0).attr('r', 25)
    .attr('cx', function(d,i) { return d; });

g.append('text').attr('x', 150).attr('y', 10)
    .text('= ' + g.selectAll('circle').size());

d3.data joins your data into d3

data() enables powerful data-driven operations:

data() all changed elements
enter() all new elements
exit() all old elements

data joins

data loaded by d3 is joined to the most recent data.
d3 will match the loaded data to the already rendered selection.
d3 stores data with markup elements.

Update Selection


// data = an array of data
//
// data() contains any of the changed array items  
data = [100, 50, 100, 50, 100, 50, 100, 50];

Enter Selection


// data = an array of data
//
// enter() contains new elements added to this array
data = [100, 200];

Exit Selection


// data = an array of data
//
// exit() contains elements removed from this array
data = [250, 225, 200, 175, 150, 125, 100];

Selections are just HTML


// data = an array of data
//
// this selection
data = [
    [250, 225, 200],
    [175, 150, 125],
    [100]
];

Transitions

Apply a change to a property or style of a primitive over time.

Transition Attributes


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('rect')
  .style('fill', 'red')
  .attr('height', h/2)
  .attr('width', w/4)
  .attr('x', -w/2)
  .attr('y', -h/4)
  .transition()
  .attr('x', w/4);

Transition Style


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('rect')
  .style('fill', 'red')
  .attr('height', h/2)
  .attr('width', w/2)
  .attr('x', -w/4)
  .attr('y', -h/4)
  .transition()
  .style('fill', 'green');

Delay


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('rect')
  .style('fill', 'red')
  .attr('height', h/2)
  .attr('width', w/4)
  .attr('x', -w/2)
  .attr('y', -h/4)
  .transition()
  .delay(3000)
  .attr('x', w/4);

Duration


// g = an SVG 'g' element, h = height in px, w = width in px
g.append('rect')
  .style('fill', 'red')
  .attr('height', h/2)
  .attr('width', w/4)
  .attr('x', -w/2)
  .attr('y', -h/4)
  .transition()
  .duration(3000)
  .attr('x', w/4);

Combinations


// g = an SVG 'g' element, h = height in px, w = width in px
g.selectAll('rect')
    .data([0, 10, 20])
  .enter()
    .append('rect').style('fill', 'red').attr('height', h/4).attr('width', w/8).attr('x', -w/2) 
    .attr('y', function(d){ return (10 * d) - h/2; })
    .transition()
    .delay(    function(d){ return 100 * (10 + d); })
    .duration( function(d){ return 100 * (10 + d); })
    .attr('x', w*3/8);

Layouts

Control data distribution across the canvas