hull1 = {
const h = hull0;
const n = h.length;
if (padding > 0) {
return h.map((p, i1) => {
const i0 = (i1 + n - 1) % n,
i2 = (i1 + 1) % n;
const [x0, y0] = h[i0],
[x1, y1] = h[i1],
[x2, y2] = h[i2];
let dx1 = x1 - x0,
dy1 = y1 - y0,
dx2 = x2 - x1,
dy2 = y2 - y1,
r1 = 1 / Math.hypot(dx1, dy1),
r2 = 1 / Math.hypot(dx2, dy2);
(dx1 *= r1), (dy1 *= r1); // unit vectors
(dx2 *= r2), (dy2 *= r2);
const r = padding / (1 + dx1 * dx2 + dy1 * dy2);
return [x1 - (dy1 + dy2) * r, y1 + (dx1 + dx2) * r];
});
}
if (padding < 0) {
const centroid = d3.polygonCentroid(h);
return d3.polygonHull(h.map((p) =>
d3.interpolate(
p,
centroid
)(
Math.min(
1,
-padding / Math.hypot(centroid[0] - p[0], centroid[1] - p[1])
)
)
));
}
return h
}
xy = {
const x = d3.scaleLinear(
d3.extent(olympians, (d) => d.weight),
[60, 520]
),
y = d3.scaleLinear(
d3.extent(olympians, (d) => d.height),
[310, 40]
);
return olympians
.map((d) => [x(d.weight), y(d.height)])
.filter((d) => d[0] && d[1]);
}
hull0 = d3.polygonHull(xy)
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.
