Data Visualisation with D3 & Rickshaw - Berlin Expert Days

69
@serverdensity @byrichardpowell

description

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.

Transcript of Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Page 1: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

@serverdensity @byrichardpowell

Page 2: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Monitor your infrastructure

Page 3: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Monitor your services

Page 4: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 5: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

30 TB of data per month!2 billion documents a day

http://bit.ly/30TB-pm

Page 6: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

A Story

Page 7: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

PedroOur Ops Engineer

Page 8: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

!

Page 9: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 10: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 11: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 12: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

☀Time Series Graphs!

Solve Problems

Page 13: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

Page 14: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

❣D3

Page 15: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Getting Started

Page 16: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 17: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 18: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 19: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Data Visualisation !is in D3’s DNA

Page 20: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

bl.ocks.org/mbostock/4060606

Page 21: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

color.method.ac/

Page 22: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

bl.ocks.org/mbostock/4063318

Page 23: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

Page 24: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

http://hughsk.io/colony/

Page 25: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 26: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 27: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 28: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

Page 29: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

https://github.com/mbostock/d3/wiki/LayoutsLayouts

Page 30: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

Page 31: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

❣Rickshaw

Page 32: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 33: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

code.shutterstock.com/rickshaw/examples

Page 34: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 35: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

svg

Page 36: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

“Above all else !show the data”

Edward Rolf Tufte, 1983

Page 37: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

bit.ly/183R6sT

Page 38: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 39: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 40: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 41: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 42: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

❣++Rickshaw

Page 43: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 44: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 45: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 46: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

A tick every 2 hours

Page 47: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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 48: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 49: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 50: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 51: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 52: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 53: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

☺!THE LESSON

Page 54: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 55: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

in which problems !seem to disappear”

Mihaly Csikszentmihalyi

Page 56: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

Page 57: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 58: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Flexible Data. Sigh.

Page 59: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 60: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 61: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

javascript

Page 62: Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Page 63: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

coffeescript

Page 64: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

coffeescript

Page 65: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Jaggedy Data

Page 66: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

coffeescript

Page 67: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

Page 68: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

Unpredictable Data?

Page 69: Data Visualisation with D3 & Rickshaw - Berlin Expert Days

@serverdensity @byrichardpowell

Monitor servers & websites Configure Alerts Manage your infrastructure