The anatomy of an infographic
Upcoming SlideShare
Loading in...5
×
 

The anatomy of an infographic

on

  • 875 views

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

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.

Statistics

Views

Total Views
875
Views on SlideShare
868
Embed Views
7

Actions

Likes
1
Downloads
10
Comments
0

1 Embed 7

https://twitter.com 7

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The anatomy of an infographic The anatomy of an infographic Presentation Transcript

    • The anatomy ofan infographic/Luca Mearelli @lmea
    • The Wealth & Health of Nation300 400 1,000 2,000 3,000 4,000 10,000 20,000 30,000 40,000 100,0001020304050607080income per capita, inflation-adjusted (dollars)lifeexpectancy(years)1800Source:  ,  , Mike Bostock Tom Carden Gapminder
    • Visualization =Data + RepresentationThe end target is to extract meaningful informations from theraw data.
    • Javascript &Web technologiesAre the ideal platform to build visualizations: easy to tinkerwith, powerful, accessible.
    • D3jsD3 is a tool to link data to elements and manipulate them.http://d3js.org
    • Chris Viau on D3 vs JQueryD3 is not an SVG layer, not a compatibility layerand especially not an abstraction layer.Its 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-0914:30:35.000,43.451,12.310,6.7,1.3,SISBAS,2013-05-0914:15:25.000,43.452,12.308,6.3,0.8,SISBAS,quakes=[["2013-05-0811:50:14.000",43.450,12.298, 9.6,3.0],["2013-05-0804:29:05.000",43.452,12.304,10.1,3.3]]
    • Lets make a barchart (or two)http://tributary.io/inlet/5567235http://tributary.io/inlet/5567278
    • Margin conventionshttp://bl.ocks.org/mbostock/3019563
    • Selectionsvarsvg=d3.select(svg);svg.attr({width:width+margin.left+margin.right,height:height+margin.top+margin.bottom})varbarsGroups=graph.selectAll(g)http://bost.ocks.org/mike/selection/
    • Binding datavartext=svg.selectAll("rect").data(quakes);
    • The general update pattern//Joinnewdatawitholdelements,ifany.vartext=svg.selectAll("text").data(quakes);//Updateoldelementsasneeded.text.attr("class","update");//Createnewelementsasneeded.text.enter().append("text").attr("class","enter").attr("x",function(d,i){returni*32;})//Appendingtotheenterselectionexpands//theupdateselectiontext.text(function(d){returnd[4];});//Removeoldelementsasneeded.text.exit().remove();http://bl.ocks.org/mbostock/3808218
    • ScalesDomain → RangevarmagScale=d3.scale.linear().domain([2.0,8.0]).range([0,225]);https://github.com/mbostock/d3/wiki/Scales
    • Functions everywherevarmagExtent=d3.extent(quakes,function(d){returnd[4];});selection.append(rect).attr({height:function(d,i){returnmagScale(d[4]);}})selection.call(aFunction)
    • Call chainingbarsGroups.append(text).text(function(d,i){returnString(d[4]);}).attr(y,-4).attr("dx",5).attr("text-anchor","middle").attr(font-size,10)
    • More charts (animated!)http://tributary.io/inlet/5567290http://tributary.io/inlet/5567292
    • AxesvaryAxis=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){returnd.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
    • Zoomingvarzoom=d3.behavior.zoom().x(timeScale).on("zoom",zoomed);
    • Lets make a maphttp://tributary.io/inlet/5567414http://tributary.io/inlet/5567524
    • Projections & geodatavarprojection=d3.geo.mercator().scale(2100).translate([-122,2000])varpath=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