D3.JS: DATA-DRIVEN DELIGHT
Source: Mike Bostock's Craig Retroazimuthal
Anna Powell-Smith, Front-End London, 17/1/13
HELLO
Today's slides: http://anna.ps/talks/fel
WHAT IS D3?
A JavaScript library for creating data visualisations
"jQuery for SVG"
WHENCE D3?
2005: Prefuse (Java, Heer, Berkeley)
|
2007: Flare (ActionScript, Heer, Berkeley)
|
2009: Protovis (JavaScript, Heer/Bostock, Stanford)
|
2011: D3 (JavaScript, Heer/Bostock, Stanford)
WHY D3?
Other libraries: proprietary methods
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", 500).attr("height", 100);
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 - barPadding)
.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 fundamental problem: manipulate DOM with data
2. Web standards: style with CSS, JS events, 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
EXAMPLES
Source: Mike Bostock's force-directed graph example
EXAMPLES
Source: Mike Bostock's Chloropleth Map
EXAMPLES
Source: Mike Bostock's OMG Particles
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
Source: Jerome Cukier's D3, Scales and Colour
TRANSITIONS
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
LIMITATIONS
1. SVG: no IE8 support, older Android
2. Not easy for simple graphs: but try Rickshaw.js, NVD3
3. Can't hide underlying data: always visible
IE8 APPROACHES
1.
Aight
- stops D3 breaking altogether in IE8
2.
R2D3
- use Raphael and D3 together for visualisation
3. Feature detection and use alternative libraries (or tables)
document.implementation.hasFeature
("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
POSSIBILITIES: GEO
Source: CartoDB makes D3 maps a breeze
POSSIBILITIES: MATHS
POSSIBILITIES:
LOVELY INTERACTION
RESOURCES:
GETTING STARTED
Getting past the conceptual hurdles
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
SCOTT MURRAY'S TUTORIALS
Free at alignedleft.com
SCOTT MURRAY'S BOOK
Available to pre-order from O'Reilly
MIKE BOSTOCK'S PAPER
RESOURCES:
INTERMEDIATE
Jerome Cukier's D3 cheat sheet (pdf)
RESOURCES:
INTERMEDIATE
bl.ocks.org: follow Mike Bostock & Jason Davies
RESOURCES:
ADVANCED
BEER!
D3 London Drinks
Wednesday 30th January
QUESTIONS?
WORK FOR MYSOCIETY
d3 intro at front end london
By annaps
