d3.js capita selecta
DESCRIPTION
TRANSCRIPT
D3.js
Joris Klerkx - @jkofmsk
http://d3js.org/Data-Driven Documents
Wednesday 3 October 12
What?
Bind arbitrary data do a Document Object Model (DOM)
Apply data-driven transformations to the DOM
Wednesday 3 October 12
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),yearAMC Ambassador Brougham,13,8,360,175,3821,11,73AMC Ambassador DPL,15,8,390,190,3850,8.5,70AMC Ambassador SST,17,8,304,150,3672,11.5,72AMC Concord DL 6,20.2,6,232,90,3265,18.2,79AMC Concord DL,18.1,6,258,120,3410,15.1,78AMC Concord DL,23,4,151,,3035,20.5,82AMC Concord,19.4,6,232,90,3210,17.2,78AMC Concord,24.3,4,151,90,3003,20.1,80
CSV
{"employees": [{ "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" }]}
JSON
Wednesday 3 October 12
AdvantagesWeb standards
HTML, SVG, CSS
All (modern) browsers & platforms
Well-known web technologiesjavascript, json, CSV, ...
Extensive APIhttps://github.com/mbostock/d3/wiki/API-Reference
IE9, Chrome, FF, Safari, ... mobile, desktop
Wednesday 3 October 12
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
Scalable Vector Graphics
<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>
Definition of graphics in XML
Wednesday 3 October 12
D3 - Three little circles
http://mbostock.github.com/d3/tutorial/circle.htmlWednesday 3 October 12
Look out
Quite a learning curve
Wednesday 3 October 12
Tools you need
• Text Editor or IDE
• Browser(s)
• Developer Tools - embedded in Chrome (or firebug in FF)
Wednesday 3 October 12
Tool(s) that could be useful
SVG Editor (e.g. InkScape)
http://colorbrewer2.org/
Wednesday 3 October 12
Further Readinghttp://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
• 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
Your Mission.
Wednesday 3 October 12
Thank you.
Now up to you.
Wednesday 3 October 12