Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learning d3

1,878 views

Published on

  • Be the first to comment

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

×