Download - D3.js mindblow
![Page 1: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/1.jpg)
D3.JSMind blow
by Anton
aka @antulik
![Page 2: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/2.jpg)
THEME FOR THE TALK
![Page 3: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/3.jpg)
WAT?
![Page 4: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/4.jpg)
HARLEM SHAKE
![Page 5: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/5.jpg)
YOUTUBEall on youtube and it's blocked
![Page 6: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/6.jpg)
there is no wifi signal in this room anyway
![Page 7: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/7.jpg)
No probs, use phone tethering
![Page 8: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/8.jpg)
bug which reload the page
![Page 9: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/9.jpg)
No probs, Firefox
![Page 10: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/10.jpg)
1.5GB of RAM
![Page 11: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/11.jpg)
MIND BLOWminecraft - 2 levels in 4 hours
http://www.planetminecraft.com/blog/2-levels-in-4-hours/
![Page 12: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/12.jpg)
WORKSHOP BASED ON WORKSHOP BY MIKEBOSTOCK
which is 3+ hours
![Page 13: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/13.jpg)
2 HOURS IN 4 HOURSD3JS
![Page 14: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/14.jpg)
STATSNumbers
![Page 15: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/15.jpg)
GITHUBRailsstars: 17 350forks: 4 860
D3stars: 12 190forks: 1 995
![Page 16: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/16.jpg)
GITHUB?
![Page 17: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/17.jpg)
MY PERSONAL EXPERIENCERuby & Rails2 yearssomewhat average or higher(or maybe not)
D3a bit over 1 yearI'm a noob
![Page 18: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/18.jpg)
HARDEST THINGS TO LEARNbefore
1. Assembler / C / Kernel compilation/ POSIX
2. VBA3. Java
40. Javascript
1000. Ruby
![Page 19: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/19.jpg)
HARDEST THINGS TO LEARNand now
1. D3.js2. the rest
![Page 20: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/20.jpg)
AWESOMENESS
![Page 21: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/21.jpg)
![Page 22: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/22.jpg)
D3.JS IS HARD
Seems like everybody would agree with that
![Page 23: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/23.jpg)
D3.JS IS GOING TO STAY
Beautiful levels of abstractionsDoesn't limit youDoesn't force many conventionsGood documentationGood modular designPowerful
![Page 24: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/24.jpg)
D3.JS IS A TOOL
it does one thing
and it does it very well
![Page 25: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/25.jpg)
SO WHY SUCH REPUTATION
it's not technology
but mind shift
![Page 26: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/26.jpg)
MIND SHIFT?
![Page 27: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/27.jpg)
OOP
It's like learning OOP
but for visualisations
![Page 28: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/28.jpg)
IT'S JUST A TOOL
It gives all the power to the user
You still need to do all the job
Speaking in French doesn't make you smarter
![Page 29: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/29.jpg)
D3.JS IS ANNOYING
it takes 2 hours to write 10 lines
![Page 30: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/30.jpg)
WITH ALL THAT POWER
Tool is no longer limitation
but we are
![Page 31: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/31.jpg)
HOW I'VE STARTEDTopicRay
Sep 2011
![Page 32: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/32.jpg)
TOPICRAYis multi-threaded chat system
mind map + chat = topicray
![Page 33: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/33.jpg)
![Page 34: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/34.jpg)
TOPICRAYhierarchical data
very very deep hierarchical data
![Page 35: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/35.jpg)
VERSION 1Started with html
![Page 36: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/36.jpg)
VERSION 4then moved to canvas and ocanvas
![Page 37: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/37.jpg)
VERSION 9, 10, 11try to improve canvas implementation
![Page 38: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/38.jpg)
VERSION 13, 14D3.JS enters the stage
![Page 39: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/39.jpg)
VERSION 19, 20improvements on icicle graph
![Page 40: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/40.jpg)
VERSION 21, 22it's radar time
![Page 41: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/41.jpg)
VERSION 231 year old
![Page 42: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/42.jpg)
MY SECOND PROJECTStoryLine
Sep 2012
![Page 43: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/43.jpg)
STORYLINECalendar visualisation
thinkCalendar + Google Maps = StoryLine
![Page 44: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/44.jpg)
LET'S GOLesson learnt, started with D3
![Page 45: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/45.jpg)
![Page 46: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/46.jpg)
![Page 47: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/47.jpg)
![Page 48: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/48.jpg)
![Page 49: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/49.jpg)
![Page 50: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/50.jpg)
![Page 51: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/51.jpg)
![Page 52: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/52.jpg)
![Page 53: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/53.jpg)
![Page 54: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/54.jpg)
![Page 55: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/55.jpg)
![Page 56: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/56.jpg)
SHOW OFF
![Page 57: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/57.jpg)
FOUR WAYS TO SLICE OBAMA’S 2013 BUDGETPROPOSAL
www.nytimes.com
![Page 58: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/58.jpg)
OVER THE DECADES, HOW STATES HAVESHIFTED
www.nytimes.com
![Page 59: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/59.jpg)
512 PATHS TO THE WHITE HOUSE
www.nytimes.com
![Page 61: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/61.jpg)
THE WEALTH & HEALTH OF NATIONS
http://bost.ocks.org/mike/nations/
![Page 64: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/64.jpg)
HOW OBAMA WON RE-ELECTION
www.nytimes.com
![Page 65: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/65.jpg)
COFFEE FLAVOUR WHEEL
http://www.jasondavies.com/coffee-wheel/
![Page 66: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/66.jpg)
LES MISÉRABLES CO-OCCURRENCE
http://bost.ocks.org/mike/miserables/
![Page 68: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/68.jpg)
![Page 69: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/69.jpg)
FORCE COLLAPSABLE
mbostock.github.com
![Page 73: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/73.jpg)
INTERACTIVE PUBLICATION HISTORY
http://www.cs.umd.edu/
![Page 75: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/75.jpg)
HISTORY'S LARGEST EMPIRES
http://www.visualizing.org/
![Page 76: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/76.jpg)
BASIC CHARTS
![Page 77: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/77.jpg)
BAR CHARThttp://bl.ocks.org/3885304
![Page 78: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/78.jpg)
LINE CHARThttp://bl.ocks.org/3883245
![Page 79: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/79.jpg)
THE HERO
![Page 80: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/80.jpg)
MIKE BOSTOCKon vimeo
![Page 81: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/81.jpg)
MIKE BOSTOCKon github
![Page 82: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/82.jpg)
STANFORDhttp://vis.stanford.edu/
![Page 83: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/83.jpg)
LINKSHomepagehttp://bost.ocks.org/mike/Blog: http://www.tumblr.com/tagged/mike%20bostockGithub https://github.com/mbostockBlockshttp://bl.ocks.org/mbostock
![Page 84: D3.js mindblow](https://reader031.vdocuments.site/reader031/viewer/2022012403/54c68c7f4a795962378b461d/html5/thumbnails/84.jpg)
THE END