Skip to content

Instantly share code, notes, and snippets.

Last active February 26, 2019 22:35
Show Gist options
  • Save mbostock/4342190 to your computer and use it in GitHub Desktop.
Save mbostock/4342190 to your computer and use it in GitHub Desktop.
Spline Editor

Click to add new points. Hit the DELETE key to remove the selected point. Use the dropdown menu to change the interpolation mode.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Spline Editor</title>
body {
font: 13px sans-serif;
position: relative;
width: 960px;
height: 500px;
form {
position: absolute;
bottom: 10px;
left: 10px;
rect {
fill: none;
pointer-events: all;
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
circle {
fill: #fff;
fill-opacity: .2;
cursor: move;
.selected {
fill: #ff7f0e;
stroke: #ff7f0e;
<label for="interpolate">Interpolate:</label>
<select id="interpolate"></select><br>
<script src="//"></script>
var width = 960,
height = 500;
var points = d3.range(1, 5).map(function(i) {
return [i * width / 5, 50 + Math.random() * (height - 100)];
var dragged = null,
selected = points[0];
var line = d3.svg.line();
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("tabindex", 1);
.attr("width", width)
.attr("height", height)
.on("mousedown", mousedown);
.attr("class", "line")
.on("mousemove", mousemove)
.on("mouseup", mouseup)
.on("keydown", keydown);"#interpolate")
.on("change", change)
.attr("value", function(d) { return d; })
.text(function(d) { return d; });
function redraw() {"path").attr("d", line);
var circle = svg.selectAll("circle")
.data(points, function(d) { return d; });
.attr("r", 1e-6)
.on("mousedown", function(d) { selected = dragged = d; redraw(); })
.attr("r", 6.5);
.classed("selected", function(d) { return d === selected; })
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; });
if (d3.event) {
function change() {
function mousedown() {
points.push(selected = dragged = d3.mouse(svg.node()));
function mousemove() {
if (!dragged) return;
var m = d3.mouse(svg.node());
dragged[0] = Math.max(0, Math.min(width, m[0]));
dragged[1] = Math.max(0, Math.min(height, m[1]));
function mouseup() {
if (!dragged) return;
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;
Copy link

artyil commented Mar 11, 2015

Hi @mbostock,
thank you very much for all of your work, documentations, tutorials, examples and any other effort made by you to make it possible for developers like me to learn and use the d3 library.

Just wanted to note that it took me hours to find this example and would be great to add a link to it on the appropriate wiki page

Thanks again !!!

Copy link

s2t2 commented Jun 17, 2015

@mbostock I added the "bundle" interpolation method in this fork. I would submit a PR but gist doesn't support them, so instead I'm just commenting in case you wish to update this gist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment