Interactive Concave Hull

Drag the circles (drawn at every vertex) to see the d3.geom.concaveHull algorithm adapt interactively. Also shows an issue with the padding calculation

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Interactive Concave Hulls</title>
<style>

</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="d3.geom.concaveHull.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript">

vertices = d3.range(50).map(function () {return [Math.random() * 500, Math.random() * 500]})

defaultHull = d3.geom.concaveHull().distance(100);
paddedHull = d3.geom.concaveHull().distance(100).padding(25);

colorRamp = d3.scale.linear().domain([0,10]).range(["red", "blue"])

svg = d3.select("body")
  .append("svg")
    .attr("width", 1000)
    .attr("height", 1000);

drag = d3.behavior.drag().on("drag", dragging).on("dragend", dragstop)

svg.selectAll("circle")
  .data(vertices)
  .enter()
  .append("circle")
  .call(drag);

render();

function dragging(d) {
    d[0] = d3.event.x;
    d[1] = d3.event.y;
    render();
  }

function dragstop(d) {
    svg
    .selectAll("path")
      .data(paddedHull(vertices))
      .transition()
      .duration(1000)
      .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
      .style("fill", function (d,i) {return colorRamp(i)})
  }

function render() {

svg
  .selectAll("path")
    .data(defaultHull(vertices))
  .enter().insert("path", "circle")
    .style("fill-opacity", 0.5)
    .style("stroke", "pink")
    .style("stroke-width", "1px");

svg
  .selectAll("path")
    .data(defaultHull(vertices))
  .exit().remove();

d3.selectAll("path")
      .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
      .style("fill", function (d,i) {return colorRamp(i)})

d3.selectAll("circle")
      .attr("cx", function (d) {return d[0]})
      .attr("cy", function (d) {return d[1]})
      .attr("r", 5)
      .style("fill", "blue")

}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js