Your SlideShare is downloading. ×
0
D3.JS Mind blow by Antonaka @antulik
THEME FOR THE TALK
WAT?
HARLEM SHAKE
YOUTUBEall on youtube and its blocked
there is no wifi signal in this room anyway
No probs, use phone tethering
bug which reload the page
No probs, Firefox
1.5GB of RAM
MIND BLOW        minecraft - 2 levels in 4 hoursht:/w.lntierf.o/lg2lvl-n4hus tp/wwpaemncatcmbo/-eesi--or/
WORKSHOP BASED ON WORKSHOP BY MIKE             BOSTOCK           which is 3+ hours
2 HOURS IN 4 HOURS      D3JS
STATSNumbers
GITHUBRailsstars: 17 350forks: 4 860D3stars: 12 190forks: 1 995
GITHUB?
MY PERSONAL EXPERIENCE  Ruby & Rails  2 years  somewhat average or higher  (or maybe not)  D3  a bit over 1 year  Im a noob
HARDEST THINGS TO LEARN               before1. Assembler / C / Kernel compilation   / POSIX2. VBA3. Java            40. Ja...
HARDEST THINGS TO LEARN        and now       1. D3.js       2. the rest
AWESOMENESS
D3.JS IS HARDSeems like everybodywould agree with that
D3.JS IS GOING TO STAYBeautiful levels of abstractionsDoesnt limit youDoesnt force many conventionsGood documentationGood ...
D3.JS IS A TOOL  it does one thingand it does it very well
SO WHY SUCH REPUTATION     its not technology       but mind shift
MIND SHIFT?
OOPIts like learning OOPbut for visualisations
ITS JUST A TOOL      It gives all the power to the user       You still need to do all the jobSpeaking in French doesnt ma...
D3.JS IS ANNOYINGit takes 2 hours to write 10 lines
WITH ALL THAT POWER Tool is no longer limitation         but we are
HOW IVE STARTED     TopicRay    Sep 2011
TOPICRAYis multi-threaded chat system mind map + chat = topicray
TOPICRAY       hierarchical datavery very deep hierarchical data
VERSION 1Started with html
VERSION 4then moved to canvas and ocanvas
VERSION 9, 10, 11try to improve canvas implementation
VERSION 13, 14D3.JS enters the stage
VERSION 19, 20improvements on icicle graph
VERSION 21, 22  its radar time
VERSION 23 1 year old
MY SECOND PROJECT     StoryLine     Sep 2012
STORYLINE      Calendar visualisation              thinkCalendar + Google Maps = StoryLine
LETS GOLesson learnt, started with D3
SHOW OFF
FOUR WAYS TO SLICE OBAMA’S 2013 BUDGET              PROPOSAL             www.nytimes.com
OVER THE DECADES, HOW STATES HAVE             SHIFTED          www.nytimes.com
512 PATHS TO THE WHITE HOUSE       www.nytimes.com
D3 SHOW REELhttp://bl.ocks.org/1256572
THE WEALTH & HEALTH OF NATIONS   http://bost.ocks.org/mike/nations/
URBAN WATER EXPLORER   www.visualizing.org
NUTRIENT CONTENTShttp://exposedata.com/parallel/
HOW OBAMA WON RE-ELECTION      www.nytimes.com
COFFEE FLAVOUR WHEELhttp://www.jasondavies.com/coffee-wheel/
LES MISÉRABLES CO-OCCURRENCE http://bost.ocks.org/mike/miserables/
WORDCLOUDhttp://www.jasondavies.com/wordcloud/
FORCE COLLAPSABLE mbostock.github.com
TREEMAPhttp://bl.ocks.org/4063582
FLARE IMPORTSmbostock.github.com
BUILD YOUR OWN GRAPH http://bl.ocks.org/929623
INTERACTIVE PUBLICATION HISTORY       http://www.cs.umd.edu/
CLOSE VOTEShttp://www.visualizing.org/
HISTORYS LARGEST EMPIRES   http://www.visualizing.org/
BASIC CHARTS
BAR CHARThttp://bl.ocks.org/3885304
LINE CHARThttp://bl.ocks.org/3883245
THE HERO
MIKE BOSTOCK   on vimeo
MIKE BOSTOCK   on github
STANFORDhttp://vis.stanford.edu/
LINKSHomepagehttp://bost.ocks.org/mike/Blog: http://www.tumblr.com/tagged/mike%20bostockGithubhttps://github.com/mbostockB...
THE END
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
D3.js mindblow
Upcoming SlideShare
Loading in...5
×

D3.js mindblow

4,859

Published on

BrisJS and CampJS

Published in: Technology

Transcript of "D3.js mindblow"

  1. 1. D3.JS Mind blow by Antonaka @antulik
  2. 2. THEME FOR THE TALK
  3. 3. WAT?
  4. 4. HARLEM SHAKE
  5. 5. YOUTUBEall on youtube and its blocked
  6. 6. there is no wifi signal in this room anyway
  7. 7. No probs, use phone tethering
  8. 8. bug which reload the page
  9. 9. No probs, Firefox
  10. 10. 1.5GB of RAM
  11. 11. MIND BLOW minecraft - 2 levels in 4 hoursht:/w.lntierf.o/lg2lvl-n4hus tp/wwpaemncatcmbo/-eesi--or/
  12. 12. WORKSHOP BASED ON WORKSHOP BY MIKE BOSTOCK which is 3+ hours
  13. 13. 2 HOURS IN 4 HOURS D3JS
  14. 14. STATSNumbers
  15. 15. GITHUBRailsstars: 17 350forks: 4 860D3stars: 12 190forks: 1 995
  16. 16. GITHUB?
  17. 17. MY PERSONAL EXPERIENCE Ruby & Rails 2 years somewhat average or higher (or maybe not) D3 a bit over 1 year Im a noob
  18. 18. HARDEST THINGS TO LEARN before1. Assembler / C / Kernel compilation / POSIX2. VBA3. Java 40. Javascript 1000. Ruby
  19. 19. HARDEST THINGS TO LEARN and now 1. D3.js 2. the rest
  20. 20. AWESOMENESS
  21. 21. D3.JS IS HARDSeems like everybodywould agree with that
  22. 22. D3.JS IS GOING TO STAYBeautiful levels of abstractionsDoesnt limit youDoesnt force many conventionsGood documentationGood modular designPowerful
  23. 23. D3.JS IS A TOOL it does one thingand it does it very well
  24. 24. SO WHY SUCH REPUTATION its not technology but mind shift
  25. 25. MIND SHIFT?
  26. 26. OOPIts like learning OOPbut for visualisations
  27. 27. ITS JUST A TOOL It gives all the power to the user You still need to do all the jobSpeaking in French doesnt make you smarter
  28. 28. D3.JS IS ANNOYINGit takes 2 hours to write 10 lines
  29. 29. WITH ALL THAT POWER Tool is no longer limitation but we are
  30. 30. HOW IVE STARTED TopicRay Sep 2011
  31. 31. TOPICRAYis multi-threaded chat system mind map + chat = topicray
  32. 32. TOPICRAY hierarchical datavery very deep hierarchical data
  33. 33. VERSION 1Started with html
  34. 34. VERSION 4then moved to canvas and ocanvas
  35. 35. VERSION 9, 10, 11try to improve canvas implementation
  36. 36. VERSION 13, 14D3.JS enters the stage
  37. 37. VERSION 19, 20improvements on icicle graph
  38. 38. VERSION 21, 22 its radar time
  39. 39. VERSION 23 1 year old
  40. 40. MY SECOND PROJECT StoryLine Sep 2012
  41. 41. STORYLINE Calendar visualisation thinkCalendar + Google Maps = StoryLine
  42. 42. LETS GOLesson learnt, started with D3
  43. 43. SHOW OFF
  44. 44. FOUR WAYS TO SLICE OBAMA’S 2013 BUDGET PROPOSAL www.nytimes.com
  45. 45. OVER THE DECADES, HOW STATES HAVE SHIFTED www.nytimes.com
  46. 46. 512 PATHS TO THE WHITE HOUSE www.nytimes.com
  47. 47. D3 SHOW REELhttp://bl.ocks.org/1256572
  48. 48. THE WEALTH & HEALTH OF NATIONS http://bost.ocks.org/mike/nations/
  49. 49. URBAN WATER EXPLORER www.visualizing.org
  50. 50. NUTRIENT CONTENTShttp://exposedata.com/parallel/
  51. 51. HOW OBAMA WON RE-ELECTION www.nytimes.com
  52. 52. COFFEE FLAVOUR WHEELhttp://www.jasondavies.com/coffee-wheel/
  53. 53. LES MISÉRABLES CO-OCCURRENCE http://bost.ocks.org/mike/miserables/
  54. 54. WORDCLOUDhttp://www.jasondavies.com/wordcloud/
  55. 55. FORCE COLLAPSABLE mbostock.github.com
  56. 56. TREEMAPhttp://bl.ocks.org/4063582
  57. 57. FLARE IMPORTSmbostock.github.com
  58. 58. BUILD YOUR OWN GRAPH http://bl.ocks.org/929623
  59. 59. INTERACTIVE PUBLICATION HISTORY http://www.cs.umd.edu/
  60. 60. CLOSE VOTEShttp://www.visualizing.org/
  61. 61. HISTORYS LARGEST EMPIRES http://www.visualizing.org/
  62. 62. BASIC CHARTS
  63. 63. BAR CHARThttp://bl.ocks.org/3885304
  64. 64. LINE CHARThttp://bl.ocks.org/3883245
  65. 65. THE HERO
  66. 66. MIKE BOSTOCK on vimeo
  67. 67. MIKE BOSTOCK on github
  68. 68. STANFORDhttp://vis.stanford.edu/
  69. 69. LINKSHomepagehttp://bost.ocks.org/mike/Blog: http://www.tumblr.com/tagged/mike%20bostockGithubhttps://github.com/mbostockBlockshttp://bl.ocks.org/mbostock
  70. 70. THE END
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×