Learning d3
3 likes1,831 views
The document is an introduction to the D3.js JavaScript library for creating interactive data visualizations on the web. It explains that D3 uses common web standards like HTML, CSS, JavaScript and SVG to bind external data to document objects to generate visualizations. It provides examples of how D3 works by joining data to elements using selections, setting attributes from data values, and generating scales, axes and transitions. The document suggests learning D3 incrementally by starting with basic concepts like data joins and attribute binding before moving on to more advanced features like layouts, maps and interactivity.
![// JavaScript arrays!
var dataset = [ 5, 10, 20, 15, 18 ];](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-10-320.jpg)
![// Data joins!
var dataset = [ 5, 10, 20, 15, 18 ];
d3.select(“svg”).selectAll(“circle”)
.data(dataset)
.enter()
.append(“circle”);](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-11-320.jpg)
![// Data joins!
var dataset = [ 5, 10, 20, 15, 18 ];
d3.select(“svg”).selectAll(“circle”)
.data(dataset)
.enter()
.append(“circle”);](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-12-320.jpg)
![// Data joins!
var dataset = [ 5, 10, 20, 15, 18 ];
d3.select(“svg”).selectAll(“circle”)
.data(dataset)
.enter()
.append(“circle”);
?
(empty selection)](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-13-320.jpg)
![// 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!](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-14-320.jpg)
![// Data joins!
var dataset = [ 5 10, 20 15 18 ];
5, 10 20, 15,
d3.select(“svg”).selectAll(“circle”)
.data(dataset)
.enter()
.append(“circle”);](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-15-320.jpg)
![// Data joins!
var dataset = [ 5, 10, 20, 15, 18 ];
d3.select(“svg”).selectAll(“circle”)
.data(dataset)
.enter()
.append(“circle”);
5 10 20 15 18](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-16-320.jpg)
![// Scale values
var scale = d3.scale.linear()
.domain([200, 1000])
.range([0, 500]);
scale(600); // Returns 250
600
200 1000
250
0 500](https://image.slidesharecdn.com/learningd3-130306184626-phpapp02/85/Learning-d3-22-320.jpg)
Learning d3
- 1. 6 10 45 20 Learning D3 What is d3.js all about? And how do I get started?
- 2. 20 Scott Murray Assistant Professor, Design University of San Francisco 45 10 6
- 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 Hypertext Markup Language CSS Cascading Style Sheets JS JavaScript SVG Scalable Vector Graphics DOM The Document Object Model all of the above == web standards
- 8. HTML Hypertext Markup Language CSS Cascading Style Sheets JS JavaScript SVG Scalable Vector Graphics DOM 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 values 0 circles 5 10 Room for 15 18 20 - = 5 new circles!
- 15. // Data joins! var dataset = [ 5 10, 20 15 18 ]; 5, 10 20, 15, d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”);
- 16. // Data joins! var dataset = [ 5, 10, 20, 15, 18 ]; d3.select(“svg”).selectAll(“circle”) .data(dataset) .enter() .append(“circle”); 5 10 20 15 18
- 17. 5 10 20 15 18
- 18. // Setting attributes from data! 5 10 20 15 18
- 19. d3.selectAll(“circle”) .attr(“r”, function(d) { return d; }); 5 10 20 15 18
- 20. // Binding data to elements // 1. Lets you reference values later // 2. Prevents need to “redraw” elements 5 10 20 15 18
- 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 600 200 1000 250 0 500
- 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. An Introduction to Designing With D3 @alignedleft Thanks! alignedleft.com Interactive Data Questions? Visualization for the Web Scott Murray