d3 rickshaw and backbone in 50 minutes

97
@byrichardpowell byrichardpowell.co.uk Thursday, 28 November 13

Upload: richard-powell

Post on 27-Jan-2015

116 views

Category:

Technology


0 download

DESCRIPTION

Using D3, Rickshaw and Backbone to create Server Density's time-series charts. In this talk I cover: * D3, Rickshaw and Backbone * Data Visualisation Design * Backend API Design * Programming defensively * Maths in JavaScript

TRANSCRIPT

Page 1: D3 Rickshaw and Backbone in 50 minutes

@byrichardpowellbyrichardpowell.co.uk

Thursday, 28 November 13

Page 2: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 3: D3 Rickshaw and Backbone in 50 minutes

Manage your infrastructure

Thursday, 28 November 13

Page 4: D3 Rickshaw and Backbone in 50 minutes

Monitor your devices

Thursday, 28 November 13

Page 5: D3 Rickshaw and Backbone in 50 minutes

Monitor your services

Thursday, 28 November 13

Page 6: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 7: D3 Rickshaw and Backbone in 50 minutes

25 TB of data per month

Thursday, 28 November 13

Page 8: D3 Rickshaw and Backbone in 50 minutes

Time Series Graphs with Rickshaw, D3 & Backbone.js

The backbone logo inside a rickshaw

Thursday, 28 November 13

Page 9: D3 Rickshaw and Backbone in 50 minutes

Why talk about data visulisation?

Thursday, 28 November 13

Page 10: D3 Rickshaw and Backbone in 50 minutes

gapminder.org/world/

Spot Patterns

Thursday, 28 November 13

Page 11: D3 Rickshaw and Backbone in 50 minutes

gapminder.org/world/

Spot Patterns

Thursday, 28 November 13

Page 12: D3 Rickshaw and Backbone in 50 minutes

Diagnose Problems

Thursday, 28 November 13

Page 13: D3 Rickshaw and Backbone in 50 minutes

Data visualization can be beautifulJe Thorp: Word Frequency

Funny picture

Thursday, 28 November 13

Page 14: D3 Rickshaw and Backbone in 50 minutes

“Data Visualization is awesome”

this kid, 2013

Thursday, 28 November 13

Page 15: D3 Rickshaw and Backbone in 50 minutes

Overview

1. SVG, D3, Rickshaw2. Data Visualisation Design3. API Design4. Backbone

Thursday, 28 November 13

Page 16: D3 Rickshaw and Backbone in 50 minutes

1. SVG, D3 & Rickshaw

Thursday, 28 November 13

Page 17: D3 Rickshaw and Backbone in 50 minutes

“A modularized language for describing two-dimensional vector

and mixed vector/raster graphics in XML”

w3.org/TR/SVG/

Thursday, 28 November 13

Page 18: D3 Rickshaw and Backbone in 50 minutes

Elements & AttributesThursday, 28 November 13

Page 19: D3 Rickshaw and Backbone in 50 minutes

snapsvg.io

website

Thursday, 28 November 13

Page 20: D3 Rickshaw and Backbone in 50 minutes

pablojs.com/Thursday, 28 November 13

Page 21: D3 Rickshaw and Backbone in 50 minutes

raphaeljs.com/Thursday, 28 November 13

Page 22: D3 Rickshaw and Backbone in 50 minutes

Why D3 & Why Rickshaw?

Thursday, 28 November 13

Page 23: D3 Rickshaw and Backbone in 50 minutes

Mike Bostock@mbostock

Thursday, 28 November 13

Page 24: D3 Rickshaw and Backbone in 50 minutes

examples?github.com/mbostock/d3/wiki/Gallery

Thursday, 28 November 13

Page 25: D3 Rickshaw and Backbone in 50 minutes

Horizon Graphssquare.github.io/cubism/

Thursday, 28 November 13

Page 26: D3 Rickshaw and Backbone in 50 minutes

Calender Heatmapsbl.ocks.org/mbostock/4063318

Thursday, 28 November 13

Page 27: D3 Rickshaw and Backbone in 50 minutes

Rickshaw is feature rich

* Line* Stacked* Scaled Series* Custom Axis Formatting* Custom tooltips* Disabling/enabling series

Thursday, 28 November 13

Page 28: D3 Rickshaw and Backbone in 50 minutes

Rickshaw is feature rich

* Scatterplots* Bar charts* Mixed charts* Logarithmic & Absolute Scaling * Annotations

Thursday, 28 November 13

Page 29: D3 Rickshaw and Backbone in 50 minutes

xkcd.com/418/

Thursday, 28 November 13

Page 30: D3 Rickshaw and Backbone in 50 minutes

2. Design

Thursday, 28 November 13

Page 31: D3 Rickshaw and Backbone in 50 minutes

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

Thursday, 28 November 13

Page 32: D3 Rickshaw and Backbone in 50 minutes

bit.ly/183R6sT

Thursday, 28 November 13

Page 33: D3 Rickshaw and Backbone in 50 minutes

bit.ly/183R6sT

Thursday, 28 November 13

Page 34: D3 Rickshaw and Backbone in 50 minutes

Data to Ink Ratio: Classes

Thursday, 28 November 13

Page 35: D3 Rickshaw and Backbone in 50 minutes

Data to Ink Ratio: Classes

Thursday, 28 November 13

Page 36: D3 Rickshaw and Backbone in 50 minutes

Data to Ink Ratio: Classes

Thursday, 28 November 13

Page 37: D3 Rickshaw and Backbone in 50 minutes

Data to Ink Ratio: Classes

Thursday, 28 November 13

Page 38: D3 Rickshaw and Backbone in 50 minutes

Data to Ink Ratio: Legend Classes

Thursday, 28 November 13

Page 39: D3 Rickshaw and Backbone in 50 minutes

Use only the classes you need

to create the design you want

Thursday, 28 November 13

Page 40: D3 Rickshaw and Backbone in 50 minutes

“Having the data is not enough. I have to show it in ways

people both enjoy and understand.”

Hans Rosling

Thursday, 28 November 13

Page 41: D3 Rickshaw and Backbone in 50 minutes

Enjoy

Thursday, 28 November 13

Page 42: D3 Rickshaw and Backbone in 50 minutes

“A state of joy, creativity and total involvement, in which problems seem to disappear and there is an exhilarating feeling

of transcendence”

Mihaly Csikszentmihalyi

Thursday, 28 November 13

Page 43: D3 Rickshaw and Backbone in 50 minutes

This is not enjoymentthis is not flow

Thursday, 28 November 13

Page 44: D3 Rickshaw and Backbone in 50 minutes

To maintain flow Be Defensive

Thursday, 28 November 13

Page 45: D3 Rickshaw and Backbone in 50 minutes

Defensive: Check for errors

Thursday, 28 November 13

Page 46: D3 Rickshaw and Backbone in 50 minutes

Defensive: Quarantine

Thursday, 28 November 13

Page 47: D3 Rickshaw and Backbone in 50 minutes

Defensive: Give Feedback

Thursday, 28 November 13

Page 48: D3 Rickshaw and Backbone in 50 minutes

Being Forgiving

Thursday, 28 November 13

Page 49: D3 Rickshaw and Backbone in 50 minutes

Understand

Thursday, 28 November 13

Page 50: D3 Rickshaw and Backbone in 50 minutes

Numbers or Patterns?Thursday, 28 November 13

Page 51: D3 Rickshaw and Backbone in 50 minutes

Both?

19th Nov 2003Physical Memory Used: 200

Thursday, 28 November 13

Page 52: D3 Rickshaw and Backbone in 50 minutes

Comparisons?Thursday, 28 November 13

Page 53: D3 Rickshaw and Backbone in 50 minutes

Custom Formatted Tooltips

Thursday, 28 November 13

Page 54: D3 Rickshaw and Backbone in 50 minutes

Tooltip Events

Thursday, 28 November 13

Page 55: D3 Rickshaw and Backbone in 50 minutes

Synchronized Tooltips

Thursday, 28 November 13

Page 56: D3 Rickshaw and Backbone in 50 minutes

Synchronized Tooltips

Thursday, 28 November 13

Page 57: D3 Rickshaw and Backbone in 50 minutes

“You’ve got a good piece of software when people use it for purposes

it was never intended for.”

Clay Shirky

Thursday, 28 November 13

Page 58: D3 Rickshaw and Backbone in 50 minutes

We Never Expected

Thursday, 28 November 13

Page 59: D3 Rickshaw and Backbone in 50 minutes

Multiple Axisbit.ly/17lKqn5

Thursday, 28 November 13

Page 60: D3 Rickshaw and Backbone in 50 minutes

Multiple Axisbit.ly/17lKqn5

Thursday, 28 November 13

Page 61: D3 Rickshaw and Backbone in 50 minutes

Generating a scale

Thursday, 28 November 13

Page 62: D3 Rickshaw and Backbone in 50 minutes

Generating multiple scales

Thursday, 28 November 13

Page 63: D3 Rickshaw and Backbone in 50 minutes

Using the scales

Thursday, 28 November 13

Page 64: D3 Rickshaw and Backbone in 50 minutes

Scaling the axis

Thursday, 28 November 13

Page 65: D3 Rickshaw and Backbone in 50 minutes

xkcd.com/231/

Thursday, 28 November 13

Page 66: D3 Rickshaw and Backbone in 50 minutes

3.Metrics

Thursday, 28 November 13

Page 67: D3 Rickshaw and Backbone in 50 minutes

“How do we request graph data for metrics ... ?”

Thursday, 28 November 13

Page 68: D3 Rickshaw and Backbone in 50 minutes

Metrics can be simple, complex or dynamic

Thursday, 28 November 13

Page 69: D3 Rickshaw and Backbone in 50 minutes

Metrics can be combined

Thursday, 28 November 13

Page 70: D3 Rickshaw and Backbone in 50 minutes

“How do we request graph data for multiple metrics at once

that can nest many levels deepand are dynamic?”

Thursday, 28 November 13

Page 71: D3 Rickshaw and Backbone in 50 minutes

Structured as JSON

Thursday, 28 November 13

Page 72: D3 Rickshaw and Backbone in 50 minutes

JSON in a URL

Thursday, 28 November 13

Page 73: D3 Rickshaw and Backbone in 50 minutes

The graph data

Thursday, 28 November 13

Page 74: D3 Rickshaw and Backbone in 50 minutes

xkcd.com/518/

Thursday, 28 November 13

Page 75: D3 Rickshaw and Backbone in 50 minutes

4.Backbone

Thursday, 28 November 13

Page 76: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 77: D3 Rickshaw and Backbone in 50 minutes

tabs

graphs alerting plugins

Thursday, 28 November 13

Page 78: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 79: D3 Rickshaw and Backbone in 50 minutes

graphs

date graph graph

Thursday, 28 November 13

Page 80: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 81: D3 Rickshaw and Backbone in 50 minutes

graph

options series legend axis

Thursday, 28 November 13

Page 82: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 83: D3 Rickshaw and Backbone in 50 minutes

tabs view

graphs view

graph views

options view

dropdown views

Thursday, 28 November 13

Page 84: D3 Rickshaw and Backbone in 50 minutes

Zombies: Cool for fancy dressnot cool for code

Eventsand the mediator pattern

Thursday, 28 November 13

Page 85: D3 Rickshaw and Backbone in 50 minutes

Using mediator events

Thursday, 28 November 13

Page 86: D3 Rickshaw and Backbone in 50 minutes

Using Collection Events

Thursday, 28 November 13

Page 87: D3 Rickshaw and Backbone in 50 minutes

Zombies: Cool for fancy dressnot cool for code

Thursday, 28 November 13

Page 88: D3 Rickshaw and Backbone in 50 minutes

Managing Views

Thursday, 28 November 13

Page 89: D3 Rickshaw and Backbone in 50 minutes

Be DefensiveThursday, 28 November 13

Page 90: D3 Rickshaw and Backbone in 50 minutes

Dealing with time (badly)

Thursday, 28 November 13

Page 91: D3 Rickshaw and Backbone in 50 minutes

Dealing with time (badly)

Thursday, 28 November 13

Page 92: D3 Rickshaw and Backbone in 50 minutes

Dealing with time (badly)

Thursday, 28 November 13

Page 93: D3 Rickshaw and Backbone in 50 minutes

Dealing with time (badly)

Thursday, 28 November 13

Page 94: D3 Rickshaw and Backbone in 50 minutes

Thursday, 28 November 13

Page 95: D3 Rickshaw and Backbone in 50 minutes

Dealing with time

Thursday, 28 November 13

Page 96: D3 Rickshaw and Backbone in 50 minutes

xkcd.com/290/

Thursday, 28 November 13

Page 97: D3 Rickshaw and Backbone in 50 minutes

www.serverdensity.com/

bit.ly/1erNJNz

@byrichardpowell

Thursday, 28 November 13