D3 Rickshaw and Backbone in 50 minutes

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

Manage your infrastructure

Monitor your devices

Monitor your services

25 TB of data per month


The backbone logo inside a rickshaw

Time Series Graphs
with Rickshaw, D3 & Backbone.js

Why talk about
data visulisation?


Spot Patterns

gapminder.org/world/

Diagnose Problems

Funny picture

Data visualization can be beautiful
Je Thorp: Word Frequency

“Data Visualization is awesome”
this kid, 2013


Overview

1.
2.
3.
4.

SVG, D3, Rickshaw
Data Visualisation Design
API Design
Backbone


1. SVG, D3 & Rickshaw


“A modularized language
for describing two-dimensional vector
and mixed vector/raster graphics in XML”
w3.org/TR/SVG/


Elements & Attributes

website

snapsvg.io

pablojs.com/

raphaeljs.com/

Why D3 & Why Rickshaw?


Mike Bostock
@mbostock


examples?

github.com/mbostock/d3/wiki/Gallery

Horizon Graphs
square.github.io/cubism/


Calender Heatmaps
bl.ocks.org/mbostock/4063318


Rickshaw is feature rich
* Line
* Stacked
* Scaled Series
* Custom Axis Formatting
* Custom tooltips
* Disabling/enabling series


Rickshaw is feature rich
* Scatterplots
* Bar charts
* Mixed charts
* Logarithmic & Absolute Scaling
* Annotations


xkcd.com/418/

2. Design


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


bit.ly/183R6sT

Data to Ink Ratio: Classes


Data to Ink Ratio: Legend Classes


Use only the classes you need
to create the design you want


“Having the data is not enough.
I have to show it in ways
people both enjoy and understand.”
Hans Rosling


Enjoy


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


This is not enjoyment
this is not ﬂow

To maintain ﬂow
Be Defensive

Defensive: Check for errors


Defensive: Quarantine


Defensive: Give Feedback


Being Forgiving

Understand


Numbers or Patterns?

19th Nov 2003
Physical Memory Used: 200

Both?

Comparisons?

Custom Formatted Tooltips


Tooltip Events


Synchronized Tooltips


“You’ve got a good piece of software
when people use it for purposes
it was never intended for.”
Clay Shirky


We Never Expected

Multiple Axis
bit.ly/17lKqn5


Generating a scale


Generating multiple scales


Using the scales


Scaling the axis


xkcd.com/231/

3.Metrics


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


Metrics can be
simple, complex or dynamic

Metrics can be combined

“How do we request graph data for
multiple metrics at once
that can nest many levels deep
and are dynamic?”


Structured as JSON


JSON in a URL


The graph data


xkcd.com/518/

4.Backbone


tabs

graphs


alerting

plugins

graphs

date


graph

graph

graph

options


series

legend

axis

tabs view

graphs view

graph views
options view

dropdown views


Zombies: Cool for fancy dress
Events
and not cool for code
the mediator pattern


Using mediator events


Using Collection Events


Zombies: Cool for fancy dress
not cool for code


Managing Views


Be Defensive

Dealing with time (badly)


Dealing with time


xkcd.com/290/

www.serverdensity.com/
bit.ly/1erNJNz

@byrichardpowell


D3 Rickshaw and Backbone in 50 minutes

Recommended

Recommended

More Related Content

More from Richard Powell

More from Richard Powell (9)

Recently uploaded

Recently uploaded (20)

D3 Rickshaw and Backbone in 50 minutes