D3.js mindblow
84
D3.JS Mind blow by Anton aka @antulik
-
Upload
anton-katunin -
Category
Technology
-
view
131 -
download
2
description
BrisJS and CampJS
Transcript of D3.js mindblow
D3.JSMind blow
by Anton
aka @antulik
THEME FOR THE TALK
WAT?
HARLEM SHAKE
YOUTUBEall on youtube and it's 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 BLOWminecraft - 2 levels in 4 hours
http://www.planetminecraft.com/blog/2-levels-in-4-hours/
WORKSHOP BASED ON WORKSHOP BY MIKEBOSTOCK
which is 3+ hours
2 HOURS IN 4 HOURSD3JS
STATSNumbers
GITHUBRailsstars: 17 350forks: 4 860
D3stars: 12 190forks: 1 995
GITHUB?
MY PERSONAL EXPERIENCERuby & Rails2 yearssomewhat average or higher(or maybe not)
D3a bit over 1 yearI'm a noob
HARDEST THINGS TO LEARNbefore
1. Assembler / C / Kernel compilation/ POSIX
2. VBA3. Java
40. Javascript
1000. Ruby
HARDEST THINGS TO LEARNand now
1. D3.js2. the rest
AWESOMENESS
D3.JS IS HARD
Seems like everybody would agree with that
D3.JS IS GOING TO STAY
Beautiful levels of abstractionsDoesn't limit youDoesn't force many conventionsGood documentationGood modular designPowerful
D3.JS IS A TOOL
it does one thing
and it does it very well
SO WHY SUCH REPUTATION
it's not technology
but mind shift
MIND SHIFT?
OOP
It's like learning OOP
but for visualisations
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
D3.JS IS ANNOYING
it takes 2 hours to write 10 lines
WITH ALL THAT POWER
Tool is no longer limitation
but we are
HOW I'VE STARTEDTopicRay
Sep 2011
TOPICRAYis multi-threaded chat system
mind map + chat = topicray
TOPICRAYhierarchical data
very 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, 22it's radar time
VERSION 231 year old
MY SECOND PROJECTStoryLine
Sep 2012
STORYLINECalendar visualisation
thinkCalendar + Google Maps = StoryLine
LET'S GOLesson learnt, started with D3
SHOW OFF
FOUR WAYS TO SLICE OBAMA’S 2013 BUDGETPROPOSAL
www.nytimes.com
OVER THE DECADES, HOW STATES HAVESHIFTED
www.nytimes.com
512 PATHS TO THE WHITE HOUSE
www.nytimes.com
THE WEALTH & HEALTH OF NATIONS
http://bost.ocks.org/mike/nations/
HOW OBAMA WON RE-ELECTION
www.nytimes.com
COFFEE FLAVOUR WHEEL
http://www.jasondavies.com/coffee-wheel/
LES MISÉRABLES CO-OCCURRENCE
http://bost.ocks.org/mike/miserables/
FORCE COLLAPSABLE
mbostock.github.com
INTERACTIVE PUBLICATION HISTORY
http://www.cs.umd.edu/
HISTORY'S LARGEST EMPIRES
http://www.visualizing.org/
BASIC CHARTS
BAR CHARThttp://bl.ocks.org/3885304
LINE CHARThttp://bl.ocks.org/3883245
THE HERO
MIKE BOSTOCKon vimeo
MIKE BOSTOCKon github
STANFORDhttp://vis.stanford.edu/
LINKSHomepagehttp://bost.ocks.org/mike/Blog: http://www.tumblr.com/tagged/mike%20bostockGithub https://github.com/mbostockBlockshttp://bl.ocks.org/mbostock
THE END
