Learning d3

1,658 views
1,542 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,658
On SlideShare
0
From Embeds
0
Number of Embeds
225
Actions
Shares
0
Downloads
72
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Learning d3

  1. 1. 6 10 4520 Learning D3 What is d3.js all about? And how do I get started?
  2. 2. 20 Scott Murray Assistant Professor, Design University of San Francisco45 10 6
  3. 3. What is d3.js?
  4. 4. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>D3 Page Template</title> <script type="text/javascript" src="d3.v3.js"></script></head><body> <script type="text/javascript"> // Your beautiful D3 code // can go here </script></body></html>
  5. 5. HTML Hypertext Markup LanguageCSS Cascading Style SheetsJS JavaScriptSVG Scalable Vector GraphicsDOM The Document Object Model all of the above == web standards
  6. 6. HTML Hypertext Markup LanguageCSS Cascading Style SheetsJS JavaScriptSVG Scalable Vector GraphicsDOM The Document Object Model Learning D3 is a process of “learning the web”
  7. 7. What does data look like on the web?
  8. 8. // JavaScript arrays!var dataset = [ 5, 10, 20, 15, 18 ];
  9. 9. // Data joins!var dataset = [ 5, 10, 20, 15, 18 ];d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);
  10. 10. // Data joins!var dataset = [ 5, 10, 20, 15, 18 ];d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);
  11. 11. // Data joins!var dataset = [ 5, 10, 20, 15, 18 ];d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); ? (empty selection)
  12. 12. // Data joins!var dataset = [ 5, 10, 20, 15, 18 ];d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 5 values 0 circles 5 10 Room for 15 18 20 - = 5 new circles!
  13. 13. // Data joins!var dataset = [ 5 10, 20 15 18 ]; 5, 10 20, 15,d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);
  14. 14. // Data joins!var dataset = [ 5, 10, 20, 15, 18 ];d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 5 10 20 15 18
  15. 15. 5 10 20 15 18
  16. 16. // Setting attributes from data! 5 10 20 15 18
  17. 17. d3.selectAll(“circle”) .attr(“r”, function(d) { return d; }); 5 10 20 15 18
  18. 18. // Binding data to elements// 1. Lets you reference values later// 2. Prevents need to “redraw” elements 5 10 20 15 18
  19. 19. What else can D3 do for me?
  20. 20. // Scale valuesvar scale = d3.scale.linear() .domain([200, 1000]) .range([0, 500]);scale(600); // Returns 250 600200 1000 250 0 500
  21. 21. // Generate axesvar axis = d3.svg.axis() .scale(scale);svg.append("g") .call(axis);200 300 400 500 600 700 800 900 1000
  22. 22. // Transitions and motion
  23. 23. // Interactivity Tooltipz roxxx!
  24. 24. // Layouts
  25. 25. // Geomapping and projections
  26. 26. One step at a time
  27. 27. An Introduction to Designing With D3@alignedleft Thanks! alignedleft.com Interactive Data Questions? Visualization for the Web Scott Murray

×