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.

1. The anatomy of
an infographic
/Luca Mearelli @lmea

2. The Wealth & Health of Nation
300 400 1,000 2,000 3,000 4,000 10,000 20,000 30,000 40,000 100,000
10
20
30
40
50
60
70
80
income per capita, inflation-adjusted (dollars)
lifeexpectancy(years)
1800
Source: , , Mike Bostock Tom Carden Gapminder

3. Visualization
=
Data + Representation
The end target is to extract meaningful informations from the
raw data.

4. Javascript
&
Web technologies
Are the ideal platform to build visualizations: easy to tinker
with, powerful, accessible.

5. D3js
D3 is a tool to link data to elements and manipulate them.
http://d3js.org

6. Chris Viau on D3 vs JQuery
D3 is not an SVG layer, not a compatibility layer
and especially not an abstraction layer.
It's a set of tools on top of web technologies to
bind data to DOM elements. '

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

8. Data
Time,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. Lets make a barchart (or two)
http://tributary.io/inlet/5567235
http://tributary.io/inlet/5567278

10. Margin conventions
http://bl.ocks.org/mbostock/3019563

11. Selections
varsvg=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. Binding data
vartext=svg.selectAll("rect")
.data(quakes);

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
//theupdateselection
text.text(function(d){returnd[4];});
//Removeoldelementsasneeded.
text.exit().remove();
http://bl.ocks.org/mbostock/3808218

14. Scales
Domain → Range
varmagScale=d3.scale.linear()
.domain([2.0,8.0])
.range([0,225]);
https://github.com/mbostock/d3/wiki/Scales

15. Functions everywhere
varmagExtent=d3.extent(quakes,function(d){returnd[4];});
selection
.append('rect')
.attr({
'height':function(d,i){
returnmagScale(d[4]);
}})
selection.call(aFunction)

16. Call chaining
barsGroups
.append('text')
.text(function(d,i){returnString(d[4]);})
.attr('y',-4)
.attr("dx",5)
.attr("text-anchor","middle")
.attr('font-size',10)

17. More charts (animated!)
http://tributary.io/inlet/5567290
http://tributary.io/inlet/5567292

18. Axes
varyAxis=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. Object constancy
graph.selectAll('g')
.data(dd,function(d){returnd.Time})

20. A dynamic barchart
http://tributary.io/inlet/5567329

21. Transitions
barsGroups
.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. A simple scatterplot
http://tributary.io/inlet/5567399

23. Zooming scatterplot
http://tributary.io/inlet/5567408

24. Zooming
varzoom=d3.behavior.zoom()
.x(timeScale)
.on("zoom",zoomed);

25. Lets make a map
http://tributary.io/inlet/5567414
http://tributary.io/inlet/5567524

26. Projections & geodata
varprojection=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. Loading data
d3.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. A more complex map
http://tributary.io/inlet/5567533

29. Assorted Tips
Group things
Queue.js:
Crossfilter:
Topojson:
Use rapid prototyping tools (e.g. Tributary: )
https://github.com/mbostock/queue
http://square.github.io/crossfilter/
https://github.com/mbostock/topojson
http://tributary.io

30. Thanks!
Luca Mearelli / @lmea