D3 Examples - Streamgraph

Streamgraph

Streamgraphs are a generalization of stacked area graphs where the baseline is free. By shifting the baseline, it is possible to minimize the change in slope (or “wiggle”) in individual series, thereby making it easier to perceive the thickness of any given layer across the data. Byron & Wattenberg describe several streamgraph algorithms in “Stacked Graphs—Geometry & Aesthetics”, several of which are implemented by pv.Layout.Stack. As additional examples, see stacked graphs of employment and unemployment statistics.

xxxxxxxxxx
 
<html>
  <head>
    <title>Streamgraph</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/protovis/3.3.1/protovis.min.js"></script>
    <script type="text/javascript" src="stream.js"></script>
    <style type="text/css">
​
body {
  margin: 0;
}
​
    </style>
  </head>
  <body>
    <script type="text/javascript+protovis">
​
var n = 20, // number of layers
    m = 400, // number of samples per layer
    data = layers(n, m);
​
var w = document.body.clientWidth,
    h = document.body.clientHeight,
    x = pv.Scale.linear(0, m - 1).range(0, w),
    y = pv.Scale.linear(0, 2 * n).range(0, h);
​
var vis = new pv.Panel()
    .width(w)
    .height(h);
​
vis.add(pv.Layout.Stack)
    .layers(data)
    .order("inside-out")
    .offset("wiggle")
    .x(x.by(pv.index))
    .y(y)
  .layer.add(pv.Area)
    .fillStyle(pv.ramp("#aad", "#556").by(Math.random))
    .strokeStyle(function() this.fillStyle().alpha(.5));
​
vis.render();
​
    </script>
  </body>
</html>
    