Segmented Line

View full screen.

This psychedelic example, reminiscent of an earthworm, demonstrates the difference between a segmented and unsegmented line. Normally, the line width and stroke style of a line are fixed properties: they are evaluated once, and the line is rendered with the given width and color. However, in some visualizations—such as Minard's map of Napleon's march—it is desirable to use a variable width and color to encode additional dimensions of data.

Segmented areas are also possible, allowing the fill color and title tooltip to vary across the area.

Next: Conway's Game of Life

Source

<html>
  <head>
    <title>Segmented Lines</title>
    <link rel="stylesheet" type="text/css" href="ex.css"/>
    <script type="text/javascript" src="../protovis-r3.1.0.js"></script>
    <style type="text/css">
      body {
        background: #222;
        color: #eee;
      }
      #fig {
        width: 700px;
        height: 430px;
      }
    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

      var o = 0, vis = new pv.Panel()
          .width(500)
          .height(200)
          .top(100)
          .bottom(100)
          .left(100)
          .right(100);

      vis.add(pv.Line)
          .segmented(true)
          .data(function() pv.range(0, 6, .1).map(function(d) Math.sin(d + o)))
          .left(function() this.index / 59 * 500)
          .bottom(function(d) (d + 1) / 2 * 200)
          .strokeStyle(function(d) "hsl(" + (d + 1) * 180 + ",60%,50%)")
          .lineWidth(function(d) 50 * (d * d) + 10);

      setInterval(function() { o += 0.02; vis.render(); }, 20);

    </script>
    <p><input checked id="l" onchange="vis.children[0].segmented(this.value)"
    type="checkbox"><label for="l">segmented</label>
  </div></div></body>
</html>

Data

This example has no data, making it a meaningless (though fun) visualization!