alpha-shapes aka concave hulls in d3

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Alpha-Shapes</title>
    <script src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.geom.min.js"></script>
    <style type="text/css">

path {
  stroke: #000;
  stroke-width: .5px;
  fill: #39c;
}

circle {
  fill: #39c;
}

</style>
  </head>
  <body>
    <script type="text/javascript">

var svg = d3.select("body")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "Blues");

svg.append("g")
  .selectAll("circle")
    .data(vertices)
  .enter().append("circle")
    .attr("r", 3)
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; });
    
svg.append("g")
  .selectAll("path")
    .data(d3.geom.delaunay(offset(vertices,300,0)))
  .enter().append("path")
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

svg.append("g")
  .selectAll("path")
    .data(mesh)
  .enter().append("path")
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

svg.append("g")
  .selectAll("path")
    .data(boundary(mesh))
  .enter().append("path")
    .style("fill", "#fc0")
    .style("fill-opacity", .5)
    .style("stroke-width", 2)
    .attr("d", function(d) { return "M" + d.join("L"); });

// Computes boundaries of connected triangles, given an array of triangles.
function boundary(mesh) {
  var counts = {},
      edges = {},
      r,
      result = [];
  // Traverse the edges of all triangles and discard any edges that appear twice.
  mesh.forEach(function(triangle) {
    for (var i = 0; i < 3; i++) {
      var edge = [triangle[i], triangle[(i + 1) % 3]].sort(ascendingCoords).map(String);
      (edges[edge[0]] = (edges[edge[0]] || [])).push(edge[1]);
      (edges[edge[1]] = (edges[edge[1]] || [])).push(edge[0]);
      var k = edge.join(":");
      if (counts[k]) delete counts[k];
      else counts[k] = 1;
    }
  });
  while (1) {
    var k = null;
    // Pick an arbitrary starting point on a boundary.
    for (k in counts) break;
    if (k == null) break;
    result.push(r = k.split(":").map(function(d) { return d.split(",").map(Number); }));
    delete counts[k];
    var q = r[1];
    while (q[0] !== r[0][0] || q[1] !== r[0][1]) {
      var p = q,
          qs = edges[p.join(",")],
          n = qs.length;
      for (var i = 0; i < n; i++) {
        q = qs[i].split(",").map(Number);
        var edge = [p, q].sort(ascendingCoords).join(":");
        if (counts[edge]) {
          delete counts[edge];
          r.push(q);
          break;
        }
      }
    }
  }
  return result;
}

function ascendingCoords(a, b) {
  return a[0] === b[0] ? b[1] - a[1] : b[0] - a[0];
}
    </script>
  </body>
</html>

Modified http://mbostock.github.com/d3/d3.min.js to a secure url

Modified http://mbostock.github.com/d3/d3.geom.min.js to a secure url

https://mbostock.github.com/d3/d3.min.js

https://mbostock.github.com/d3/d3.geom.min.js