D3.JS: DATA-DRIVEN DELIGHT

Source: Mike Bostock's Craig Retroazimuthal

Anna Powell-Smith, Front-End London, 17/1/13

HELLO

http://anna.ps
Today's slides: http://anna.ps/talks/fel

My D3 projects:

Baby names
(streamgraphs)

Dress sizes
(line graphs)

WHAT IS D3?

A JavaScript library for creating data visualisations
"jQuery for SVG"

http://d3js.org

WHAT IS D3?

The eighth most starred library on GitHub

127KB minified

BSD licensed (BSD-new)

Created by Mike Bostock while at Stanford

Development now sponsored by the New York Times

WHERE DID D3 COME FROM?


2005: Prefuse (Java, Heer, Berkeley)
|
2007: Flare (ActionScript, Heer, Berkeley)
|
2009: Protovis (JavaScript, Heer/Bostock, Stanford)
|
2011: D3 (JavaScript, Heer/Bostock, Stanford)

TLDR: very smart people thought very hard
about visualisation for a very long time

WHY D3?

Other libraries: proprietary methods for visualising
Convenient, but tricky to extend or debug
var plot1 = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);

WHY D3?

D3: solves the fundamental problem
Bind data directly to the DOM
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];

var svg = d3.select("body").append("svg")
	.attr("width", w).attr("height", h);

svg.selectAll("rect").data(dataset)
	.enter().append("rect")
	.attr("x", function(d, i) {
	 return i * (w / dataset.length);
	})
	.attr("y", function(d) {
	 return h - (d * 4);
	})
	.attr("width", w / dataset.length)
	.attr("height", function(d) {
	 return d * 4;
	})
	.attr("fill", function(d) {
	 return "rgb(0, 0, " + (d * 10) + ")";
	});

WHY D3?

View and debug the output with Firebug

THE D3 DIFFERENCE


1. Solves the fundamental problem of data visualisation: manipulate the DOM with data

2. Web standards: style with CSS, interact with JS events, debug with DevTools/Firebug

3. Fast, simple and efficient

4. Fantastic support for animations and transitions

5. Encourages code modularity with plugins

BUT IS IT AWESOME??

EXAMPLES

Source: Mike Bostock's streamgraph example
(click on the button to load new data)

EXAMPLES

Source: Mike Bostock's force-directed graph example
(click and drag to interact)

EXAMPLES

Source: Mike Bostock's Chloropleth Map
(GeoJSON boundaries and CSV data)

EXAMPLES

Source: Mike Bostock's OMG Particles
(try mousing over)


FUNDAMENTALS

DATA BINDING

jQuery-like selectors to simplify DOM API

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];

var svg = d3.select("body").append("svg")
	.attr("width", 500).attr("height", 100);

svg.selectAll("#graph rect.cities").data(dataset)
	.enter().append("rect")
	.attr("x", function(d, i) {
	  return i * (w / dataset.length);
	})
	.attr("y", function(d) {
	  return h - (d * 4);
	})
	.attr("width", w / dataset.length - barPadding)
	.attr("height", function(d) {
	  return d * 4;
	})
	.attr("fill", function(d) {
	  return "rgb(0, 0, " + (d * 10) + ")";
	});

DATA BINDING

Set properties using functions of data - very powerful

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...];

var svg = d3.select("body").append("svg")
	.attr("width", 500).attr("height", 100);

svg.selectAll("#graph rect.cities").data(dataset)
	.enter().append("rect")
	.attr("x", function(d, i) {
	  return i * (w / dataset.length);
	})
	.attr("y", function(d) {
	  return h - (d * 4);
	})
	.attr("width", w / dataset.length - barPadding)
	.attr("height", function(d) {
	  return d * 4;
	})
	.attr("fill", function(d) {
	  return "rgb(0, 0, " + (d * 10) + ")";
	});

SCALES

Makes it easy to map your input data to properties: ordinal values, log scales, power scales, quintiles, time ranges, colours...

Source: Jerome Cukier's D3, Scales and Colour

TRANSITIONS

Make your charts move


svg.selectAll("rect").data(dataset)
	.transition().duration(2500)
	.attr("y", function(d) {return h - yScale(d); })
	.attr("height", function(d) { return yScale(d); })
	.attr("fill", function(d) {
	return "rgb(0, 0, " + (d * 10) + ")";
	});

LAYOUTS


Bundle
Chord
Cluster
Force
Hierarchy
Histogram

Pack
Partition
Pie
Stack
Tree
Treemap

Key point: D3 layouts don't draw your graphs for you. They just do the heavy data lifting

LIMITATIONS
1. SVG: no IE8 support, older Android

2. Steep learning curve for simple graphs: but try Rickshaw.js, NVD3

3. Can't hide underlying data: always visible 

4. DOM rendering can be slow with many elements: if you need to draw thousands of points, consider canvas instead

IE8 APPROACHES


1. Aight - stops D3 breaking altogether in IE8

2. R2D3 - use Raphael and D3 together for visualisation

3. Feature detect - and use alternative libraries (or revert to tables)

document.implementation.hasFeature
 ("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");

POSSIBILITIES

Way too much to cover here...

POSSIBILITIES: GEO

Dynamic maps (click on button)
Source: CartoDB makes D3 maps a breeze

POSSIBILITIES: MATHS


Works well with anything mathematical
Amazing examples at http://jasondavies.com

POSSIBILITIES: 
LOVELY INTERACTION


Use with a light touch for fun effects
http://alignedleft.com

RESOURCES

GETTING STARTED


Getting past the conceptual hurdles:
the hardest idea in D3

  
d3.select("body").selectAll("p")
	.data(dataset)
	.enter()
	.append("p")
	.text("New paragraph!");

SCOTT MURRAY'S TUTORIALS

The best possible starting point
Available free at alignedleft.com

SCOTT MURRAY'S BOOK


Available to pre-order from O'Reilly

MIKE BOSTOCK'S PAPER

Bostock, Ogievetsky and Heer, 2011

RESOURCES:

GETTING STARTED

StackOverflow for help

d3-js Google Group for discussion

The D3 wiki for tutorials and examples

RESOURCES:

INTERMEDIATE

Jerome Cukier's D3 cheat sheet (pdf)

RESOURCES:

INTERMEDIATE

bl.ocks.org is where people post examples: follow Mike Bostock & Jason Davies for inspiration

RESOURCES:

ADVANCED


BEER!


D3 London Drinks
Wednesday 30th January

http://lanyrd.com/2013/ldnd3js

QUESTIONS?

WORK FOR MYSOCIETY!

Developers needed