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

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

1eecfce54b4f902784d046328935efd4?s=47 Makoto Inoue
October 12, 2013
85

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

At Rupy 2013

1eecfce54b4f902784d046328935efd4?s=128

Makoto Inoue

October 12, 2013
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. EXTREMIST PROGRAMMER

  6. None
  7. None
  8. None
  9. None
  10. None
  11. @makoto_inoue • London d3.js meetup

  12. @makoto_inoue • London d3.js meetup • benkyoplayer.com

  13. None
  14. None
  15. None
  16. None
  17. @makoto_inoue • London d3.js meetup • benkyoplayer.com • stepup.io

  18. None
  19. None
  20. None
  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

  27. None
  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/

  44. None
  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
  73. None
  74. d3's purpose is to make shiny graphs with data.

  75. d3's purpose is to make shiny graphs with data. Really?

  76. None
  77. None
  78. None
  79. None
  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
  83. None
  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