D3.js mindblow

6,913 views
6,580 views

Published on

BrisJS and CampJS

Published in: Technology

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

×