Upload
luca-mearelli
View
124
Download
4
Tags:
Embed Size (px)
DESCRIPTION
We have a lot of data at our disposal, and we are ever more producing and collecting data from multiple sources. Data visualizations let us turn raw data into relevant information and make it easier to extract meaning from the information and to reason about it. This talk will show you visualizations of increasing complexity all developed with d3js and we’ll analyze how they are built.
Citation preview
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. '
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
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