Extreme Data Visualisation with d3.js

Transcript

1. Extreme Data Visualisation with d3.js @makoto_inoue Data Visualisation as an Interface
2. @makoto_inoue • Extremist Programmer
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
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...
53. What is (Extreme) Data Visualisation?
54. I don’t know, but.....
55. I am the Extremist Programmer!!
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);
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