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

Data Visualization with D3 and Web Standards

Idan Gazit
November 20, 2012

Data Visualization with D3 and Web Standards

Slides from my talk at HTML5Fest 2012. Video (hebrew): http://www.youtube.com/watch?v=LL4_s58UdR8

Idan Gazit

November 20, 2012
Tweet

More Decks by Idan Gazit

Other Decks in Design

Transcript

  1. @idangazit
    HI THERE, I’M
    DATA VISUALIZATION WITH D3.JS & WEB STANDARDS • HTML5FEST 2012
    DATA
    VISUALIZATION
    with d3.js and web standards

    View Slide

  2. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    djangoproject.com

    View Slide

  3. @idangazit
    HI THERE, I’M
    HTTP://FLIC.KR/P/7EPN1B

    View Slide

  4. @idangazit
    HI THERE, I’M
    HTTP://FLIC.KR/P/967DVR

    View Slide

  5. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    VISUALIZATIONS
    CHARTS

    View Slide

  6. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    0
    25
    50
    75
    100
    2007 2008 2009 2010
    Apples Bananas

    View Slide

  7. @idangazit
    HI THERE, I’M
    HTTP://NYTI.MS/WR1DHZ

    View Slide

  8. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  9. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    ©®™ Adobe
    (please don’t sue me)

    View Slide

  10. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    still widely used
    actionscript
    works in old browsers
    doesn’t work on mobile
    resource-intensive
    FLASH

    View Slide

  11. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    processing.org
    processingjs.org
    PROCESSING

    View Slide

  12. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // set the canvas size
    size(300, 300);
    // top, left, width height
    rect(20, 20, 100, 100);
    // set colors
    stroke(255, 0, 0); // red
    fill(0, 0, 255); // blue
    // top, left, width height
    rect(100, 100, 100, 100);

    View Slide

  13. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  14. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    raphaeljs.com
    RAPHAËL

    View Slide

  15. @idangazit
    HI THERE, I’M
    HTTP://FLIC.KR/P/ASMPYK

    View Slide

  16. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    now tell me about the new hotness
    COOL STORY,
    BRO!

    View Slide

  17. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    d3js.org
    D3
    DATA-DRIVEN DOCUMENTS

    View Slide

  18. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    VISUALIZATION
    TOOLKIT
    a true

    View Slide

  19. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    DATA
    onto
    MEANINGFUL
    VISUALS
    map

    View Slide

  20. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    DATA
    onto
    THE
    DOM
    map

    View Slide

  21. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    VISUALIZATIONS
    DRAWING

    View Slide

  22. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    d3 supplies the annoying-to-write parts
    CONVENIENCE

    View Slide

  23. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    sometimes you don’t control the data
    JSON
    CSV, TSV
    LOAD &
    MANIPULATE

    View Slide

  24. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    colors
    dimensions
    positions

    every property.
    INTERPOLATE

    View Slide

  25. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    linear
    logarithmic
    quantile
    ordinal
    time
    nice
    SCALES

    View Slide

  26. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    12.973 39.144
    UGLY

    View Slide

  27. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    12 40
    NICE

    View Slide

  28. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // data = [Date, Date, …]
    // get the natural range of the data
    timeExtent = d3.extent(data);
    // make a scale
    x = d3.time.scale()
    .rangeRound([0, width])
    .domain(timeExtent);
    // X position on timeline for a date
    left = x(someDate);

    View Slide

  29. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    RGB
    HSL
    HCL
    L*a*b*
    COLORSPACE
    MATH

    View Slide

  30. HSV V
    HSL L
    CIELAB L*
    Images courtesy Wikipedia & Luc Viatour / www.Lucnix.be

    View Slide

  31. http://en.wikipedia.org/wiki/HSL_color_space
    HSL HSV

    View Slide

  32. View Slide

  33. View Slide

  34. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // data = [Number, Number, …]
    // get the natural range of the data
    natural = d3.extent(data);
    // make a scale
    colorscale = d3.scale.linear()
    .domain(natural)
    .interpolate(d3.interpolateLab)
    .range(startColor, endColor);
    // color for a number
    color = colorScale(42);

    View Slide

  35. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    NOT BAD

    View Slide

  36. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    marrying data to the DOM
    http://bost.ocks.org/mike/join/
    DATA JOINS

    View Slide

  37. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    for (i=0; i// create some elements
    // add them to the DOM

    View Slide

  38. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    for (i=0; i// create some elements
    // add them to the DOM

    View Slide

  39. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // svg is the DOM root of our
    // d3 visualization
    svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("r", 2.5);

    View Slide

  40. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    there are no circles to select!?
    BUT

    View Slide

  41. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    D3 MAKES THE DOM LIKE THE DATA

    View Slide

  42. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    data
    ENTER
    UPDATE
    EXIT
    DOM

    View Slide

  43. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // data JOIN circle nodes
    circles = svg.selectAll("circle").data(data)
    // 1. UPDATE
    // 2. ENTER
    // 3. ENTER+UPDATE
    // 4. EXIT

    View Slide

  44. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // data JOIN circle nodes
    circles = svg.selectAll("circle").data(data)
    // 1. UPDATE
    circles.attr("class", "update");
    // 2. ENTER
    circles.enter().append("circle")
    .attr("class", "enter")
    .attr("r", 0); // starting radius

    View Slide

  45. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // data JOIN circle nodes
    circles = svg.selectAll("circle").data(data)
    // 3. ENTER + UPDATE
    // works on just-added nodes too
    // vary the radius according to data
    // d is the datum for each join.
    circles.attr(“r”, function(d) {
    return d.radius;
    });

    View Slide

  46. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    // data JOIN circle nodes
    circles = svg.selectAll("circle").data(data)
    // 4. EXIT
    // remove nodes that aren’t in data anymore
    circles.exit().remove();

    View Slide

  47. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    fade-in
    ANIMATION?
    ENTER
    transition
    UPDATE
    fade-out
    EXIT

    View Slide

  48. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    http://bl.ocks.org/3808218
    EXAMPLES

    View Slide

  49. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    Scalable Vector Graphics
    SVG

    View Slide

  50. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    IE9+
    PAGEWEIGHT
    HIGH-DPI (RETINA)

    View Slide

  51. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  52. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    HTML

    CSS
    URL(../IMG/MY.SVG)

    View Slide

  53. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    My Awesome SVG
    ...
    Wasn’t that awesome?

    View Slide

  54. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M



    .special {
    fill: red;
    stroke: black;
    stroke-width: 2px;
    }
    HTML
    CSS

    View Slide

  55. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    .special {
    fill: red;
    stroke: black;
    stroke-width: 2px;
    }
    CSS
    .special:hover {
    fill: blue;
    stroke: white;
    stroke-width: 10px;
    }

    View Slide

  56. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M



    document.getElementByClassName(“special”);
    HTML
    JAVASCRIPT

    View Slide

  57. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    JQUERY
    $(".station[data-id=216]");
    D3
    d3.selectAll('.station[data-id="216"]');

    View Slide

  58. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    … jQuery
    SVG DOM != HTML DOM

    View Slide

  59. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    $(".special").addClass("foo");
    $(".special").attr("class", "foo");
    d3.selectAll('.special').attr("class", "foo");
    d3.selectAll('.special').classed("foo", true);

    View Slide

  60. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    http://keith-wood.name/svg.html
    JQUERY SVG

    View Slide

  61. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    events
    styling
    properties
    appending/removing from DOM
    mostly, it Just Works™
    RELAX

    View Slide

  62. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    s/python/javascript/
    IT’S JUST PYTHON!

    View Slide

  63. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  64. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  65. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    github.com/idan/telostats
    TELOSTATS.COM
    YUVAL ADAM
    @yuvadm
    IDAN GAZIT
    @idangazit

    View Slide

  66. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  67. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M

    View Slide

  68. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    integrating D3-rendered layers into a map
    mapbox.js
    GEO

    View Slide

  69. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    most visualizations still assume a
    relatively fixed canvas
    RESPONSIVE

    View Slide

  70. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    it’s so easy to build neat stuff...
    EXCITING

    View Slide

  71. @idangazit
    PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
    gazit.me
    @idangazit
    github.com/idan
    GO MAKE SOMETHING!
    LONG
    SHORT
    CODE

    View Slide