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.