Your SlideShare is downloading. ×
D3.js capita selecta
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

D3.js capita selecta

810
views

Published on

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. D3.js Data-Driven Documents http://d3js.org/ Joris Klerkx - @jkofmskWednesday 3 October 12
  • 2. What? Bind arbitrary data do a Document Object Model (DOM) Apply data-driven transformations to the DOMWednesday 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, desktopWednesday 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.htmlWednesday 3 October 12
  • 8. Look out Quite a learning curveWednesday 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-TellWednesday 3 October 12
  • 13. Thank you. Now up to you.Wednesday 3 October 12