How to visualisae data with D3 & Rickshaw. In this talk I share my experience of building Server Density's time series graphs usng the javascript libraries: D3 & Rickshaw. I Cover: * Why I think Data Visualisation is important * How to get started with D3 & Rickshaw * Why I think D3 and Rickshaw are fantastic libraries * The mistakes I made and how to avoid them.

1. @serverdensity
@byrichardpowell

2. Monitor your infrastructure

3. Monitor your services

5. 30 TB of data per month!
2 billion documents a day
http://bit.ly/30TB-pm

6. A Story

7. Pedro
Our Ops Engineer

8. !

12. ☀
Time Series Graphs!
Solve Problems

13. 1. D3!
2. Rickshaw!
3. Rickshaw ++!
4. The BIG Lesson!

14. D3

15. Getting Started

16. javascript

17. javascript

18. javascript

19. Data Visualisation !
is in D3’s DNA

20. bl.ocks.org/mbostock/4060606

21. color.method.ac/

22. bl.ocks.org/mbostock/4063318

23. http://bl.ocks.org/mbostock/4063582

24. http://hughsk.io/colony/

26. javascript

27. javascript

28. jsbin.com/golafiye/1/edit?
html,js,output

29. https://github.com/mbostock/d3/wiki/Layouts
Layouts

30. alignedleft.com/tutorials/d3/!
!
github.com/mbostock/d3/wiki/Gallery!
!
github.com/mbostock/d3/wiki/Tutorials!
!
@mbostock

31. Rickshaw

33. code.shutterstock.com/rickshaw/examples

34. javascript

35. svg

36. “Above all else !
show the data”
Edward Rolf Tufte, 1983

37. bit.ly/183R6sT

38. javascript

40. javascript

41. javascript

42. ++
Rickshaw

44. javascript

45. javascript

46. A tick every 2 hours

47. Tick Every No of Ticks Date Format
30 minutes 2 minutes 15 HH:mm
1 hour 5 minutes 12 HH:mm
24 hours 2 Hours 12 HH:mm
> 24 hours Dynamic 15 D MMM YYY

48. javascript

49. javascript

53. ☺!
THE LESSON

55. “A state of joy, creativity !
and total involvement !
in which problems !
seem to disappear”
Mihaly Csikszentmihalyi

56. 1. Intuitive interfaces!
2. Forgiving workflows!
3. Attractive designs!
4. Personality!
5. And avoiding…

58. Flexible Data. Sigh.

59. javascript

60. javascript

61. javascript

63. coffeescript

64. coffeescript

65. Jaggedy Data

66. coffeescript

67. 1. Missing X & Y Data!
2. Badly ordered dates!
3. Duplicate X Values!
4. X Values too close!
5. Missing Series Names

68. Unpredictable Data?

69. @serverdensity
@byrichardpowell
Monitor servers & websites
Configure Alerts
Manage your infrastructure