0
D3.js              Data-Driven Documents              http://d3js.org/             Joris Klerkx - @jkofmskWednesday 3 Octo...
What?                            Bind arbitrary data do a                         Document Object Model (DOM)             ...
From data..                                                                     to interactive                            ...
Advantages   Web standards           HTML, SVG, CSS    Well-known web technologies             javascript, json, CSV, ... ...
Who knows?                 • HTML?                 • CSS?                         • http://www.w3schools.com/css/         ...
Scalable Vector Graphics        Definition of graphics in XML        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">...
D3 - Three little circles http://mbostock.github.com/d3/tutorial/circle.htmlWednesday 3 October 12
Look out                         Quite a learning curveWednesday 3 October 12
Tools you need                         • Text Editor or IDE                         • Browser(s)                         •...
Tool(s) that could be useful                         SVG Editor (e.g. InkScape)                         http://colorbrewer...
Further Reading                                    http://mbostock.github.com/d3                         http://www.jerome...
Your Mission.                         • Play with D3.js                         • Look at tutorials & examples            ...
Thank you.                         Now up to you.Wednesday 3 October 12
Upcoming SlideShare
Loading in...5
×

D3.js capita selecta

894

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "D3.js capita selecta"

  1. 1. D3.js Data-Driven Documents http://d3js.org/ Joris Klerkx - @jkofmskWednesday 3 October 12
  2. 2. What? Bind arbitrary data do a Document Object Model (DOM) Apply data-driven transformations to the DOMWednesday 3 October 12
  3. 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. 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, desktopWednesday 3 October 12
  5. 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. 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. 7. D3 - Three little circles http://mbostock.github.com/d3/tutorial/circle.htmlWednesday 3 October 12
  8. 8. Look out Quite a learning curveWednesday 3 October 12
  9. 9. Tools you need • Text Editor or IDE • Browser(s) • Developer Tools - embedded in Chrome (or firebug in FF)Wednesday 3 October 12
  10. 10. Tool(s) that could be useful SVG Editor (e.g. InkScape) http://colorbrewer2.org/Wednesday 3 October 12
  11. 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. 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-TellWednesday 3 October 12
  13. 13. Thank you. Now up to you.Wednesday 3 October 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×