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.

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?
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