Convex Hull
✓ Published0🌍 Public
Aandrew-reid
Last edited Nov 29, 2017
Created on Nov 29, 2017
A hundred points cluster around the center of an SVG canvas, each rendered as a white circle with a yellow stroke. The example computes the convex hull of these points using `d3.polygonHull` and draws it as a blue path with rounded joins. Moving the mouse repositions the first point, and clicking adds new points, both triggering a redraw that updates the hull and re-centers a text label on the polygon’s centroid via `d3.polygonCentroid`. The points are generated with `d3.randomNormal`, and the visualization uses D3 v4 with SVG rendering.
AI-generated descriptionA quick v4 update to this v3 block.
There are a few changes to facilitate the use of a title centered on the convex hull centroid:
// create a polygon
var polygon = d3.polygonHull(vertices.map(function(d) { return d; }) );
// use the polygon to update the convex hull
hull.datum(polygon).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
// also use it to place the text (raise so it stays above new nodes)
text.attr("transform","translate("+d3.polygonCentroid(polygon)+")").raise();