PPAAS(Pet Project As A Startup) using Data visualisation as an interface

At Rupy 2013

Transcript

5. EXTREMIST PROGRAMMER
11. @makoto_inoue • London d3.js meetup
12. @makoto_inoue • London d3.js meetup • benkyoplayer.com
17. @makoto_inoue • London d3.js meetup • benkyoplayer.com • stepup.io
21. http://www.youtube.com/watch?v=tnRwaxxTtjI
22. PPAAS (Pet Project As A Startup) @makoto_inoue
23. Data Visualisation as an Interface @makoto_inoue
24. PPAAS (Pet Project As A Startup) @makoto_inoue
25. PPAAS (Pet Project As A Startup) @makoto_inoue Data visualisation as an interface using
26. 2013 2012 PPAAS
28. Minute by Minute Event Data
29. Minute by Minute Event Data Where is Data?
30. Premier League -13 May 2012
31. Posessed!! (Visualisation of the ball possession) http://makoto.github.com/possessed/
32. http://makoto.github.com/possessed/ Possessed!!
33. Data Driven Player(DDP) http://makoto.github.com/possessed/ I Like it!!
34. Tri-Hackathon 2012 Sep 2012 Oct 2012 Nov
35. DDP ♥ Show Biz
36. DDP ♥ Show Biz 82
37. ♥ OSMN.pl http://osmn.herokuapp.com/
38. ♥ OSMN.pl http://osmn.herokuapp.com/
39. DDP ♥ Online Study Transcripts are embedded in videos
40. Transcripts are embedded in videos ♥ Benkyo Player
41. ♥ Benkyo Player http://bit.ly/benkyo_player Cool Szép Nice
42. http://felid.tumblr.com/ Jump!!
43. http://felid.tumblr.com/
45. Social Good
46. Mobile Game
47. Mobile Phone
48. Sensor
49. YCombinator 2012: 2 women / over 80 teams BGV 2013: 9 women / 10 teams Diversified
50. October 28th 2013
51. Warning!! http://www.cuteanimalsonline.com/img/cat-trap-jackpot848334.jpeg
52. Data Visualisation tools
53. Where did I use d3.js?
54. What is d3.js ?
55. What is d3.js ?
56. What is d3.js ? D3 is not a new graphical representation.
57. What is d3.js ? D3.js is a JavaScript library for manipulating documents based on data.
58. Example
59. 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
60. 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
61. 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
62. 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
63. <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
64. 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
65. 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
66. 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
67. 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/
68. 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
69. 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
70. 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)})
71. 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
72. 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
74. d3's purpose is to make shiny graphs with data.
75. d3's purpose is to make shiny graphs with data. Really?
80. var controller = new Leap.Controller(); controller.on( 'frame' , function( frame ) { // Frame code goes here }); Instantiation
81. for( var i=0; i < frame.hands.length; i++ ){ var hand = frame.hands[i]; var handPos = hand.palmPosition ; for( var j=0; j < hand.fingers.length;j++){ var finger = hand.fingers[j]; // Do something } } Getting Positions
82. var gesture = frame.gestures[0]; var type = gesture.type; switch( type ){ case "circle": break; case "swipe": break; case "screenTap": break; case "keyTap": break; } Gestures
84. Putting them together
85. http://youtu.be/at4mwhpVt2w
86. Lessons learnt • No comic sans on editor • Hacking cool stuff for good could get you funded • Every input needs visualisation
87. More Info • http://d3js.org/ • http://bl.ocks.org/mbostock • http://benkyoplayer.com/ courses/the-joy-of-d3-js • http://js.leapmotion.com
88. Thanks @makoto_inoue http://benkyoplayer.com http://stepup.io