Time-Series Monitoring Graphs with D3 & Rickshaw

Post on 27-Jan-2015

122 views 1 download

Tags:

description

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

Transcript of Time-Series Monitoring Graphs with D3 & Rickshaw

A Story

PedroOur Ops Engineer

!

☀Time Series Graphs!

Solve Problems

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

❣D3

bl.ocks.org/mbostock/4060606

color.method.ac/

http://hughsk.io/colony/

bl.ocks.org/mbostock/4063318

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

Data Visualisation !is in D3’s DNA

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

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

❣Rickshaw

code.shutterstock.com/rickshaw/examples

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

❣++Rickshaw

A tick every 2 minutes

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

☺!THE LESSON

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

in which problems !seem to disappear”

Mihaly Csikszentmihalyi

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

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

Design for failureData is unpredictable…

“it shouldn’t happen” will happen

blog.serverdensity.com @serverdensity @byrichardpowell

Monitor servers & websites Configure Alerts Manage your infrastructure