Pro Yearly is on sale from $80 to $50! »

Extreme Data Visualisation with d3.js

Extreme Data Visualisation with d3.js

1eecfce54b4f902784d046328935efd4?s=128

Makoto Inoue

April 14, 2013
Tweet

Transcript

  1. Extreme Data Visualisation with d3.js @makoto_inoue Data Visualisation as an

    Interface
  2. @makoto_inoue • Extremist Programmer

  3. None
  4. None
  5. None
  6. @makoto_inoue • benkyoplayer.com • Extremist Programmer

  7. @makoto_inoue • benkyoplayer.com • London d3.js meetup • Extremist Programmer

  8. Topics • From BaconTo Benkyo • What is (Extreme) Data

    Visualisation? • Extreme Data Visualisation with d3.js
  9. The Danger Level of this talk • Cat • Comic

    Sans • Nudity
  10. 2013 2012 From Bacon to Benkyo

  11. None
  12. None
  13. Analysing Olympic Medal Rivalry @makoto_inoue @mmxiihack Best Hidden talks ==

    Lightning talks
  14. Analysing Olympic Medal Rivalry @makoto_inoue @mmxiihack

  15. Question Are you looking forward to Olympics?

  16. Meh...

  17. Do you want to hack ? YES

  18. Wait, can you use the word "Olympics"?

  19. Branding Policy Expressions likely to be considered a breach of

    the rules would include any two of the following list: "Games, Two Thousand and Twelve, 2012, Twenty-Twelve". http://bit.ly/HRyNGS
  20. Branding Policy Using one of those words with London, medals,

    sponsors, summer, gold, silver or bronze is another likely breach.
  21. BAKERS BANNED FROM ICING CAKES WITH OLYMPIC LOGO BECAUSE OF

    COPY RIGHTS!! - Daily Mail - http://www.dailymail.co.uk/news/article-2037418/London-2012-Olympics-Copyright-laws-ban-bakers-icing-cakes-logo.html
  22. Solution London 2012 ɹ

  23. Solution London 2012 Londinium MMXII http://www.guardian.co.uk/commentisfree/2012/apr/17/london-2012-londinium-mmxii-olympics

  24. MMXII Hackathon (28th~29th July)

  25. MMXII Hackathon (28th~29th July)

  26. A Result =The live image wall

  27. AS THE GAME GOT UNDERWAY, DEVELOPERS TOOK PART IN THE

    FIRST OLYMPIC HACKDAY - Guardian Data Blog http://www.guardian.co.uk/commentisfree/2012/aug/03/london-2012-olympics-open-data
  28. SO, IS THE FIRST OPEN DATA OLYMPICS? NOT THIS TIME

    - Guardian Data Blog
  29. SO, IS THE FIRST OPEN DATA OLYMPICS? NOT THIS TIME

    - Guardian Data Blog Where is Data?
  30. I am the Extremist Programmer!!

  31. Hack for Data

  32. Minute by Minute Event Data

  33. Minute by Minute Event Data Where is Data?

  34. I am the Extremist Programmer!!

  35. Premier League -13 May 2012

  36. Posessed!! (Visualisation of the ball possession) http://makoto.github.com/possessed/

  37. FLIP!!

  38. Posessed!! (Visualisation of the ball possession)

  39. http://makoto.github.com/possessed/ Possessed!!

  40. Data Driven Player(DDP) http://makoto.github.com/possessed/ I Like it!!

  41. I am the Extremist Programmer!!

  42. Tri-Hackathon 2012 Sep 2012 Oct 2012 Nov

  43. DDP ♥ Show Biz

  44. DDP ♥ Show Biz 82

  45. ♥ OSMN.pl http://osmn.herokuapp.com/

  46. ♥ OSMN.pl http://osmn.herokuapp.com/

  47. DDP ♥ Online Study Transcripts are embedded in videos

  48. Transcripts are embedded in videos ♥ Benkyo Player

  49. ♥ Benkyo Player http://bit.ly/benkyo_player

  50. What did we learn so far?

  51. If there is no data...

  52. None
  53. What is (Extreme) Data Visualisation?

  54. I don’t know, but.....

  55. I am the Extremist Programmer!!

  56. None
  57. Bambinos

  58. Bambinos

  59. Something not right

  60. Something not right

  61. My Teacher says... Draw Shape Not Object

  62. Traditional Data Visualisation = Objects(barchart/piechart)

  63. Extreme Data Visualisation = Many different shapes

  64. Extreme Data Visualisation = Many different shapes

  65. Extreme Data Visualisation = Many different shapes

  66. Extreme Data Visualisation = Many different shapes

  67. Isn’t this just a table? <table> <tr> <th>Time</th><th>Team</th><th>Player</th> </tr> <tr>

    <td>90:00</td><td class="none"></td><td class="none"></td> <td>90:30</td><td class="man_city"></td><td class="barotelli"></td> <td>91:00</td><td class="none"></td><td class="none"></td> </tr> </table> Yes
  68. What about this? <ul> <li style="width:100px;" class="none">&nbsp;</li> <li style="left:30px; width:20px;"

    class="appeared">&nbsp;</li> <li style="left:80px; width:10px;" class="appeared">&nbsp;</li> </ul> It’s a list
  69. What about this? <g transform="translate(50,1)" class="group"> <rect x="8" y="69" rx="5"

    width="3" height="500" fill="#EEC211"></rect> <rect x="385" y="331" width="18" height="18" style="fill: #e377c2;"> </rect> </g> It’s svg
  70. Different Medium Different Character

  71. Wrong observation and transformation Lack of Skills

  72. <ul> <li style="width:100px;" class="none">&nbsp;</li> <li style="left:30px; width:20px;" class="appeared">&nbsp;</li> <li style="left:80px;

    width:10px;" class="appeared">&nbsp;</li> </ul> Right Scale
  73. <g transform="translate(50,1)" class="group"> <rect x="8" y="69" rx="5" width="3" height="500" fill="#EEC211"></rect>

    <rect x="385" y="331" width="18" height="18" style="fill: #e377c2;"> </rect> </g> Appropriate Colour
  74. What did we learn so far? • Shapes, not Objects

    • Different medium => Character • Wrong Transformation => Lack of Skill
  75. Extreme Data Visualisation with d3.js

  76. What is d3.js ?

  77. What is d3.js ?

  78. What is d3.js ? D3 is not a new graphical

    representation.
  79. What is d3.js ? D3.js is a JavaScript library for

    manipulating documents based on data.
  80. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Transforming Data with d3.js
  81. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Selector
  82. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Dynamic Property
  83. <ul class="bin"> <li class="appeared" style="width: 24px; left: 240px; background-color: rgb(44,

    160, 44);">ɹ </li> <li class="appeared" style="width: 160px; left: 640px; background-color: rgb(31, 119, 180);">ɹ </li> </ul> Result
  84. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Binding Data
  85. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Binding Data
  86. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Scaling Size
  87. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Scaling Size http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
  88. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Scaling Color
  89. var data = [{start:30, duration:3},{start:80, duration:20}] var ul = d3.select('ul.bin')

    var bar = ul.selectAll("li") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('li') .attr('class', 'appeared') .style({ width:function(d){return x(d.duration) + 'px'}, left:function(d){return x(d.start) + 'px'}, 'background-color': function(d, i){return color(i)} }) .text("ɹ") Dynamic Property
  90. SVG? var data = [{start:30, duration:3}, {start:80, duration:20}] var svg

    = d3.select('body').append('svg') var bar = svg.selectAll("rect") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('rect') .attr('class', 'appeared') .attr({ width:function(d){return x(d.duration) + 'px'}, x:function(d){return x(d.start) + 'px'}, height:'10px', }) .style('fill',function(d, i){return color(i)})
  91. var data = [{start:30, duration:3}, {start:80, duration:20}] var svg =

    d3.select('body').append('svg') var bar = svg.selectAll("rect") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('rect') .attr('class', 'appeared') .attr({ width:function(d){return x(d.duration) + 'px'}, x:function(d){return x(d.start) + 'px'}, height:'10px', }) .style('fill',function(d, i){return color(i)}) Difference
  92. var data = [{start:30, duration:3}, {start:80, duration:20}] var svg =

    d3.select('body').append('svg') var bar = svg.selectAll("rect") .data(data); var x = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var color = d3.scale.category10().domain([1,2]) bar.enter().append('rect') .attr('class', 'appeared') .attr({ width:function(d){return x(d.duration) + 'px'}, x:function(d){return x(d.start) + 'px'}, height:'10px', }) .style('fill',function(d, i){return color(i)}) Same
  93. http://bl.ocks.org/mbostock/1933560

  94. var histogram = d3.layout.histogram(); histogram(data);

  95. None
  96. None
  97. What did we learn? • Data, Go get 'em, Tiger

    • Shapes, not Objects • D3.js for Data Transformation
  98. More Info • http://d3js.org/ • http://bl.ocks.org/mbostock • http://groups.google.com/group/d3-js • http://enjalot.github.com/dot-enter

  99. Thanks @makoto_inoue http://lanyrd.com/2013/london-d3js-4 http://benkyoplayer.com/courses/3