A graphical toolkit for visualization
Protovis
Overview
Examples
Documentation
Download
Index
« Previous / Next »

Spline Editor

View full screen.

This simple editor demonstrates the various methods of spline interpolation supported by Protovis. Drag the control points to see how the shape of the spline changes. Click to add new points, and use the DELETE key to delete the selected control point.

Next: Bubbles

Source

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

#fig {
  width: 900px;
  height: 620px;
}

.header {
  float: right;
  padding-top: 5px;
}

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

var w = 896,
    h = 586,
    i = 3,
    interpolate = "cardinal",
    segmented = false;

var points = pv.range(1, 5).map(function(i) ({
  x: i * w / 5,
  y: 50 + Math.random() * (h - 100)
}));

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .fillStyle("#fff")
    .strokeStyle("#ccc")
    .lineWidth(4)
    .antialias(false)
    .margin(2)
    .event("mousedown", function() (i = points.push(this.mouse()) - 1, this));

vis.add(pv.Line)
    .data(function() points)
    .left(function(d) d.x)
    .top(function(d) d.y)
    .interpolate(function() interpolate)
    .segmented(function() segmented)
    .strokeStyle(pv.Colors.category10().by(pv.index))
    .tension(0.5)
    .lineWidth(2);

vis.add(pv.Dot)
    .data(function() points)
    .left(function(d) d.x)
    .top(function(d) d.y)
    .radius(7)
    .cursor("move")
    .strokeStyle(function() i == this.index ? "#ff7f0e" : "#1f77b4")
    .fillStyle(function() this.strokeStyle().alpha(.2))
    .event("mousedown", pv.Behavior.drag())
    .event("dragstart", function() (i = this.index, this))
    .event("drag", vis);

vis.render();

pv.listen(window, "mousedown", function() self.focus());
pv.listen(window, "keydown", function(e) {
  // code 8 is backspace, code 46 is delete
  if ((e.keyCode == 8 || e.keyCode == 46) && (i >= 0)) {
    points.splice(i--, 1);
    vis.render();
    e.preventDefault();
  }
});

    </script>
    <div class="header">
      <b>Interpolate:</b>
      <select onchange="interpolate = this.value; vis.render();">
        <option value="cardinal" selected>cardinal</option>
        <option value="monotone">monotone</option>
        <option value="basis">basis</option>
        <option value="linear">linear</option>
        <option value="step-before">step-before</option>
        <option value="step-after">step-after</option>
      </select>
      <input id="segmented" type="checkbox" onchange="segmented = this.checked; vis.render()"
      ><label for="segmented"><b>Segmented</b></label>
    </div>
  </div></div></body>
</html>

Data

This example has no real data.
Copyright 2010 Stanford Visualization Group