D3.js mindblow
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

D3.js mindblow

on

  • 4,643 views

BrisJS and CampJS

BrisJS and CampJS

Statistics

Views

Total Views
4,643
Views on SlideShare
4,604
Embed Views
39

Actions

Likes
4
Downloads
48
Comments
0

3 Embeds 39

http://localhost 21
https://gitter.im 17
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

D3.js mindblow Presentation Transcript

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