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;

}

}

}