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.

D3jsD3 is a tool to link data to elements and manipulate them.

http://d3js.org

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. '

http://iside.rm.ingv.it/iside/standard/index.jsp

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

Margin conventions

http://bl.ocks.org/mbostock/3019563

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 })

A dynamic barcharthttp://tributary.io/inlet/5567329

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/

A simple scatterplothttp://tributary.io/inlet/5567399

Zooming scatterplothttp://tributary.io/inlet/5567408

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) { ... });

A more complex maphttp://tributary.io/inlet/5567533

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