D3 Examples - Polygon concave hull test

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-concaveHull.js" charset="utf-8" type="text/javascript"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg path {
      fill: rgba(0,0,0,0.3);
      stroke: #bbb;
      stroke-width: 2px;
    }
  </style>
</head>
​
<body>
  <script>
    var width = 960;
    var height = 500;
    var nbPoints = 20;
    var CURVE = d3.curveCardinalClosed.tension(0.3);
    
    // used to generate random coordinates
    function randomPoints(nbPoints, width, height){
      var random = function(min, max){
        return (Math.random() * max) + min;
      }
      var points = [];
      var minX = width * 0.2;
      var maxX = width - minX;
      var minY = height * 0.2;
      var maxY = height - minY;
      
      for(var i = 0; i < nbPoints; i++){
        points.push([Math.floor(random(minX, maxX)), Math.floor(random(minY, maxY))]);
      }
      return points;
    }
    
    // 
    var drawLine = d3.line().curve(CURVE);
    var points = randomPoints(nbPoints, width, height);
    var concaveHull = d3.concaveHull().padding(10);
    var hulls = concaveHull(points); 
    
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    // we draw the polygon's hull
    svg.selectAll('.hulls')
        .data(hulls)
        .enter()
            .append('path').classed('hull', true)
            .attr('d', function(points){ return drawLine(points); })
        
    
    svg.selectAll('.points')
        .data(points)
        .enter()
        .append('circle')
        .attr('cx', (d)=>d[0])
            .attr('cy', (d)=>d[1])
            .attr('r', 5);
​
  </script>
</body>
​
    