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
  2. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

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

    THIS AREA. HI THERE, I’M VISUALIZATIONS CHARTS
  4. @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
  5. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M ©®™ Adobe (please don’t sue me)
  6. @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
  7. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M processing.org processingjs.org PROCESSING
  8. @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);
  9. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M raphaeljs.com RAPHAËL
  10. @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!
  11. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

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

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

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

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

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

    THIS AREA. HI THERE, I’M d3 supplies the annoying-to-write parts CONVENIENCE
  17. @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
  18. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M colors dimensions positions … every property. INTERPOLATE
  19. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

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

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

    THIS AREA. HI THERE, I’M 12 40 NICE
  22. @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);
  23. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M RGB HSL HCL L*a*b* COLORSPACE MATH
  24. @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);
  25. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M NOT BAD
  26. @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
  27. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

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

    THIS AREA. HI THERE, I’M for (i=0; i<data.length, i++) { // create some elements // add them to the DOM
  29. @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);
  30. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

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

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

    THIS AREA. HI THERE, I’M data ENTER UPDATE EXIT DOM
  33. @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
  34. @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
  35. @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; });
  36. @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();
  37. @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
  38. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

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

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

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

    THIS AREA. HI THERE, I’M <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Bu <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/ <svg version="1.1" id="svg6584" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creat rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <g id="layer1" transform="translate(0,-952.362)"> <path id="path5421" fill="#888888" d="M62.5,973.195l-2.084,4.167l8.334,3.125v9.3 c0-1.025-1.058-2.083-2.083-2.083H31.25c-2.083,0-2.083,2.083-2.083,2.083v2.083 c-1.249-0.3-2.566-0.521-3.906-0.521c-9.205,0-16.667,7.462-16.667,16.667s7.462 c9.205,0,16.667-7.461,16.667-16.666c0,0,4.167,0,6.25,0c2.084,0,2.084-2.084,2. c2.833-2.163,5.887-3.498,8.984-4.167v2.604v1.693c-7.185,1.853-12.5,8.252-12.5 c9.205,0,16.668-7.462,16.668-16.667c0-7.617-5.131-13.896-12.109-15.885l-4.559 L62.5,973.195z M39.583,994.029h18.75c-4.168,2.083-10.417,12.5-10.417,16.667l- L39.583,994.029z M27.083,1004.445c5.753,0,10.417,4.664,10.417,10.417s-4.664,1 S21.331,1004.445,27.083,1004.445L27.083,1004.445z M72.916,1004.445c5.754,0,10 s-4.664,10.416-10.418,10.416c-5.752,0-10.416-4.663-10.416-10.416S67.164,1004. </g> </svg>
  42. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M HTML <IMG SRC=“MY.SVG”> CSS URL(../IMG/MY.SVG)
  43. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <body> <h1>My Awesome SVG</h1> <svg>...</svg> <p>Wasn’t that awesome?</p> </body>
  44. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <svg> <circle r=“10” class=“special”> </svg> .special { fill: red; stroke: black; stroke-width: 2px; } HTML CSS
  45. @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; }
  46. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M <svg> <circle r=“10” class=“special”> </svg> document.getElementByClassName(“special”); HTML JAVASCRIPT
  47. @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"]');
  48. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M … jQuery SVG DOM != HTML DOM
  49. @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);
  50. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M http://keith-wood.name/svg.html JQUERY SVG
  51. @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
  52. @idangazit PEOPLE IN THE BACK HAVE A HARD TIME SEEING

    THIS AREA. HI THERE, I’M s/python/javascript/ IT’S JUST PYTHON!
  53. @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
  54. @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
  55. @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
  56. @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
  57. @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