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...
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 s...
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...
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})var...
Binding datavartext=svg.selectAll("rect").data(quakes);
The general update pattern//Joinnewdatawitholdelements,ifany.vartext=svg.selectAll("text").data(quakes);//Updateoldelement...
ScalesDomain → RangevarmagScale=d3.scale.linear().domain([2.0,8.0]).range([0,225]);https://github.com/mbostock/d3/wiki/Sca...
Functions everywherevarmagExtent=d3.extent(quakes,function(d){returnd[4];});selection.append(rect).attr({height:function(d...
Call chainingbarsGroups.append(text).text(function(d,i){returnString(d[4]);}).attr(y,-4).attr("dx",5).attr("text-anchor","...
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]).tickSiz...
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...
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(pr...
Loading datad3.json("/static/data/cartography/reg2011.json",function(error,data){})queue().defer("/static/data/cartography...
A more complex maphttp://tributary.io/inlet/5567533
Assorted TipsGroup thingsQueue.js:Crossfilter:Topojson:Use rapid prototyping tools (e.g. Tributary: )https://github.com/mb...
Thanks!Luca Mearelli / @lmea
Upcoming SlideShare
Loading in...5
×

The anatomy of an infographic

627

Published on

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.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
627
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The anatomy of an infographic

  1. 1. The anatomy ofan infographic/Luca Mearelli @lmea
  2. 2. 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
  3. 3. Visualization =Data + RepresentationThe end target is to extract meaningful informations from theraw data.
  4. 4. Javascript &Web technologiesAre the ideal platform to build visualizations: easy to tinkerwith, powerful, accessible.
  5. 5. D3jsD3 is a tool to link data to elements and manipulate them.http://d3js.org
  6. 6. 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.
  7. 7. http://iside.rm.ingv.it/iside/standard/index.jsp
  8. 8. 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]]
  9. 9. Lets make a barchart (or two)http://tributary.io/inlet/5567235http://tributary.io/inlet/5567278
  10. 10. Margin conventionshttp://bl.ocks.org/mbostock/3019563
  11. 11. 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/
  12. 12. Binding datavartext=svg.selectAll("rect").data(quakes);
  13. 13. 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
  14. 14. ScalesDomain → RangevarmagScale=d3.scale.linear().domain([2.0,8.0]).range([0,225]);https://github.com/mbostock/d3/wiki/Scales
  15. 15. Functions everywherevarmagExtent=d3.extent(quakes,function(d){returnd[4];});selection.append(rect).attr({height:function(d,i){returnmagScale(d[4]);}})selection.call(aFunction)
  16. 16. 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)
  17. 17. More charts (animated!)http://tributary.io/inlet/5567290http://tributary.io/inlet/5567292
  18. 18. 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
  19. 19. Object constancygraph.selectAll(g).data(dd,function(d){returnd.Time})
  20. 20. A dynamic barcharthttp://tributary.io/inlet/5567329
  21. 21. 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/
  22. 22. A simple scatterplothttp://tributary.io/inlet/5567399
  23. 23. Zooming scatterplothttp://tributary.io/inlet/5567408
  24. 24. Zoomingvarzoom=d3.behavior.zoom().x(timeScale).on("zoom",zoomed);
  25. 25. Lets make a maphttp://tributary.io/inlet/5567414http://tributary.io/inlet/5567524
  26. 26. 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)
  27. 27. 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){...});
  28. 28. A more complex maphttp://tributary.io/inlet/5567533
  29. 29. 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
  30. 30. Thanks!Luca Mearelli / @lmea
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×