Learning D3

Learning D3

A very brief introduction to d3.js. What D3 is and what it can do for you, plus a handful of thoughts on the learning process.

A464352136da1292242d810c001ed275?s=128

Scott Murray

February 21, 2013
Tweet

Transcript

  1. 10 20 45 6 Learning D3 What is d3.js all

    about? And how do I get started?
  2. 10 20 45 6 Scott Murray Assistant Professor, Design University

    of San Francisco
  3. What is d3.js?

  4. None
  5. None
  6. <!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>
  7. HTML CSS JS SVG DOM Hypertext Markup Language Cascading Style

    Sheets JavaScript Scalable Vector Graphics The Document Object Model all of the above == web standards
  8. HTML CSS JS SVG DOM Hypertext Markup Language Cascading Style

    Sheets JavaScript Scalable Vector Graphics The Document Object Model Learning D3 is a process of “learning the web”
  9. What does data look like on the web?

  10. // JavaScript arrays! var dataset = [ 5, 10, 20,

    15, 18 ];
  11. // Data joins! var dataset = [ 5, 10, 20,

    15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);
  12. // Data joins! var dataset = [ 5, 10, 20,

    15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);
  13. // Data joins! var dataset = [ 5, 10, 20,

    15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); ? (empty selection)
  14. // Data joins! var dataset = [ 5, 10, 20,

    15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); = 5 10 15 20 18 - 5 values 0 circles Room for 5 new circles!
  15. // Data joins! var dataset = [ 5, 10, 20,

    15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 18 15 20 10 5
  16. // Data joins! var dataset = [ 5, 10, 20,

    15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 18 15 20 10 5 18 15 20 10 5
  17. 18 15 20 10 5

  18. 18 15 20 10 5 // Setting attributes from data!

  19. 18 15 20 10 5 d3.selectAll(“circle”) .attr(“r”, function(d) { return

    d; });
  20. 18 15 20 10 5 // Binding data to elements

    // 1. Lets you reference values later // 2. Prevents need to “redraw” elements
  21. What else can D3 do for me?

  22. // Scale values var scale = d3.scale.linear() .domain([200, 1000]) .range([0,

    500]); scale(600); // Returns 250 200 1000 0 500 600 250
  23. // Generate axes var axis = d3.svg.axis() .scale(scale); svg.append("g") .call(axis);

    200 300 400 500 600 700 800 900 1000
  24. // Transitions and motion

  25. // Interactivity Tooltipz roxxx!

  26. // Layouts

  27. // Geomapping and projections

  28. One step at a time

  29. Thanks! Questions? @alignedleft alignedleft.com An Introduction to Designing With D3

    Scott Murray Interactive Data Visualization for the Web