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

D3 SHOW REEL

http://bl.ocks.org/1256572

THE WEALTH & HEALTH OF NATIONS

http://bost.ocks.org/mike/nations/

URBAN WATER EXPLORER

www.visualizing.org

NUTRIENT CONTENTS

http://exposedata.com/parallel/

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/

WORDCLOUD http://www.jasondavies.com/wordcloud/

FORCE COLLAPSABLE

mbostock.github.com

TREEMAP

http://bl.ocks.org/4063582

FLARE IMPORTS

mbostock.github.com

BUILD YOUR OWN GRAPH

http://bl.ocks.org/929623

INTERACTIVE PUBLICATION HISTORY

http://www.cs.umd.edu/

CLOSE VOTES

http://www.visualizing.org/

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