Line & Step Charts

View full screen.

Line charts are often used to visualize time series data, encoding the value of a variable over time using position. Typically, linear interpolation is used between samples. However, in some cases, the data does not vary smoothly, but instead changes in response to discrete events.

Using the interpolate property, it is easy to change this behavior for lines and areas. Protovis also supports various nonlinear interpolation methods, including cardinal spline, Catmull-Rom spline, B-spline, and monotone cubic!

Next: Stacked Charts

Source

<html>
  <head>
    <title>Step Chart</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="line.js"></script>
    <style type="text/css">

#fig {
  width: 430px;
  height: 225px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

/* Sizing and scales. */
var w = 400,
    h = 200,
    x = pv.Scale.linear(data, function(d) d.x).range(0, w),
    y = pv.Scale.linear(0, 4).range(0, h);

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(20)
    .left(20)
    .right(10)
    .top(5);

/* X-axis ticks. */
vis.add(pv.Rule)
    .data(x.ticks())
    .visible(function(d) d > 0)
    .left(x)
    .strokeStyle("#eee")
  .add(pv.Rule)
    .bottom(-5)
    .height(5)
    .strokeStyle("#000")
  .anchor("bottom").add(pv.Label)
    .text(x.tickFormat);

/* Y-axis ticks. */
vis.add(pv.Rule)
    .data(y.ticks(5))
    .bottom(y)
    .strokeStyle(function(d) d ? "#eee" : "#000")
  .anchor("left").add(pv.Label)
    .text(y.tickFormat);

/* The line. */
vis.add(pv.Line)
    .data(data)
    .interpolate("step-after")
    .left(function(d) x(d.x))
    .bottom(function(d) y(d.y))
    .lineWidth(3);

vis.render();

    </script>
  </div></div></body>
</html>

Data

var data = pv.range(0, 10, .2).map(function(x) {
    return {x: x, y: Math.sin(x) + Math.random() + 1.5};
  });