Time Series Visualization
with Cubism.js

Mike Bostock
Square, Inc.

Why do we need visualization*?

* for monitoring of production systems

How do we use visualization?

What are the benefits of visualization?

Why is visualization hard?

Or: The strengths & weaknesses of human perception.

Why is visualization hard?

Aspect ratios matter.

Stacking makes middle layers hard to read.

Garish colors can be hard to see.

Make better use of modern browsers.

Horizon Charts

1

Combine position and color to reduce vertical space.

Cubism.js

A small library, not a system.

var context = cubism.context()
    .step(1e4) // ten seconds
    .size(1440); // four hours

cubism.context - Synchronize fetching and rendering.

Why a context?

var graphite = context
    .graphite("http://example.com");

context.graphite - Define a source for Graphite metrics.

var foo = graphite
    .metric("sumSeries(foo.*)")
    .alias("Foo");

graphite.metric - Fetch data from Graphite.

var horizon = context.horizon()
    .metric(foo);

context.horizon - Visualize metrics as horizon charts.

CPU (10s)

Network (10s)

Network (5m)

var c = a.add(b);      // c = a + b
var c = a.subtract(b); // c = a - b
var c = a.multiply(b); // c = a * b
var c = a.divide(b);   // c = a / b

Metrics are composable, even across sources.

var fooLastWeek = foo
    .shift(-7 * 24 * 60 * 60 * 1000);

var fooChange = foo
    .subtract(fooLastWeek)
    .divide(fooLastWeek);

Time-shift metrics to compare against historical data.

body.selectAll(".horizon")
    .data([foo, bar, baz])
  .enter().append("div")
    .attr("class", "horizon")
    .call(horizon);

Cubism is a D3 plugin: data-driven generation.

Why a library (not a GUI)?

square.github.com/cubism

Mike Bostock
Square, Inc.