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


Combine position and color to reduce vertical space.


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

context.graphite - Define a source for Graphite metrics.

var foo = graphite

graphite.metric - Fetch data from Graphite.

var horizon = context.horizon()

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

Time-shift metrics to compare against historical data.

    .data([foo, bar, baz])
    .attr("class", "horizon")

Cubism is a D3 plugin: data-driven generation.

Why a library (not a GUI)?


Mike Bostock
Square, Inc.