Polygon clipping
d3.polygonHull
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 500]).attr("transform", "scale(1,-1)");
const h = svg
.append("path")
.style("stroke", "lightblue")
.style("fill-opacity", "0.3")
.style("fill", "none");
const p = svg
.append("g")
.selectAll("circle")
.data(points)
.join("circle")
.attr("r", 4)
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.style("fill", "#444");
for (let i = 2; i <= hull.length; i++) {
const visible = hull.slice(0, i);
h.attr("d", `M${visible.join("L")}Z`);
p.style("fill", d => (visible.includes(d) ? "orange" : "#444"));
yield svg.node();
await Promises.delay(200);
}
h.transition().style("fill", "lightblue");
}
points = {
replay;
const m = 10, rng = d3.randomBates(1);
return Array.from({ length: 25 }, () => [rng() * (width - 2 * m) + m, rng() * (500 - 2 * m) + m]);
}
hull = d3.polygonHull(points)
d3.polygonHull([points[0], points[1]])
d3.polygonHull([points[0], points[1], points[1]])
hull.includes(points[0])
points.map(point => hull.includes(point))
morePoints = Array.from({ length: 25 }, function(_,i) {
const pt = [Math.random(), Math.random()];
pt.index = i;
return pt;
})
d3.polygonHull(morePoints).map(d => d.index)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
