D3.js is a JavaScript library for binding data to documents and rendering interactive data visualizations in web browsers. It allows binding arbitrary data to a Document Object Model (DOM) and applying data-driven transformations to the DOM. D3 works with common web technologies like HTML, SVG, CSS, and JSON, and supports all modern browsers. It provides an extensive API for manipulating documents based on data.

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