time-series monitoring graphs with d3 & rickshaw

49
A Story

Upload: richard-powell

Post on 27-Jan-2015

119 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Time-Series Monitoring Graphs with D3 & Rickshaw

A Story

Page 2: Time-Series Monitoring Graphs with D3 & Rickshaw

PedroOur Ops Engineer

Page 3: Time-Series Monitoring Graphs with D3 & Rickshaw

!

Page 4: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 5: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 6: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 7: Time-Series Monitoring Graphs with D3 & Rickshaw

☀Time Series Graphs!

Solve Problems

Page 8: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 9: Time-Series Monitoring Graphs with D3 & Rickshaw

❣D3

Page 10: Time-Series Monitoring Graphs with D3 & Rickshaw

bl.ocks.org/mbostock/4060606

Page 11: Time-Series Monitoring Graphs with D3 & Rickshaw

color.method.ac/

Page 12: Time-Series Monitoring Graphs with D3 & Rickshaw

http://hughsk.io/colony/

Page 13: Time-Series Monitoring Graphs with D3 & Rickshaw

bl.ocks.org/mbostock/4063318

Page 14: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 15: Time-Series Monitoring Graphs with D3 & Rickshaw

Data Visualisation !is in D3’s DNA

Page 16: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 17: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 18: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 19: Time-Series Monitoring Graphs with D3 & Rickshaw

❣Rickshaw

Page 20: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 21: Time-Series Monitoring Graphs with D3 & Rickshaw

code.shutterstock.com/rickshaw/examples

Page 22: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 23: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 24: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 25: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 26: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 27: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 28: Time-Series Monitoring Graphs with D3 & Rickshaw

❣++Rickshaw

Page 29: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 30: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 31: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 32: Time-Series Monitoring Graphs with D3 & Rickshaw

A tick every 2 minutes

Page 33: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 34: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 35: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 36: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 37: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 38: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 39: Time-Series Monitoring Graphs with D3 & Rickshaw

☺!THE LESSON

Page 40: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 41: Time-Series Monitoring Graphs with D3 & Rickshaw

“A state of joy, creativity !and total involvement !

in which problems !seem to disappear”

Mihaly Csikszentmihalyi

Page 42: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 43: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 44: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 45: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 46: Time-Series Monitoring Graphs with D3 & Rickshaw
Page 47: Time-Series Monitoring Graphs with D3 & Rickshaw

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

Page 48: Time-Series Monitoring Graphs with D3 & Rickshaw

Design for failureData is unpredictable…

“it shouldn’t happen” will happen

Page 49: Time-Series Monitoring Graphs with D3 & Rickshaw

blog.serverdensity.com @serverdensity @byrichardpowell

Monitor servers & websites Configure Alerts Manage your infrastructure