Time-Series Monitoring Graphs with D3 & Rickshaw

6,193
-1

Published on

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

Published in: Technology, Economy & Finance
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,193
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
29
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Time-Series Monitoring Graphs with D3 & Rickshaw

  1. 1. A Story
  2. 2. Pedro Our Ops Engineer
  3. 3. !
  4. 4. Time Series Graphs! Solve Problems ☀
  5. 5. 1. 2. 3. 4. D3! Rickshaw! Rickshaw ++! The BIG Lesson!
  6. 6. D3
  7. 7. bl.ocks.org/mbostock/4060606
  8. 8. color.method.ac/
  9. 9. http://hughsk.io/colony/
  10. 10. bl.ocks.org/mbostock/4063318
  11. 11. http://bl.ocks.org/mbostock/4063582
  12. 12. Data Visualisation ! is in D3’s DNA
  13. 13. http://bost.ocks.org/mike/nations/
  14. 14. alignedleft.com/tutorials/d3/making-a-bar-chart
  15. 15. Rickshaw
  16. 16. code.shutterstock.com/rickshaw/examples
  17. 17. “Above all else show the data” Edward Rolf Tufte, 1983
  18. 18. Rickshaw ++
  19. 19. A tick every 2 minutes
  20. 20. 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
  21. 21. THE LESSON ☺!
  22. 22. “A state of joy, creativity ! and total involvement ! in which problems ! seem to disappear” Mihaly Csikszentmihalyi
  23. 23. 1. 2. 3. 4. 5. Intuitive interfaces! Forgiving workflows! Attractive designs! Personality! And avoiding…
  24. 24. 1. 2. 3. 4. Missing X & Y Data! Missing Series Names! Badly ordered dates! Data Smoothing
  25. 25. Design for failure Data is unpredictable… “it shouldn’t happen” will happen
  26. 26. Monitor servers & websites Configure Alerts Manage your infrastructure blog.serverdensity.com @serverdensity @byrichardpowell
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×