@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scatter/CategoryScatterBase.js

@@ -0,0 +1,167 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { Orientation, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { scatterNumber, thinLogTicks } from "./ScatterBase.js";
+import { ascending, extent, group, median, quantile, scaleBand } from "d3";
+// src/charts/scatter/CategoryScatterBase.ts
+var CategorySort = /* @__PURE__ */ function(CategorySort) {
+	CategorySort["Data"] = "data-order";
+	CategorySort["Descending"] = "descending";
+	return CategorySort;
+}({});
+var CategorySummary = /* @__PURE__ */ function(CategorySummary) {
+	CategorySummary["None"] = "no-summary";
+	CategorySummary["Mean"] = "mean";
+	CategorySummary["Median"] = "median";
+	CategorySummary["Box"] = "box";
+	return CategorySummary;
+}({});
+/** One measure across categorical lanes, in either orientation. Children decide each point's spread. */
+var CategoryScatterBase = class extends CartesianChart {
+	defaults() {
+		return {
+			group: "group",
+			value: "value",
+			size: "size",
+			orientation: Orientation.Vertical,
+			scale: ScaleKind.Linear,
+			sort: "data-order",
+			summary: "no-summary",
+			radius: 4
+		};
+	}
+	/** ScatterLane a group sits in; override to merge groups onto one axis. */
+	laneOf(group) {
+		return group;
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	/** Screen coordinates for a value on the measure axis and an offset across its lane. */
+	place(axes, lane, value, offset) {
+		const along = axes.value(value), across = lane.center + offset;
+		return this.vertical ? [across, along] : [along, across];
+	}
+	rows() {
+		const { data, group, value, size, scale } = this.options;
+		return (data ?? []).flatMap((row, index) => {
+			const measure = scatterNumber(row[value]);
+			if (!Number.isFinite(measure) || scale === ScaleKind.Log && measure <= 0) return [];
+			const magnitude = scatterNumber(row[size]);
+			const name = String(row[group] ?? "All");
+			return [{
+				lane: this.laneOf(name),
+				group: name,
+				value: measure,
+				size: Number.isFinite(magnitude) ? magnitude : 0,
+				row,
+				index
+			}];
+		});
+	}
+	order(rows) {
+		const groups = [...group(rows, (row) => row.lane)];
+		if (this.options.sort === "descending") groups.sort((a, b) => (median(b[1], (row) => row.value) ?? 0) - (median(a[1], (row) => row.value) ?? 0));
+		return groups.map(([key]) => key);
+	}
+	scales(ctx) {
+		const rows = this.rows(), { width, height } = ctx.plot;
+		const [low = 0, high = 1] = extent(rows, (row) => row.value);
+		const pad = (high - low) * .05 || Math.abs(high) * .1 || 1;
+		const log = this.options.scale === ScaleKind.Log;
+		const value = Scales.continuous(this.options.scale).domain(log ? [low / 1.1, Math.max(high * 1.1, low * 2)] : [low - pad, high + pad]).range(this.vertical ? [height, 0] : [0, width]);
+		if (!log) value.nice();
+		const band = scaleBand(this.order(rows), this.vertical ? [0, width] : [0, height]).padding(.12);
+		const typed = value;
+		return this.vertical ? {
+			band,
+			value: typed,
+			x: band,
+			y: typed
+		} : {
+			band,
+			value: typed,
+			x: typed,
+			y: band
+		};
+	}
+	tickFormat(scale) {
+		return thinLogTicks(scale, super.tickFormat(scale));
+	}
+	plotMarks(ctx, axes) {
+		const rows = this.rows();
+		if (!this.vertical && this.options.grid !== false) {
+			const ticks = axes.value.ticks(Math.floor(ctx.plot.width / 80));
+			ctx.marks("grid-x", "line", ticks).attr("stroke", ctx.theme.grid).attr("stroke-width", 1).attr("x1", (tick) => axes.value(tick)).attr("x2", (tick) => axes.value(tick)).attr("y1", 0).attr("y2", ctx.plot.height);
+			ctx.group("grid-x").lower();
+		}
+		const lanes = axes.band.domain().map((group) => ({
+			group,
+			points: rows.filter((row) => row.lane === group),
+			center: axes.band(group) + axes.band.bandwidth() / 2,
+			breadth: axes.band.bandwidth()
+		}));
+		this.plotLanes(ctx, axes, lanes);
+		this.drawSummaries(ctx, axes, lanes);
+	}
+	tooltip(ctx, point) {
+		return {
+			title: point.group,
+			color: ctx.palette.color(point.group),
+			rows: [[this.options.value, point.value]]
+		};
+	}
+	drawSummaries(ctx, axes, lanes) {
+		const kind = this.options.summary;
+		const stats = (kind === "no-summary" ? [] : lanes.filter((lane) => lane.points.length)).map((lane) => {
+			const sorted = lane.points.map((point) => point.value).sort(ascending);
+			return {
+				lane,
+				mean: sorted.reduce((a, b) => a + b, 0) / sorted.length,
+				q1: quantile(sorted, .25),
+				median: quantile(sorted, .5),
+				q3: quantile(sorted, .75)
+			};
+		});
+		const half = (lane) => Math.min(lane.breadth * .42, 34);
+		const box = kind === "box" ? stats : [];
+		const frames = ctx.marks("summary-box", "rect", box, (d) => d.lane.group).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", .14).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5).attr("rx", 3);
+		ctx.set(frames, this.vertical ? {
+			x: (d) => d.lane.center - half(d.lane),
+			width: (d) => half(d.lane) * 2,
+			y: (d) => axes.value(d.q3),
+			height: (d) => Math.abs(axes.value(d.q1) - axes.value(d.q3))
+		} : {
+			y: (d) => d.lane.center - half(d.lane),
+			height: (d) => half(d.lane) * 2,
+			x: (d) => axes.value(d.q1),
+			width: (d) => Math.abs(axes.value(d.q3) - axes.value(d.q1))
+		});
+		ctx.hover(frames, (d) => ({
+			title: d.lane.group,
+			rows: [
+				["Q1", +d.q1.toFixed(2)],
+				["Median", +d.median.toFixed(2)],
+				["Q3", +d.q3.toFixed(2)]
+			]
+		}));
+		const at = (d) => axes.value(kind === "mean" ? d.mean : d.median);
+		const bars = ctx.marks("summary-bar", "line", stats, (d) => d.lane.group).attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(bars, this.vertical ? {
+			x1: (d) => d.lane.center - half(d.lane),
+			x2: (d) => d.lane.center + half(d.lane),
+			y1: at,
+			y2: at
+		} : {
+			y1: (d) => d.lane.center - half(d.lane),
+			y2: (d) => d.lane.center + half(d.lane),
+			x1: at,
+			x2: at
+		});
+		ctx.hover(bars, (d) => ({
+			title: d.lane.group,
+			rows: [[kind === "mean" ? "Mean" : "Median", +(kind === "mean" ? d.mean : d.median).toFixed(2)]]
+		}));
+	}
+};
+export { CategoryScatterBase, CategorySort, CategorySummary };

package/dist/charts/scatter/ChangeScatter.js

@@ -0,0 +1,142 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterScaling, scatterNumber } from "./ScatterBase.js";
+// src/charts/scatter/ChangeScatter.ts
+var ChangeStyle = /* @__PURE__ */ function(ChangeStyle) {
+	ChangeStyle["Arrow"] = "arrow";
+	ChangeStyle["Comet"] = "comet";
+	ChangeStyle["Dumbbell"] = "dumbbell";
+	return ChangeStyle;
+}({});
+var ChangePath = /* @__PURE__ */ function(ChangePath) {
+	ChangePath["Straight"] = "straight";
+	ChangePath["Arc"] = "arc";
+	return ChangePath;
+}({});
+/** Before-and-after movement of each entity through two measures. */
+var ChangeScatter = class extends ScatterBase {
+	static meta = {
+		id: "change-scatter",
+		name: "Change scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws each entity moving from a first to a second position across two measures.",
+		tags: [
+			"vector scatter",
+			"arrow plot",
+			"before after",
+			"dumbbell",
+			"movement"
+		],
+		sample: (seed) => {
+			const end = SampleData.points(seed + 1, 22, 3);
+			return SampleData.points(seed, 22, 3).map((row, i) => ({
+				...row,
+				x2: +(+row.x + (+end[i].x - +row.x) * .45 + 6).toFixed(2),
+				y2: +(+row.y + (+end[i].y - +row.y) * .45 + 5).toFixed(2)
+			}));
+		},
+		variants: {
+			style: [
+				"arrow",
+				"comet",
+				"dumbbell"
+			],
+			path: ["straight", "arc"],
+			rebased: [false, true],
+			scaling: [ScatterScaling.Linear, ScatterScaling.LogLog]
+		},
+		valid: (v) => !(v.rebased && v.scaling === ScatterScaling.LogLog) && !(v.style === "comet" && v.path === "arc")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x2: "x2",
+			y2: "y2",
+			style: "arrow",
+			path: "straight",
+			rebased: false
+		};
+	}
+	get xKind() {
+		return this.options.rebased ? ScaleKind.Linear : super.xKind;
+	}
+	get yKind() {
+		return this.options.rebased ? ScaleKind.Linear : super.yKind;
+	}
+	end(point) {
+		const x = scatterNumber(point.row[this.options.x2]), y = scatterNumber(point.row[this.options.y2]);
+		return [Number.isFinite(x) ? x : point.x, Number.isFinite(y) ? y : point.y];
+	}
+	points() {
+		const clean = super.points();
+		return this.options.rebased ? clean.map((point) => ({
+			...point,
+			x: 0,
+			y: 0
+		})) : clean;
+	}
+	delta(point) {
+		const { x, y, x2, y2 } = this.options, change = (to, from) => scatterNumber(point.row[to]) - scatterNumber(point.row[from]);
+		return [change(x2, x) || 0, change(y2, y) || 0];
+	}
+	target(point) {
+		return this.options.rebased ? this.delta(point) : this.end(point);
+	}
+	xValues(points) {
+		return points.flatMap((point) => [point.x, this.target(point)[0]]);
+	}
+	yValues(points) {
+		return points.flatMap((point) => [point.y, this.target(point)[1]]);
+	}
+	arc(d) {
+		const { sx, sy, tx, ty } = d, bend = .22;
+		return `M${sx},${sy}Q${(sx + tx) / 2 - (ty - sy) * bend},${(sy + ty) / 2 + (tx - sx) * bend} ${tx},${ty}`;
+	}
+	comet(d) {
+		const length = Math.hypot(d.tx - d.sx, d.ty - d.sy) || 1, nx = -(d.ty - d.sy) / length, ny = (d.tx - d.sx) / length, half = 4;
+		return `M${d.tx + nx * half},${d.ty + ny * half}L${d.sx},${d.sy}L${d.tx - nx * half},${d.ty - ny * half}A${half},${half} 0 1 0 ${d.tx + nx * half},${d.ty + ny * half}Z`;
+	}
+	plotPoints(ctx, axes, points) {
+		const { style, path } = this.options;
+		const moves = points.map((point) => {
+			const [ex, ey] = this.target(point);
+			return {
+				point,
+				sx: point.px,
+				sy: point.py,
+				tx: axes.x(ex),
+				ty: axes.y(ey),
+				hasEnd: ex !== point.x || ey !== point.y
+			};
+		});
+		const color = (d) => this.hue(ctx, d.point);
+		const comets = style === "comet" ? moves : [];
+		const tails = ctx.marks("comets", "path", comets, (d) => d.point.index).attr("fill", color).attr("fill-opacity", .75);
+		ctx.set(tails, { d: (d) => this.comet(d) });
+		ctx.hover(tails, (d) => this.tooltip(ctx, d.point));
+		const shafts = style === "comet" ? [] : moves;
+		const lines = ctx.marks("shafts", "path", shafts, (d) => d.point.index).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-opacity", style === "dumbbell" ? .45 : .85).attr("stroke-linecap", "round");
+		ctx.set(lines, { d: (d) => path === "arc" ? this.arc(d) : `M${d.sx},${d.sy}L${d.tx},${d.ty}` });
+		ctx.drawOn(lines);
+		ctx.hover(lines, (d) => this.tooltip(ctx, d.point));
+		const arrows = style === "arrow" ? moves.filter((d) => d.hasEnd) : [];
+		const heads = ctx.marks("heads", "path", arrows, (d) => d.point.index).attr("fill", color).attr("d", "M1,0L-7,-4.5L-5,0L-7,4.5Z");
+		ctx.set(heads, { transform: (d) => {
+			const bend = .22, fromX = path === "arc" ? (d.sx + d.tx) / 2 - (d.ty - d.sy) * bend : d.sx, fromY = path === "arc" ? (d.sy + d.ty) / 2 + (d.tx - d.sx) * bend : d.sy;
+			return `translate(${d.tx},${d.ty}) rotate(${Math.atan2(d.ty - fromY, d.tx - fromX) * (180 / Math.PI)})`;
+		} });
+		const starts = style === "dumbbell" || !this.options.rebased ? points : [];
+		this.drawDots(ctx, style === "comet" ? [] : starts, { radius: style === "dumbbell" ? 4 : 2.5 });
+		const ends = style === "dumbbell" ? moves : [];
+		const tips = ctx.marks("ends", "circle", ends, (d) => d.point.index).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(tips, {
+			cx: (d) => d.tx,
+			cy: (d) => d.ty,
+			r: 5
+		});
+		ctx.hover(tips, (d) => this.tooltip(ctx, d.point));
+	}
+};
+export { ChangePath, ChangeScatter, ChangeStyle };

package/dist/charts/scatter/ConnectedScatter.js

@@ -0,0 +1,141 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterScaling, scatterNumber } from "./ScatterBase.js";
+import { ascending, group, line, utcFormat } from "d3";
+// src/charts/scatter/ConnectedScatter.ts
+var ConnectedArrows = /* @__PURE__ */ function(ConnectedArrows) {
+	ConnectedArrows["None"] = "no-arrows";
+	ConnectedArrows["Along"] = "arrows-along";
+	ConnectedArrows["End"] = "arrow-end";
+	return ConnectedArrows;
+}({});
+var ConnectedDotMode = /* @__PURE__ */ function(ConnectedDotMode) {
+	ConnectedDotMode["All"] = "all-dots";
+	ConnectedDotMode["Ends"] = "end-dots";
+	ConnectedDotMode["Sparse"] = "sparse-dots";
+	return ConnectedDotMode;
+}({});
+/** Pair the walks of two series, one x/y path per pair of series. */
+function pairedWalks(seed) {
+	const rows = SampleData.timeSeries(seed, 30, 4);
+	const days = [...group(rows, (row) => +row.date).values()], first = days[0], rebased = (day, i) => +(+day[i].value - +first[i].value + 60).toFixed(2);
+	return days.flatMap((day) => [{
+		date: day[0].date,
+		x: rebased(day, 0),
+		y: rebased(day, 1),
+		group: "Pair A"
+	}, {
+		date: day[0].date,
+		x: rebased(day, 2),
+		y: rebased(day, 3),
+		group: "Pair B"
+	}]);
+}
+/** Two measures traced through time as a path: for loops, reversals and phase shifts a line chart hides. */
+var ConnectedScatter = class extends ScatterBase {
+	static meta = {
+		id: "connected-scatter",
+		name: "Connected scatter",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Joins x/y points in time order to show how two measures move together.",
+		tags: [
+			"phase plot",
+			"trajectory",
+			"time path"
+		],
+		sample: pairedWalks,
+		variants: {
+			curve: [
+				CurveKind.CatmullRom,
+				CurveKind.Linear,
+				CurveKind.Basis,
+				CurveKind.Cardinal
+			],
+			arrows: [
+				"arrows-along",
+				"no-arrows",
+				"arrow-end"
+			],
+			dots: [
+				"sparse-dots",
+				"all-dots",
+				"end-dots"
+			],
+			endLabels: [true, false],
+			scaling: [ScatterScaling.Linear, ScatterScaling.LogLog]
+		},
+		valid: (v) => !(v.curve === CurveKind.Basis && v.dots === "all-dots")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			order: "date",
+			curve: CurveKind.CatmullRom,
+			arrows: "arrows-along",
+			dots: "sparse-dots",
+			endLabels: true
+		};
+	}
+	orderValue(point) {
+		const raw = point.row[this.options.order];
+		return Number.isFinite(scatterNumber(raw)) ? scatterNumber(raw) : point.index;
+	}
+	orderLabel(point) {
+		const raw = point.row[this.options.order];
+		return raw instanceof Date ? utcFormat("%b %-d")(raw) : String(raw ?? point.index);
+	}
+	plotPoints(ctx, _axes, points) {
+		const { curve, arrows, dots, endLabels } = this.options;
+		const paths = [...group(points, (point) => point.group)].map(([key, set]) => ({
+			key,
+			set: [...set].sort((a, b) => ascending(this.orderValue(a), this.orderValue(b)))
+		}));
+		const trace = line().x((d) => d.px).y((d) => d.py).curve(Scales.curve(curve));
+		const lines = ctx.marks("paths", "path", paths, (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.key)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+		ctx.set(lines, { d: (d) => trace(d.set) });
+		ctx.drawOn(lines);
+		const visible = paths.flatMap(({ set }) => set.filter((_, i) => dots === "all-dots" || i === 0 || i === set.length - 1 || dots === "sparse-dots" && i % 6 === 0));
+		this.drawDots(ctx, visible, { radius: this.options.radius - .5 });
+		const heads = paths.flatMap(({ key, set }) => {
+			return (arrows === "no-arrows" ? [] : arrows === "arrow-end" ? [set.length - 1] : set.flatMap((_, i) => i % 6 === 3 ? [i] : [])).flatMap((i) => {
+				const a = set[Math.max(0, i - 1)], b = set[Math.min(set.length - 1, i + (arrows === "arrow-end" ? 0 : 1))];
+				return a && b && a !== b ? [{
+					key,
+					at: i,
+					x: (a.px + b.px) / 2,
+					y: (a.py + b.py) / 2,
+					tip: arrows === "arrow-end" ? b : null,
+					angle: Math.atan2(b.py - a.py, b.px - a.px) * (180 / Math.PI)
+				}] : [];
+			});
+		});
+		const arrow = ctx.marks("arrows", "path", heads, (d) => `${d.key}/${d.at}`).attr("fill", (d) => ctx.palette.color(d.key)).attr("d", "M6,0L-5,-5L-2,0L-5,5Z");
+		ctx.set(arrow, { transform: (d) => `translate(${d.tip?.px ?? d.x},${d.tip?.py ?? d.y}) rotate(${d.angle})` });
+		const ends = endLabels ? paths.flatMap(({ set }) => set.length > 1 ? [set[0], set[set.length - 1]] : []) : [];
+		const taken = [];
+		const tags = ends.flatMap((point) => {
+			const right = point.px < ctx.plot.width - 60;
+			const y = Math.max(10, Math.min(ctx.plot.height - 4, point.py + (point.py < 16 ? 14 : -9)));
+			const x = right ? point.px + 7 : point.px - 7;
+			if (taken.some(([tx, ty]) => Math.abs(tx - x) < 44 && Math.abs(ty - y) < 13)) return [];
+			taken.push([x, y]);
+			return [{
+				point,
+				x,
+				y,
+				right
+			}];
+		});
+		const notes = ctx.marks("end-labels", "text", tags, (d) => d.point.index).attr("text-anchor", (d) => d.right ? "start" : "end").text((d) => this.orderLabel(d.point));
+		ctx.text(notes, 10.5, "secondary");
+		this.halo(notes, ctx);
+		ctx.set(notes, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { ConnectedArrows, ConnectedDotMode, ConnectedScatter };

package/dist/charts/scatter/ContourScatter.js

@@ -0,0 +1,116 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { contourDensity, descending, geoPath, group, max, quantile, range } from "d3";
+// src/charts/scatter/ContourScatter.ts
+var ScatterContourLevels = /* @__PURE__ */ function(ScatterContourLevels) {
+	ScatterContourLevels["Equal"] = "equal-steps";
+	ScatterContourLevels["Highest"] = "highest-density";
+	return ScatterContourLevels;
+}({});
+var ScatterContourPoints = /* @__PURE__ */ function(ScatterContourPoints) {
+	ScatterContourPoints["All"] = "all-points";
+	ScatterContourPoints["Outliers"] = "outliers-only";
+	ScatterContourPoints["None"] = "contours-only";
+	return ScatterContourPoints;
+}({});
+var ScatterContourScope = /* @__PURE__ */ function(ScatterContourScope) {
+	ScatterContourScope["Overall"] = "overall";
+	ScatterContourScope["PerGroup"] = "per-group";
+	return ScatterContourScope;
+}({});
+var HIGHEST = [
+	.95,
+	.8,
+	.5
+];
+var OUTLIER_SHARE = .06;
+/** Scatter underlaid with kernel density contours, or highest-density regions containing fixed shares. */
+var ContourScatter = class extends ScatterBase {
+	static meta = {
+		id: "contour-scatter",
+		name: "Contour scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws density contours over a dense scatter so the shape of the cloud is readable.",
+		tags: [
+			"kernel density",
+			"isodensity",
+			"highest density region",
+			"kde2d"
+		],
+		sample: (seed) => SampleData.points(seed, 320, 3),
+		variants: {
+			bandwidth: [
+				16,
+				10,
+				26
+			],
+			levels: ["equal-steps", "highest-density"],
+			steps: [6, 10],
+			showPoints: [
+				"outliers-only",
+				"all-points",
+				"contours-only"
+			],
+			scope: ["overall", "per-group"]
+		},
+		valid: (v) => v.levels === "equal-steps" || v.steps === 6
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			bandwidth: 16,
+			levels: "equal-steps",
+			steps: 6,
+			showPoints: "outliers-only",
+			scope: "overall",
+			radius: 3
+		};
+	}
+	density(point, set) {
+		const sigma = this.options.bandwidth;
+		return set.reduce((sum, other) => sum + Math.exp(-((point.px - other.px) ** 2 + (point.py - other.py) ** 2) / (2 * sigma ** 2)), 0) / (2 * Math.PI * sigma ** 2);
+	}
+	plotPoints(ctx, _axes, points) {
+		const { bandwidth, levels, steps, showPoints, scope } = this.options, { width, height } = ctx.plot;
+		const perGroup = scope === "per-group";
+		const sets = perGroup ? [...group(points, (point) => point.group)] : points.length ? [["All", points]] : [];
+		const estimator = contourDensity().x((d) => d.px).y((d) => d.py).size([width, height]).bandwidth(bandwidth);
+		const layers = sets.flatMap(([key, set]) => {
+			const field = estimator.contours(set);
+			const own = set.map((point) => this.density(point, set)).sort((a, b) => a - b), top = own[own.length - 1] ?? 1;
+			const levelsAt = levels === "highest-density" ? HIGHEST.map((share) => quantile(own, 1 - share) ?? 0) : range(1, steps + 1).map((i) => top * i / (steps + 1));
+			return levelsAt.map((value, i) => ({
+				id: `${key}/${i}`,
+				key,
+				value,
+				share: (i + 1) / levelsAt.length,
+				level: levels === "highest-density" ? HIGHEST[i] : null,
+				shape: field(value * field.max / top)
+			}));
+		});
+		const peak = max(layers, (layer) => layer.share) ?? 1;
+		const tone = (d) => perGroup ? ctx.palette.color(d.key) : ctx.palette.sequential(.15 + d.share / peak * .75);
+		const shapes = ctx.marks("contours", "path", [...layers].sort((a, b) => descending(b.share, a.share)), (d) => d.id).attr("fill", tone).attr("fill-opacity", perGroup ? .1 : .55).attr("stroke", perGroup ? tone : ctx.theme.surface).attr("stroke-width", perGroup ? 1.5 : 1).attr("stroke-linejoin", "round");
+		ctx.set(shapes, { d: (d) => geoPath()(d.shape) });
+		ctx.hover(shapes, (d) => ({
+			title: d.key,
+			color: tone(d),
+			rows: d.level ? [["Contains", `${Math.round(d.level * 100)}%`]] : [["Density", +d.value.toFixed(5)]]
+		}));
+		const sparsest = sets.flatMap(([, set]) => {
+			return set.map((point) => ({
+				point,
+				density: this.density(point, set)
+			})).sort((a, b) => a.density - b.density).slice(0, Math.ceil(set.length * OUTLIER_SHARE)).map((item) => item.point);
+		});
+		const visible = showPoints === "contours-only" ? [] : showPoints === "all-points" ? points : sparsest;
+		this.drawDots(ctx, visible);
+	}
+	legendItems() {
+		return this.options.scope === "per-group" || this.options.showPoints !== "contours-only" ? super.legendItems() : [];
+	}
+};
+export { ContourScatter, ScatterContourLevels, ScatterContourPoints, ScatterContourScope };