--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/spline/spline.js	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,113 @@
+var w = 960,
+    h = 500,
+    line = d3.svg.line(),
+    points = d3.range(1, 5).map(function(i) { return [i * w / 5, 50 + Math.random() * (h - 100)]; }),
+    dragged = null,
+    selected = points[0];
+
+var vis = d3.select("#chart").append("svg:svg")
+    .attr("width", w)
+    .attr("height", h);
+
+vis.append("svg:rect")
+    .attr("width", w)
+    .attr("height", h)
+    .on("mousedown", function() {
+      points.push(selected = dragged = d3.svg.mouse(vis.node()));
+      update();
+    });
+
+vis.append("svg:path")
+    .data([points])
+    .attr("class", "line")
+    .call(update);
+
+d3.select(window)
+    .on("mousemove", mousemove)
+    .on("mouseup", mouseup)
+    .on("keydown", keydown);
+
+// Add interpolator dropdown
+d3.select("#interpolate")
+    .on("change", function() {
+      line.interpolate(this.value);
+      update();
+    })
+  .selectAll("option")
+    .data([
+      "linear",
+      "step-before",
+      "step-after",
+      "basis",
+      "basis-open",
+      "basis-closed",
+      "cardinal",
+      "cardinal-open",
+      "cardinal-closed",
+      "monotone"
+    ])
+  .enter().append("option")
+    .attr("value", String)
+    .text(String);
+
+function update() {
+  vis.select("path").attr("d", line);
+
+  var circle = vis.selectAll("circle")
+      .data(points, function(d) { return d; });
+
+  circle.enter().append("svg:circle")
+      .attr("class", function(d) { return d === selected ? "selected" : null; })
+      .attr("cx", function(d) { return d[0]; })
+      .attr("cy", function(d) { return d[1]; })
+      .attr("r", 1e-6)
+      .on("mousedown", function(d) {
+        selected = dragged = d;
+        update();
+      })
+    .transition()
+      .duration(750)
+      .ease("elastic")
+      .attr("r", 6.5);
+
+  circle
+      .attr("class", function(d) { return d === selected ? "selected" : null; })
+      .attr("cx", function(d) { return d[0]; })
+      .attr("cy", function(d) { return d[1]; });
+
+  circle.exit().remove();
+
+  if (d3.event) {
+    d3.event.preventDefault();
+    d3.event.stopPropagation();
+  }
+}
+
+
+function mousemove() {
+  if (!dragged) return;
+  var m = d3.svg.mouse(vis.node());
+  dragged[0] = Math.max(0, Math.min(w, m[0]));
+  dragged[1] = Math.max(0, Math.min(h, m[1]));
+  update();
+}
+
+function mouseup() {
+  if (!dragged) return;
+  mousemove();
+  dragged = null;
+}
+
+function keydown() {
+  if (!selected) return;
+  switch (d3.event.keyCode) {
+    case 8: // backspace
+    case 46: { // delete
+      var i = points.indexOf(selected);
+      points.splice(i, 1);
+      selected = points.length ? points[i > 0 ? i - 1 : 0] : null;
+      update();
+      break;
+    }
+  }
+}