D3 Examples - Interactive Concave Hull

xxxxxxxxxx
 
​
<!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>
    