Rainbow Worm

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 flow maps—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.

Source

<html>
  <head>
    <title>Rainbow Worm</title>
    <link rel="stylesheet" type="text/css" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.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!