Your SlideShare is downloading. ×
D3.js mindblow
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

D3.js mindblow

4,609
views

Published on

BrisJS and CampJS

BrisJS and CampJS

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,609
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
62
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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