Published
Edited
Sep 28, 2021
3 stars
Slope ChartQatar Population PyramidSequence LogosCanvas PlotFacet exclusion transformScatterplot matrixThe ARPANET in December 1969Experimental Plot BeeswarmEdit data with PlotPlot: regressionObservable Plot in a Web WorkerSkies PlotPlot early birdPlot: Difference chartPlot: Animate a bar chart (OBSOLETE)Topological subsamplingPlot.stereoHistogramRough PlotHello, olliPlot: Voronoi labelsAoC 12: shortest path under constraintsDistance Angle VoronoiFlight PathsHello, @thi.ng/grid-iteratorsSpotify Pop ArtistsPlot: Radial transformTernary plot
Convex hull mark (#154)
Also listed in…
Plot
Plot.plot({
facet: { data, x: "island" },
marks: [
Plot.frame(),
hull(data, {
x: "body_mass",
y: "bill_length",
fill: "sex",
fillOpacity: 0.2,
curve: "catmull-rom",
alpha: 0.8,
stroke: "black"
}),
Plot.dot(data, { x: "body_mass", y: "bill_length", fill: "sex" })
],
width
})
function hull(data, { curve, tension, alpha, ...options }) {
const L = Plot.line(data, options);
const render = L.render;
const line = d3.line().curve(maybeClosedCurve(curve, { tension, alpha }));
L.render = function () {
const g = render.apply(this, arguments);
d3.select(g)
.selectAll("path")
.each(function () {
const points = this.getAttribute("d")
.replace(/[MZ]/g, "L") // NaN data creates M in the lines (gaps)
.split("L")
.map((d) => d.split(",").map(Number))
.filter((d) => d.length === 2);
if (points.length > 3) {
const hull = d3.polygonHull(points);
this.setAttribute("d", line(hull));
} else this.setAttribute("d", null);
});
return g;
};
return L;
}
function maybeClosedCurve(curve, { tension = 0, alpha = 0.5 }) {
switch (curve) {
case "linear":
case undefined:
case null:
curve = d3.curveLinearClosed;
break;
case "basis":
case "basis-closed":
curve = d3.curveBasisClosed;
break;
case "cardinal":
case "cardinal-closed":
curve = d3.curveCardinalClosed.tension(tension);
break;
case "catmull-rom":
case "catmull-rom-closed":
curve = d3.curveCatmullRomClosed.alpha(alpha);
break;
}
if (typeof curve === "function") return curve;
else throw new Error("unknow curve");
}
import { data } from "@observablehq/plot-exploration-penguins"
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.
