Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning D3

Scott Murray
February 21, 2013

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.

Scott Murray

February 21, 2013
Tweet

More Decks by Scott Murray

Other Decks in Programming

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. 18
    15
    20
    10
    5

    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