An introduction to D3 & Rickshaw and how we built our time-series monitoring graphs at Server Density.

1. A Story

2. Pedro
Our Ops Engineer

3. !

7. Time Series Graphs!
Solve Problems
☀

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

9. D3

10. bl.ocks.org/mbostock/4060606

11. color.method.ac/

12. http://hughsk.io/colony/

13. bl.ocks.org/mbostock/4063318

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

15. Data Visualisation !
is in D3’s DNA

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

17. alignedleft.com/tutorials/d3/making-a-bar-chart

19. Rickshaw

21. code.shutterstock.com/rickshaw/examples

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

28. Rickshaw
++

32. A tick every 2 minutes

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

39. THE LESSON
☺!

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

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

47. 1.
2.
3.
4.
Missing X & Y Data!
Missing Series Names!
Badly ordered dates!
Data Smoothing

48. Design for failure
Data is unpredictable…
“it shouldn’t happen” will happen

49. Monitor servers & websites
Configure Alerts
Manage your infrastructure
blog.serverdensity.com
@serverdensity
@byrichardpowell