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.

Next: Sizing the Horizon

Source

<html>
  <head>
    <title>Step Chart</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.1"/>
    <script type="text/javascript" src="../protovis-r3.1.0.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">

      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);

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

      vis.add(pv.Rule)
          .data(y.ticks())
          .visible(function() !(this.index % 2))
          .bottom(function(d) Math.round(y(d)) - .5)
          .strokeStyle(function(d) d ? "#eee" : "#000")
        .anchor("left").add(pv.Label)
          .text(function(d) d.toFixed());

      vis.add(pv.Rule)
          .data(x.ticks())
          .visible(function(d) d > 0)
          .left(function(d) Math.round(x(d)) - .5)
          .strokeStyle("#eee")
        .anchor("bottom").add(pv.Label)
          .text(function(d) d.toFixed());

      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};
  });