@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/demography/NomogramScale.js

@@ -0,0 +1,116 @@
+import { ticks } from "d3";
+// src/charts/demography/NomogramScale.ts
+var ROUNDS = [
+	[1],
+	[2, 5],
+	[
+		3,
+		4,
+		1.5
+	],
+	[
+		6,
+		8,
+		2.5,
+		1.2
+	],
+	[
+		7,
+		9,
+		1.4,
+		1.6,
+		1.8
+	]
+];
+var DIVISIONS = [
+	10,
+	5,
+	4,
+	2
+];
+var FINEST = 4;
+var STOP = 8;
+var tidy = (value) => +value.toPrecision(6);
+/** One functional scale: maps values to a 0..1 place along its rail and graduates it for a given length. */
+var NomogramScale = class {
+	spec;
+	start;
+	span;
+	domain;
+	constructor(spec, start, span) {
+		this.spec = spec;
+		this.start = start;
+		this.span = span;
+		const a = this.value(0), b = this.value(1);
+		this.domain = [Math.min(a, b), Math.max(a, b)];
+	}
+	place(value) {
+		return (this.spec.fn(value) - this.start) / this.span;
+	}
+	value(place) {
+		return this.spec.inverse(this.start + place * this.span);
+	}
+	/** Numbers the roundest values that keep `gap` px apart, then divides between them as finely as `FINEST` px allows. */
+	graduate(length, gap) {
+		const major = this.#linear ? this.#spaced(ticks(...this.domain, Math.max(2, Math.floor(length / gap / 1.4))), length, gap) : this.#spaced(this.spec.values ?? this.#round(), length, gap);
+		const stops = this.#linear ? major : this.#spaced([...major, ...this.#round()], length, STOP);
+		const numbered = new Set(major);
+		return {
+			major,
+			minor: [...stops.filter((value) => !numbered.has(value)), ...this.#divide(stops, length)]
+		};
+	}
+	get #linear() {
+		const [low, high] = this.domain;
+		return Math.abs(this.place((low + high) / 2) - (this.place(low) + this.place(high)) / 2) < 1e-9;
+	}
+	/** Keeps candidates in order of importance while they stay `gap` px from those already kept. */
+	#spaced(candidates, length, gap) {
+		const [low, high] = this.domain;
+		const kept = [];
+		for (const value of candidates) {
+			if (value < low - Math.abs(low) * .001 || value > high + Math.abs(high) * .001) continue;
+			const at = this.place(value) * length;
+			if (kept.every((other) => Math.abs(this.place(other) * length - at) >= gap)) kept.push(value);
+		}
+		return kept.sort((a, b) => a - b);
+	}
+	#round() {
+		const [low, high] = this.domain;
+		const reach = Math.max(Math.abs(low), Math.abs(high)) || 1;
+		const small = Math.min(...[Math.abs(low), Math.abs(high)].filter((value) => value > 0), reach);
+		const top = Math.ceil(Math.log10(reach)), bottom = Math.floor(Math.log10(Math.min(small, reach / 100)));
+		const values = low <= 0 && high >= 0 ? [0] : [];
+		for (const round of ROUNDS) for (let power = top; power >= bottom; power--) for (const mantissa of round) {
+			const value = tidy(mantissa * 10 ** power);
+			values.push(value);
+			if (low < 0) values.push(-value);
+		}
+		return values;
+	}
+	#divide(major, length) {
+		const [low, high] = this.domain;
+		const distance = (a, b) => Math.abs(this.place(a) - this.place(b)) * length;
+		const finest = (a, b) => DIVISIONS.find((parts) => {
+			const stops = Array.from({ length: parts + 1 }, (_, i) => a + (b - a) * i / parts);
+			return stops.slice(1).every((stop, i) => distance(stop, stops[i]) >= FINEST);
+		}) ?? 0;
+		const minor = [];
+		major.slice(1).forEach((b, i) => {
+			const a = major[i], parts = finest(a, b);
+			for (let n = 1; n < parts; n++) minor.push(tidy(a + (b - a) * n / parts));
+		});
+		if (major.length < 2) return minor;
+		const extend = (from, step) => {
+			if (!step) return;
+			for (let value = from + step; value >= low && value <= high && distance(value, value - step) >= FINEST; value += step) minor.push(tidy(value));
+		};
+		const [first, second] = major;
+		const last = major[major.length - 1], before = major[major.length - 2];
+		const opening = finest(first, second), closing = finest(before, last);
+		extend(first, opening ? (first - second) / opening : 0);
+		extend(last, closing ? (last - before) / closing : 0);
+		return minor;
+	}
+};
+export { NomogramScale };

package/dist/charts/demography/NomogramSolver.js

@@ -0,0 +1,73 @@
+import { NomogramRail } from "./NomogramLaw.js";
+import { NomogramScale } from "./NomogramScale.js";
+// src/charts/demography/NomogramSolver.ts
+var clamp = (value) => Math.max(0, Math.min(1, value));
+/**
+* The alignment geometry. Filling a rail of length 1 gives each outer scale the modulus 1/span;
+* collinearity then puts the middle rail at m1/(m1 + m2) of the way across with modulus m1·m2/(m1 + m2).
+*/
+var NomogramSolver = class NomogramSolver {
+	law;
+	scales;
+	/** How far the middle rail sits from the left rail, 0..1. */
+	spacing;
+	constructor(law) {
+		this.law = law;
+		const [leftStart, leftSpan] = NomogramSolver.#extent(law.left.fn, law.left.domain);
+		const [rightStart, rightSpan] = NomogramSolver.#extent(law.right.fn, law.right.domain);
+		this.spacing = rightSpan / (leftSpan + rightSpan);
+		this.scales = {
+			[NomogramRail.Left]: new NomogramScale(law.left, leftStart, leftSpan),
+			[NomogramRail.Middle]: new NomogramScale(law.middle, leftStart + rightStart, leftSpan + rightSpan),
+			[NomogramRail.Right]: new NomogramScale(law.right, rightStart, rightSpan)
+		};
+	}
+	static #extent(fn, [a, b]) {
+		return [Math.min(fn(a), fn(b)), Math.abs(fn(a) - fn(b)) || 1];
+	}
+	/** The rails a person sets, in drawing order. */
+	get inputs() {
+		return [
+			NomogramRail.Left,
+			NomogramRail.Middle,
+			NomogramRail.Right
+		].filter((rail) => rail !== this.law.solve);
+	}
+	/** Completes a line from its two input rails. A result past the end of its rail is held there and the line follows. */
+	complete(line) {
+		const t = this.spacing;
+		let { left, middle, right } = line;
+		if (this.law.solve === NomogramRail.Right) right = clamp((middle - (1 - t) * left) / t);
+		if (this.law.solve === NomogramRail.Left) left = clamp((middle - t * right) / (1 - t));
+		middle = (1 - t) * left + t * right;
+		return {
+			left,
+			middle,
+			right
+		};
+	}
+	/** Reads values into a complete line, or null when an input is missing or impossible on its scale. */
+	fit(values) {
+		const line = {
+			left: .5,
+			middle: .5,
+			right: .5
+		};
+		for (const rail of this.inputs) {
+			const value = values[rail];
+			const place = value == null ? NaN : this.scales[rail].place(value);
+			if (!Number.isFinite(place)) return null;
+			line[rail] = clamp(place);
+		}
+		return this.complete(line);
+	}
+	read(line) {
+		const { scales } = this;
+		return {
+			left: scales.left.value(line.left),
+			middle: scales.middle.value(line.middle),
+			right: scales.right.value(line.right)
+		};
+	}
+};
+export { NomogramSolver };

package/dist/charts/demography/index.js

@@ -0,0 +1,9 @@
+import { LexisCellKind, LexisCells } from "./LexisCells.js";
+import { LexisDiagram, LexisFocus, LexisGuides, LexisPlane } from "./LexisDiagram.js";
+import { NomogramLawKind, NomogramLaws, NomogramRail } from "./NomogramLaw.js";
+import { NomogramScale } from "./NomogramScale.js";
+import { NomogramSolver } from "./NomogramSolver.js";
+import { Nomogram, NomogramIsopleth } from "./Nomogram.js";
+// src/charts/demography/index.ts
+var demographyCatalog = [LexisDiagram, Nomogram];
+export { LexisCellKind, LexisCells, LexisDiagram, LexisFocus, LexisGuides, LexisPlane, Nomogram, NomogramIsopleth, NomogramLawKind, NomogramLaws, NomogramRail, NomogramScale, NomogramSolver, demographyCatalog };

package/dist/charts/density/BinnedDotChart.js

@@ -0,0 +1,109 @@
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DotLattice, LatticeKind } from "./DotLattice.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { max, symbol } from "d3";
+// src/charts/density/BinnedDotChart.ts
+/** One mark sized by count, or many small unit dots filling each bin. */
+var BinnedDotEncoding = /* @__PURE__ */ function(BinnedDotEncoding) {
+	BinnedDotEncoding["Area"] = "area";
+	BinnedDotEncoding["Units"] = "units";
+	return BinnedDotEncoding;
+}({});
+var GOLDEN = Math.PI * (3 - Math.sqrt(5));
+/** A dot matrix of binned counts. Use it where a heatmap's tones are too hard to compare: area is read more precisely. */
+var BinnedDotChart = class extends PointDensityChart {
+	static meta = {
+		id: "density-binned-dot",
+		name: "Binned dot chart",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Snaps points to a lattice and draws one symbol per node, scaled by area or filled with unit dots, so counts compare directly.",
+		tags: [
+			"dot matrix",
+			"bubble grid",
+			"binning"
+		],
+		sample: (seed) => SampleData.points(seed, 700, 3),
+		variants: {
+			bins: [
+				22,
+				14,
+				32
+			],
+			lattice: [
+				LatticeKind.Square,
+				LatticeKind.Hexagonal,
+				LatticeKind.Quincunx
+			],
+			encoding: ["area", "units"],
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond,
+				SymbolKind.Cross
+			],
+			ghosts: [true, false]
+		},
+		valid: ({ encoding, symbol: kind }) => encoding === "area" || kind === SymbolKind.Circle
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			bins: 22,
+			lattice: LatticeKind.Square,
+			symbol: SymbolKind.Circle,
+			encoding: "area",
+			ghosts: true
+		};
+	}
+	get sizeEncoded() {
+		return true;
+	}
+	/** Unit dots spiralled from the bin centre. */
+	spiral(node, dots, radius, spread) {
+		return Array.from({ length: dots }, (_, i) => {
+			const r = spread * Math.sqrt(i + .5), a = i * GOLDEN;
+			const x = node.cx + r * Math.cos(a), y = node.cy + r * Math.sin(a);
+			return `M${(x - radius).toFixed(1)},${y.toFixed(1)}a${radius},${radius} 0 1,0 ${radius * 2},0a${radius},${radius} 0 1,0 ${-radius * 2},0`;
+		}).join("");
+	}
+	drawDensity(ctx, _axes, points) {
+		const { bins, lattice, symbol: kind, encoding, ghosts } = this.options;
+		const { width, height } = ctx.plot;
+		const step = width / bins;
+		const nodes = new DotLattice(lattice, step, width, height).bin(points, (d) => [d.px, d.py]);
+		const filled = nodes.filter((node) => node.members.length);
+		const top = max(filled, (node) => node.members.length) ?? 1;
+		const pitch = lattice === LatticeKind.Quincunx ? step / Math.SQRT2 : step;
+		const room = (pitch * .92) ** 2 * (kind === SymbolKind.Circle ? Math.PI / 4 : .8);
+		const shape = symbol(Scales.symbol(kind));
+		const fill = ctx.palette.sequential(.72);
+		const spare = ctx.marks("ghosts", "circle", ghosts ? nodes.filter((node) => !node.members.length) : [], (d) => d.key).attr("fill", ctx.theme.grid);
+		ctx.set(spare, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: 1.5
+		});
+		const units = encoding === "units";
+		const perDot = Math.max(1, Math.ceil(top / 14));
+		const spread = pitch * .46 / Math.sqrt(Math.ceil(top / perDot));
+		const dotRadius = Math.max(.8, spread * .72);
+		const marks = ctx.marks("bins", "path", filled, (d) => d.key).attr("fill", fill);
+		const draw = (d, size) => units ? this.spiral(d, Math.ceil(d.members.length / perDot), dotRadius, spread) : shape.size(size)();
+		ctx.set(marks, {
+			d: (d) => draw(d, Math.max(6, room * d.members.length / top)),
+			transform: (d) => units ? "translate(0,0)" : `translate(${d.cx.toFixed(1)},${d.cy.toFixed(1)})`
+		}, {
+			d: (d) => draw(d, 1),
+			transform: (d) => units ? "translate(0,0)" : `translate(${d.cx.toFixed(1)},${d.cy.toFixed(1)})`
+		}, 2);
+		ctx.hover(marks, (d) => ({
+			color: fill,
+			rows: [["Points", d.members.length]]
+		}));
+	}
+};
+export { BinnedDotChart, BinnedDotEncoding };

package/dist/charts/density/ContourChart.js

@@ -0,0 +1,112 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ContourLabels } from "./ContourLabels.js";
+import { FieldInterpolation, LevelSpacing } from "./DensityEnums.js";
+import { FieldLevels } from "./FieldLevels.js";
+import { GridFieldChart } from "./GridFieldChart.js";
+import { symbol, symbolTriangle } from "d3";
+// src/charts/density/ContourChart.ts
+/** Reads a scalar field as lines of equal value, like a topographic map. Use it when a surface must be read exactly. */
+var ContourChart = class extends GridFieldChart {
+	static meta = {
+		id: "field-contour",
+		name: "Contour plot",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Grid,
+		description: "Draws lines of equal value across a two-variable surface, so peaks, pits and gradients read at a glance.",
+		tags: [
+			"contour",
+			"isopleth",
+			"topographic",
+			"surface"
+		],
+		sample: (seed) => SampleData.surface(seed, 60),
+		variants: {
+			levels: [
+				9,
+				5,
+				14,
+				20
+			],
+			spacing: [
+				LevelSpacing.Uniform,
+				LevelSpacing.Quantile,
+				LevelSpacing.Geometric
+			],
+			interpolation: [FieldInterpolation.Smooth, FieldInterpolation.Stepped],
+			labels: [true, false],
+			extrema: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			levels: 9,
+			spacing: LevelSpacing.Uniform,
+			interpolation: FieldInterpolation.Smooth,
+			labels: true,
+			extrema: false
+		};
+	}
+	extrema(field) {
+		const { columns, rows, values } = field;
+		const found = [];
+		for (let j = 1; j < rows - 1; j++) for (let i = 1; i < columns - 1; i++) {
+			const value = values[i + j * columns];
+			let high = true, low = true;
+			for (const dj of [
+				-1,
+				0,
+				1
+			]) for (const di of [
+				-1,
+				0,
+				1
+			]) {
+				if (!di && !dj) continue;
+				const next = values[i + di + (j + dj) * columns];
+				high &&= value > next;
+				low &&= value < next;
+			}
+			if (high || low) found.push({
+				i,
+				j,
+				value,
+				peak: high
+			});
+		}
+		return found.sort((a, b) => Math.abs(b.value) - Math.abs(a.value)).slice(0, 4);
+	}
+	plotMarks(ctx, axes) {
+		const { levels, spacing, interpolation, labels, extrema } = this.options;
+		const field = this.field();
+		const contours = this.contours(axes, field, interpolation);
+		const lines = FieldLevels.of(field.values, levels, spacing).map((level) => ({
+			...level,
+			...contours.at(level.value)
+		}));
+		const paths = ctx.marks("lines", "path", lines, (d) => d.value).attr("fill", "none").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke", (d) => this.tone(ctx, field, d.value)).attr("stroke-width", levels > 10 ? 1.25 : 2);
+		this.reveal(ctx, paths, { d: (d) => d.line }, 30);
+		ctx.hover(paths, (d) => ({
+			rows: [[this.zName(), d.label]],
+			color: this.tone(ctx, field, d.value)
+		}));
+		ContourLabels.draw(ctx, labels ? lines.filter((_, i) => levels <= 9 || i % 2 === 0).map((d) => ({
+			text: d.label,
+			polylines: d.polylines
+		})) : []);
+		const project = this.projector(axes);
+		const marker = symbol(symbolTriangle, 90)();
+		const spots = ctx.marks("extrema", "path", extrema ? this.extrema(field) : [], (d) => `${d.i}/${d.j}`).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("paint-order", "stroke").attr("fill", (d) => this.tone(ctx, field, d.value, 1));
+		ctx.set(spots, {
+			d: marker,
+			transform: (d) => `translate(${project(d.i, d.j).join(",")}) rotate(${d.peak ? 0 : 180})`
+		});
+		ctx.hover(spots, (d) => ({
+			title: d.peak ? "Peak" : "Pit",
+			rows: [[this.zName(), d.value.toFixed(3)]]
+		}));
+		this.fieldRamp(ctx, field);
+	}
+};
+export { ContourChart };

package/dist/charts/density/ContourLabels.js

@@ -0,0 +1,41 @@
+// src/charts/density/ContourLabels.ts
+var PAD = 14;
+var SPAN = 3;
+/** Inline contour labels, set along the line and spaced so none collide. */
+var ContourLabels = class {
+	static draw(ctx, sources, name = "contour-labels") {
+		const placed = this.place(sources, ctx.plot);
+		const labels = ctx.marks(name, "text", placed, (d) => d.text).attr("text-anchor", "middle").attr("dy", "0.32em").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").attr("stroke-linejoin", "round").text((d) => d.text);
+		ctx.text(labels, 10, "secondary");
+		ctx.set(labels, {
+			transform: (d) => `translate(${d.x.toFixed(1)},${d.y.toFixed(1)}) rotate(${d.angle.toFixed(1)})`,
+			opacity: 1
+		}, {
+			transform: (d) => `translate(${d.x.toFixed(1)},${d.y.toFixed(1)}) rotate(${d.angle.toFixed(1)})`,
+			opacity: 0
+		});
+	}
+	static place(sources, plot) {
+		const placed = [];
+		for (const { text, polylines } of sources) {
+			const width = text.length * 5.6 + 8;
+			const line = polylines.reduce((best, run) => run.length > best.length ? run : best, []);
+			if (line.length < 7) continue;
+			for (let step = 0; step < 8; step++) {
+				const index = SPAN + Math.floor((step * .382 + .25) % 1 * (line.length - 6 - 1));
+				const [x, y] = line[index], before = line[index - SPAN], after = line[index + SPAN];
+				if (!(x > width / 2 + 2 && x < plot.width - width / 2 - 2 && y > PAD && y < plot.height - PAD) || placed.some((label) => Math.abs(label.x - x) < width + 10 && Math.abs(label.y - y) < 16)) continue;
+				const turn = Math.atan2(after[1] - before[1], after[0] - before[0]) * 180 / Math.PI;
+				placed.push({
+					text,
+					x,
+					y,
+					angle: turn > 90 ? turn - 180 : turn < -90 ? turn + 180 : turn
+				});
+				break;
+			}
+		}
+		return placed;
+	}
+};
+export { ContourLabels };

package/dist/charts/density/ConvexLayers.js

@@ -0,0 +1,140 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { curveBasisClosed, curveCardinalClosed, curveLinearClosed, group, line, mean, polygonHull } from "d3";
+// src/charts/density/ConvexLayers.ts
+var LayerCurve = /* @__PURE__ */ function(LayerCurve) {
+	LayerCurve["Linear"] = "linear";
+	LayerCurve["Cardinal"] = "cardinal";
+	LayerCurve["Basis"] = "basis";
+	return LayerCurve;
+}({});
+var LayerStyle = /* @__PURE__ */ function(LayerStyle) {
+	LayerStyle["Lines"] = "lines";
+	LayerStyle["Filled"] = "filled";
+	return LayerStyle;
+}({});
+var CURVES = {
+	["linear"]: curveLinearClosed,
+	["cardinal"]: curveCardinalClosed,
+	["basis"]: curveBasisClosed
+};
+/** Onion-peels a point cloud into nested hulls. Use it for a robust view of shape, centre and outliers. */
+var ConvexLayers = class extends PointDensityChart {
+	static meta = {
+		id: "density-convex-layers",
+		name: "Convex layers",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Peels a point cloud into nested convex hulls, which reveal its centre, shape and outlying points without assuming a distribution.",
+		tags: [
+			"onion peeling",
+			"convex hull",
+			"depth",
+			"robust statistics"
+		],
+		sample: (seed) => SampleData.points(seed, 180, 3),
+		variants: {
+			depth: [
+				0,
+				8,
+				3
+			],
+			style: ["lines", "filled"],
+			layerCurve: [
+				"linear",
+				"cardinal",
+				"basis"
+			],
+			split: [false, true],
+			sites: [false, true],
+			median: [true, false]
+		},
+		valid: ({ split, depth }) => !(split && depth === 8)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			depth: 0,
+			style: "lines",
+			layerCurve: "linear",
+			split: false,
+			sites: false,
+			median: true
+		};
+	}
+	peel(points, name) {
+		const { depth } = this.options;
+		let rest = this.pixels(points);
+		const rings = [];
+		while (rest.length >= 3 && (!depth || rings.length < depth)) {
+			const hull = polygonHull(rest);
+			if (!hull) break;
+			rings.push(hull);
+			const taken = new Set(hull);
+			rest = rest.filter((point) => !taken.has(point));
+		}
+		return {
+			core: rest.length ? rest : rings[rings.length - 1] ?? [],
+			layers: rings.map((ring, i) => ({
+				key: `${name}/${i}`,
+				name,
+				depth: i,
+				share: (i + 1) / rings.length,
+				ring,
+				inner: rings[i + 1]
+			}))
+		};
+	}
+	drawDensity(ctx, _axes, points) {
+		const { split, style, layerCurve, sites, median } = this.options;
+		const peeled = (split ? [...group(points, (d) => d.group)] : [["", points]]).map(([name, rows]) => ({
+			name,
+			...this.peel([...rows], name)
+		}));
+		const layers = peeled.flatMap((part) => part.layers);
+		const filled = style === "filled";
+		const hue = (d) => d.name ? ctx.palette.color(d.name) : ctx.palette.sequential(.15 + .85 * d.share);
+		const draw = line().curve(CURVES[layerCurve]);
+		const rings = ctx.marks("layers", "path", layers, (d) => d.key).attr("stroke-linejoin", "round").attr("fill-rule", "evenodd").attr("fill", (d) => filled ? hue(d) : "none").attr("fill-opacity", split ? .28 : 1).attr("stroke", (d) => filled ? ctx.theme.surface : hue(d)).attr("stroke-width", filled ? 1 : 1.5);
+		this.reveal(ctx, rings, { d: (d) => filled ? `${draw(d.ring)}${d.inner ? draw(d.inner) : ""}` : draw(d.ring) }, 25);
+		ctx.hover(rings, (d) => ({
+			title: d.name || void 0,
+			color: hue(d),
+			rows: [["Depth", d.depth + 1], ["Hull points", d.ring.length]]
+		}));
+		const dots = ctx.marks("sites", "circle", sites ? points : [], (_, i) => i).attr("fill", ctx.theme.ink).attr("fill-opacity", .7);
+		ctx.set(dots, {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: 2
+		}, {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: 0
+		});
+		ctx.hover(dots, (d) => ({ rows: this.tipRows(d) }));
+		const centres = median ? peeled.filter((part) => part.core.length).map((part) => ({
+			name: part.name,
+			x: mean(part.core, (p) => p[0]),
+			y: mean(part.core, (p) => p[1])
+		})) : [];
+		const cores = ctx.marks("medians", "circle", centres, (d) => d.name).attr("fill", (d) => d.name ? ctx.palette.color(d.name) : ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(cores, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 5
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		});
+		ctx.hover(cores, (d) => ({
+			title: d.name || "Median",
+			rows: [["Deepest layer", "centre"]]
+		}));
+		if (!split) this.showRamp(ctx, 1, (t) => ctx.palette.sequential(.15 + .85 * t), (t) => `${Math.round(t * 100)}%`);
+	}
+};
+export { ConvexLayers, LayerCurve, LayerStyle };