Download - The anatomy of an infographic
The anatomy ofan infographic
/ Luca Mearelli @lmea
The Wealth & Health of Nation
300 400 1,000 2,000 3,000 4,000 10,000 20,000 30,000 40,000 100,00010
20
30
40
50
60
70
80
income per capita, inflation-adjusted (dollars)
life
expe
ctan
cy (y
ears
)
1800Source: , , Mike Bostock Tom Carden Gapminder
Visualization =
Data + RepresentationThe end target is to extract meaningful informations from the
raw data.
Javascript &
Web technologiesAre the ideal platform to build visualizations: easy to tinker
with, powerful, accessible.
Chris Viau on D3 vs JQuery
D3 is not an SVG layer, not a compatibility layerand especially not an abstraction layer.
It's a set of tools on top of web technologies tobind data to DOM elements. '
DataTime,Lat,Lon,Depth,Mag,Source,2013-05-09 14:30:35.000,43.451,12.310,6.7,1.3,SISBAS,2013-05-09 14:15:25.000,43.452,12.308,6.3,0.8,SISBAS,
quakes = [[ "2013-05-08 11:50:14.000", 43.450, 12.298, 9.6, 3.0 ], [ "2013-05-08 04:29:05.000", 43.452, 12.304, 10.1, 3.3 ]]
Lets make a barchart (or two) http://tributary.io/inlet/5567235
http://tributary.io/inlet/5567278
Selectionsvar svg = d3.select('svg');svg.attr({ 'width': width + margin.left + margin.right, 'height': height + margin.top + margin.bottom})
var barsGroups = graph.selectAll('g')
http://bost.ocks.org/mike/selection/
Binding datavar text = svg.selectAll("rect") .data(quakes);
The general update pattern// Join new data with old elements, if any.var text = svg.selectAll("text").data(quakes);
// Update old elements as needed.text.attr("class", "update");
// Create new elements as needed.text.enter().append("text") .attr("class", "enter") .attr("x", function(d, i) { return i * 32; })
// Appending to the enter selection expands // the update selectiontext.text(function(d) { return d[4]; });
// Remove old elements as needed.text.exit().remove();
http://bl.ocks.org/mbostock/3808218
ScalesDomain → Range
var magScale = d3.scale.linear() .domain([2.0, 8.0]) .range([0, 225]);
https://github.com/mbostock/d3/wiki/Scales
Functions everywherevar magExtent = d3.extent(quakes, function (d) { return d[4]; });
selection .append('rect') .attr({ 'height': function(d,i){ return magScale(d[4]); }})
selection.call(aFunction)
Call chainingbarsGroups .append('text') .text(function(d,i) { return String(d[4]);}) .attr('y', -4) .attr("dx", 5) .attr("text-anchor", "middle") .attr('font-size', 10)
More charts (animated!) http://tributary.io/inlet/5567290
http://tributary.io/inlet/5567292
Axesvar yAxis = d3.svg.axis() .scale(magScale.range([300,30])) .orient('left') .ticks(5) .tickValues([3.0, 3.2, 3.4, 3.6, 3.8]) .tickSize(-width, 1, 1) .tickPadding(8);
graph.append('g') .call(yAxis)
https://github.com/mbostock/d3/wiki/SVG-Axes
Object constancygraph.selectAll('g') .data(dd, function(d){ return d.Time })
TransitionsbarsGroups .transition() .duration(2000) .ease('cubic') .attr("transform", function(d,i){ x = timeScale(tf.parse(d[0])); y = 234-magScale(d[4]); return "translate(" + x + "," + y + ")"; })
http://bost.ocks.org/mike/transition/
Zoomingvar zoom = d3.behavior.zoom() .x(timeScale) .on("zoom", zoomed);
Lets make a map http://tributary.io/inlet/5567414
http://tributary.io/inlet/5567524
Projections & geodatavar projection = d3.geo.mercator() .scale(2100) .translate([-122,2000])
var path = d3.geo.path() .projection(projection);
svg.selectAll("path") .data(regions) .enter() .append('path') .attr('d', path)
Loading datad3.json("/static/data/cartography/reg2011.json", function(error, data) {})
queue() .defer("/static/data/cartography/reg2011.json") .defer("/static/data/quakes.csv") .await(function(error, reg2011, quakes) { ... });
Assorted TipsGroup thingsQueue.js:Crossfilter:Topojson:Use rapid prototyping tools (e.g. Tributary: )
https://github.com/mbostock/queuehttp://square.github.io/crossfilter/
https://github.com/mbostock/topojsonhttp://tributary.io
Thanks!Luca Mearelli / @lmea
