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.

Transcript

1. 10
   20
   45
   6
   Learning D3
   What is d3.js all about?
   And how do I get started?
   

   View Slide

2. 10
   20
   45
   6
   Scott Murray
   Assistant Professor, Design
   University of San Francisco
   

   View Slide

3. What is d3.js?
   

   View Slide

4. View Slide

5. View Slide

6. 
   
   
   
   D3 Page Template
   src="d3.v3.js">
   
   
   <br/>// Your beautiful D3 code<br/>// can go here<br/>
   
   
   

   View Slide

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
   

   View Slide

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”
   

   View Slide

9. What does data look like on the web?
   

   View Slide

10. // JavaScript arrays!
    var dataset = [ 5, 10, 20, 15, 18 ];
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. View Slide

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

    View Slide

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

    View Slide

20. 18
    15
    20
    10
    5
    // Binding data to elements
    // 1. Lets you reference values later
    // 2. Prevents need to “redraw” elements
    

    View Slide

21. What else can D3 do for me?
    

    View Slide

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

    View Slide

23. // Generate axes
    var axis = d3.svg.axis()
    .scale(scale);
    svg.append("g")
    .call(axis);
    200 300 400 500 600 700 800 900 1000
    

    View Slide

24. // Transitions and motion
    

    View Slide

25. // Interactivity
    Tooltipz
    roxxx!
    

    View Slide

26. // Layouts
    

    View Slide

27. // Geomapping and projections
    

    View Slide

28. One step at a time
    

    View Slide

29. Thanks!
    Questions?
    @alignedleft
    alignedleft.com
    An Introduction to Designing With D3
    Scott Murray
    Interactive Data
    Visualization
    for the Web
    

    View Slide