1. D3.js
Data-Driven Documents
http://d3js.org/
Joris Klerkx - @jkofmsk
Wednesday 3 October 12

2. What?
Bind arbitrary data do a
Document Object Model (DOM)
Apply data-driven
transformations to the DOM
Wednesday 3 October 12

3. From data.. to interactive
visualisations
[4, 8, 15, 16, 23, 42];
function(d) {
return d3.time.days(new Date(2012, 0, 1),
new Date(2013, 0, 1));
})
name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph
(s),year
AMC Ambassador Brougham,13,8,360,175,3821,11,73
AMC Ambassador DPL,15,8,390,190,3850,8.5,70
AMC Ambassador SST,17,8,304,150,3672,11.5,72
CSV
AMC Concord DL 6,20.2,6,232,90,3265,18.2,79
AMC Concord DL,18.1,6,258,120,3410,15.1,78
AMC Concord DL,23,4,151,,3035,20.5,82
AMC Concord,19.4,6,232,90,3210,17.2,78
AMC Concord,24.3,4,151,90,3003,20.1,80
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
JSON
}
Wednesday 3 October 12

4. Advantages
Web standards
HTML, SVG, CSS
Well-known web technologies
javascript, json, CSV, ...
Extensive API
https://github.com/mbostock/d3/wiki/API-Reference
All (modern) browsers & platforms
IE9, Chrome, FF, Safari, ... mobile, desktop
Wednesday 3 October 12

5. Who knows?
• HTML?
• CSS?
• http://www.w3schools.com/css/
• Javascript?
• http://www.w3schools.com/js/
• SVG?
• http://www.w3schools.com/svg/
Wednesday 3 October 12

6. Scalable Vector Graphics
Definition of graphics in XML
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Wednesday 3 October 12

7. D3 - Three little circles
http://mbostock.github.com/d3/tutorial/circle.html
Wednesday 3 October 12

8. Look out
Quite a learning curve
Wednesday 3 October 12

9. Tools you need
• Text Editor or IDE
• Browser(s)
• Developer Tools - embedded in
Chrome (or firebug in FF)
Wednesday 3 October 12

10. Tool(s) that could be useful
SVG Editor (e.g. InkScape)
http://colorbrewer2.org/
Wednesday 3 October 12

11. Further Reading
http://mbostock.github.com/d3
http://www.jeromecukier.net/blog/2012/09/04/getting-to-
hello-world-with-d3/
http://christopheviau.com/d3_tutorial/
http://alignedleft.com/tutorials/d3/fundamentals/
...
If you find other resources,
please share via twitter!
Wednesday 3 October 12

12. Your Mission.
• Play with D3.js
• Look at tutorials & examples
• Check out datasets
• http://www.visualizing.org/contests/visualize-us-election
• http://www.visualizing.org/contests/oecd-education-
challenge
• http://www.visualizing.org/data/browse
• 17 october: Show-and-Tell
Wednesday 3 October 12

13. Thank you.
Now up to you.
Wednesday 3 October 12