BrisJS and CampJS

1. D3.JS
Mind blow
by Anton
aka @antulik

2. THEME FOR THE TALK

3. WAT?

4. HARLEM SHAKE

5. YOUTUBE
all on youtube and it's 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 hours
ht:/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. STATS
Numbers

15. GITHUB
Rails
stars: 17 350
forks: 4 860
D3
stars: 12 190
forks: 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
I'm a noob

18. HARDEST THINGS TO LEARN
before
1. Assembler / C / Kernel compilation
/ POSIX
2. VBA
3. Java
40. Javascript
1000. Ruby

19. HARDEST THINGS TO LEARN
and now
1. D3.js
2. the rest

20. AWESOMENESS

22. D3.JS IS HARD
Seems like everybody
would agree with that

23. D3.JS IS GOING TO STAY
Beautiful levels of abstractions
Doesn't limit you
Doesn't force many conventions
Good documentation
Good modular design
Powerful

24. D3.JS IS A TOOL
it does one thing
and it does it very well

25. SO WHY SUCH REPUTATION
it's not technology
but mind shift

26. MIND SHIFT?

27. OOP
It's like learning OOP
but for visualisations

28. 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

29. D3.JS IS ANNOYING
it takes 2 hours to write 10 lines

30. WITH ALL THAT POWER
Tool is no longer limitation
but we are

31. HOW I'VE STARTED
TopicRay
Sep 2011

32. TOPICRAY
is multi-threaded chat system
mind map + chat = topicray

34. TOPICRAY
hierarchical data
very very deep hierarchical data

35. VERSION 1
Started with html

36. VERSION 4
then moved to canvas and ocanvas

37. VERSION 9, 10, 11
try to improve canvas implementation

38. VERSION 13, 14
D3.JS enters the stage

39. VERSION 19, 20
improvements on icicle graph

40. VERSION 21, 22
it's radar time

41. VERSION 23
1 year old

42. MY SECOND PROJECT
StoryLine
Sep 2012

43. STORYLINE
Calendar visualisation
think
Calendar + Google Maps = StoryLine

44. LET'S GO
Lesson learnt, started with D3

56. SHOW OFF

57. FOUR WAYS TO SLICE OBAMA’S 2013 BUDGET
PROPOSAL
www.nytimes.com

58. OVER THE DECADES, HOW STATES HAVE
SHIFTED
www.nytimes.com

59. 512 PATHS TO THE WHITE HOUSE
www.nytimes.com

60. D3 SHOW REEL
http://bl.ocks.org/1256572

61. THE WEALTH & HEALTH OF NATIONS
http://bost.ocks.org/mike/nations/

62. URBAN WATER EXPLORER
www.visualizing.org

63. NUTRIENT CONTENTS
http://exposedata.com/parallel/

64. HOW OBAMA WON RE-ELECTION
www.nytimes.com

65. COFFEE FLAVOUR WHEEL
http://www.jasondavies.com/coffee-wheel/

66. LES MISÉRABLES CO-OCCURRENCE
http://bost.ocks.org/mike/miserables/

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

69. FORCE COLLAPSABLE
mbostock.github.com

70. TREEMAP
http://bl.ocks.org/4063582

71. FLARE IMPORTS
mbostock.github.com

72. BUILD YOUR OWN GRAPH
http://bl.ocks.org/929623

73. INTERACTIVE PUBLICATION HISTORY
http://www.cs.umd.edu/

74. CLOSE VOTES
http://www.visualizing.org/

75. HISTORY'S LARGEST EMPIRES
http://www.visualizing.org/

76. BASIC CHARTS

77. BAR CHART
http://bl.ocks.org/3885304

78. LINE CHART
http://bl.ocks.org/3883245

79. THE HERO

80. MIKE BOSTOCK
on vimeo

81. MIKE BOSTOCK
on github

82. STANFORD
http://vis.stanford.edu/

83. LINKS
Homepage
http://bost.ocks.org/mike/
Blog: http://www.tumblr.com/tagged/mike%20bostock
Github
https://github.com/mbostock
Blocks
http://bl.ocks.org/mbostock

84. THE END