@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/density/DotDensityChart.js

@@ -0,0 +1,250 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PlaneGeometry } from "./PlaneGeometry.js";
+import { Delaunay, group, hierarchy, randomLcg, sum, treemap, treemapSquarify } from "d3";
+// src/charts/density/DotDensityChart.ts
+/** Where the regions come from. */
+var DotRegionLayout = /* @__PURE__ */ function(DotRegionLayout) {
+	DotRegionLayout["Treemap"] = "treemap";
+	DotRegionLayout["Strips"] = "strips";
+	DotRegionLayout["Voronoi"] = "voronoi";
+	return DotRegionLayout;
+}({});
+/** How dots are spread inside a region. */
+var DotPlacement = /* @__PURE__ */ function(DotPlacement) {
+	DotPlacement["Random"] = "random";
+	DotPlacement["BlueNoise"] = "blue-noise";
+	DotPlacement["Lattice"] = "lattice";
+	DotPlacement["Spiral"] = "spiral";
+	return DotPlacement;
+}({});
+var DotShape = /* @__PURE__ */ function(DotShape) {
+	DotShape["Circle"] = "circle";
+	DotShape["Square"] = "square";
+	return DotShape;
+}({});
+var FOOT = 18;
+var GOLDEN = Math.PI * (3 - Math.sqrt(5));
+/** One dot per unit, scattered inside regions. Use it to show counts and mix together, without a map or a choropleth's area bias. */
+var DotDensityChart = class extends Chart2D {
+	static meta = {
+		id: "density-dot-density",
+		name: "Dot density",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Represents amounts as individual dots inside regions, coloured by series, so both totals and mix can be read at once.",
+		tags: [
+			"unit chart",
+			"dot map",
+			"pointillist"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 3),
+		variants: {
+			layout: [
+				"treemap",
+				"strips",
+				"voronoi"
+			],
+			placement: [
+				"blue-noise",
+				"random",
+				"lattice",
+				"spiral"
+			],
+			unit: [
+				4,
+				2,
+				8
+			],
+			dot: ["circle", "square"],
+			outlines: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			region: "category",
+			series: "series",
+			value: "value",
+			unit: 4,
+			layout: "treemap",
+			placement: "blue-noise",
+			dot: "circle",
+			outlines: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 16,
+			bottom: 12,
+			left: 16
+		};
+	}
+	regions(width, height) {
+		const { data, region, value, layout } = this.options;
+		const clean = (data ?? []).filter((row) => Number(row[value]) > 0);
+		const parts = [...group(clean, (row) => String(row[region]))].map(([name, rows]) => ({
+			name,
+			rows,
+			total: sum(rows, (row) => Number(row[value]))
+		}));
+		if (!parts.length) return [];
+		const box = (x0, y0, x1, y1) => [
+			[x0, y0],
+			[x1, y0],
+			[x1, y1],
+			[x0, y1]
+		];
+		if (layout === "strips") return parts.map((part, i) => ({
+			...part,
+			polygon: box(i * width / parts.length, 0, (i + 1) * width / parts.length, height)
+		}));
+		if (layout === "voronoi") {
+			const seeds = parts.map((_, i) => {
+				const r = Math.sqrt((i + .5) / parts.length) * .46, a = i * GOLDEN;
+				return [width * (.5 + r * Math.cos(a)), height * (.5 + r * Math.sin(a))];
+			});
+			const relaxed = PlaneGeometry.relax(seeds, width, height, 2);
+			const voronoi = Delaunay.from(relaxed).voronoi([
+				0,
+				0,
+				width,
+				height
+			]);
+			return parts.map((part, i) => ({
+				...part,
+				polygon: voronoi.cellPolygon(i)?.slice(0, -1) ?? []
+			})).filter((part) => part.polygon.length > 2);
+		}
+		const root = hierarchy({ children: parts }).sum((d) => d.total ?? 0);
+		return treemap().size([width, height]).tile(treemapSquarify)(root).leaves().map((leaf) => ({
+			...leaf.data,
+			polygon: box(leaf.x0, leaf.y0, leaf.x1, leaf.y1)
+		}));
+	}
+	inside(polygon, [x, y]) {
+		return polygon.every(([ax, ay], i) => {
+			const [bx, by] = polygon[(i + 1) % polygon.length];
+			return (bx - ax) * (y - ay) - (by - ay) * (x - ax) >= 0;
+		});
+	}
+	scatter(polygon, count, stream) {
+		const { placement } = this.options;
+		const xs = polygon.map((p) => p[0]), ys = polygon.map((p) => p[1]);
+		const x0 = Math.min(...xs), x1 = Math.max(...xs), y0 = Math.min(...ys), y1 = Math.max(...ys);
+		const uniform = () => {
+			for (let tries = 0; tries < 200; tries++) {
+				const point = [x0 + stream() * (x1 - x0), y0 + stream() * (y1 - y0)];
+				if (this.inside(polygon, point)) return point;
+			}
+			return polygon[0];
+		};
+		if (placement === "random") return Array.from({ length: count }, uniform);
+		if (placement === "blue-noise") {
+			const placed = [];
+			for (let k = 0; k < count; k++) {
+				let best = uniform(), far = -1;
+				for (let c = 0; c < 6; c++) {
+					const candidate = uniform();
+					const gap = placed.reduce((nearest, p) => Math.min(nearest, Math.hypot(p[0] - candidate[0], p[1] - candidate[1])), Number.POSITIVE_INFINITY);
+					if (gap > far) {
+						far = gap;
+						best = candidate;
+					}
+				}
+				placed.push(best);
+			}
+			return placed;
+		}
+		const area = PlaneGeometry.area(polygon);
+		const cx = xs.reduce((a, b) => a + b, 0) / xs.length, cy = ys.reduce((a, b) => a + b, 0) / ys.length;
+		if (placement === "spiral") {
+			const spread = Math.sqrt(area / (Math.PI * count)) * .92, found = [];
+			for (let i = 0; found.length < count && i < count * 12; i++) {
+				const r = spread * Math.sqrt(i + .5), a = i * GOLDEN, point = [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+				if (this.inside(polygon, point)) found.push(point);
+			}
+			return found;
+		}
+		for (let pitch = Math.sqrt(area / count); pitch > .5; pitch *= .95) {
+			const found = [];
+			for (let y = y0 + pitch / 2; y < y1; y += pitch) for (let x = x0 + pitch / 2; x < x1; x += pitch) if (this.inside(polygon, [x, y])) found.push([x, y]);
+			if (found.length >= count) return found.slice(0, count);
+		}
+		return [];
+	}
+	dotPath(points, radius) {
+		const square = this.options.dot === "square";
+		return points.map(([x, y]) => square ? `M${(x - radius).toFixed(1)},${(y - radius).toFixed(1)}h${radius * 2}v${radius * 2}h${-radius * 2}z` : `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("");
+	}
+	draw(ctx) {
+		const { series, value, unit, outlines } = this.options;
+		const { width } = ctx.plot, height = ctx.plot.height - FOOT;
+		const regions = this.regions(width, height);
+		const dotsTotal = sum(regions, (region) => region.total) / unit || 1;
+		const radius = +Math.max(1.1, Math.min(3.5, Math.sqrt(width * height / dotsTotal / Math.PI) * .46)).toFixed(2);
+		const runs = regions.flatMap((region, r) => {
+			const inner = PlaneGeometry.inset(region.polygon, radius + 2);
+			const counts = region.rows.map((row) => Math.max(1, Math.round(Number(row[value]) / unit)));
+			const stream = randomLcg((r + 1) * .0731);
+			const spots = inner.length > 2 ? this.scatter(inner, sum(counts), stream) : [];
+			let cursor = 0;
+			return region.rows.map((row, k) => {
+				const take = spots.slice(cursor, cursor + counts[k]);
+				cursor += counts[k];
+				const name = String(row[series]);
+				return {
+					key: `${region.name}/${name}`,
+					region: region.name,
+					series: name,
+					value: Number(row[value]),
+					count: take.length,
+					d: this.dotPath(take, radius)
+				};
+			});
+		});
+		const shapes = regions.map((region) => ({
+			...region,
+			d: PlaneGeometry.path(region.polygon)
+		}));
+		const edges = ctx.marks("regions", "path", outlines ? shapes : [], (d) => d.name).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(edges, { d: (d) => d.d });
+		const fills = ctx.marks("dots", "path", runs, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series));
+		ctx.set(fills, {
+			d: (d) => d.d,
+			opacity: 1
+		}, {
+			d: (d) => d.d,
+			opacity: 0
+		}, 12);
+		ctx.hover(fills, (d) => ({
+			title: d.region,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value], ["Dots", d.count]]
+		}));
+		const named = outlines ? shapes.filter((d) => this.roomFor(d)) : [];
+		const labels = ctx.marks("region-labels", "text", named, (d) => d.name).attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").attr("font-weight", 600).text((d) => d.name);
+		ctx.text(labels, 11, "ink");
+		ctx.set(labels, {
+			x: (d) => this.anchor(d)[0],
+			y: (d) => this.anchor(d)[1]
+		});
+		const key = ctx.marks("unit-note", "text", regions.length ? [`1 dot = ${unit} units`] : []).attr("text-anchor", "end").text((d) => d);
+		ctx.text(key, 11, "muted");
+		ctx.set(key, {
+			x: width,
+			y: ctx.plot.height - 2
+		});
+	}
+	anchor(region) {
+		const top = region.polygon.reduce((best, p) => p[1] < best[1] || p[1] === best[1] && p[0] < best[0] ? p : best);
+		return this.options.layout === "voronoi" ? [region.polygon.reduce((s, p) => s + p[0], 0) / region.polygon.length - region.name.length * 3, region.polygon.reduce((s, p) => s + p[1], 0) / region.polygon.length + 4] : [top[0] + 5, top[1] + 13];
+	}
+	roomFor(region) {
+		const xs = region.polygon.map((p) => p[0]), ys = region.polygon.map((p) => p[1]);
+		return region.name.length * 6.2 + 12 < Math.max(...xs) - Math.min(...xs) && Math.max(...ys) - Math.min(...ys) > 24;
+	}
+};
+export { DotDensityChart, DotPlacement, DotRegionLayout, DotShape };

package/dist/charts/density/DotLattice.js

@@ -0,0 +1,74 @@
+// src/charts/density/DotLattice.ts
+/** Arrangement of bin centres in a plot. */
+var LatticeKind = /* @__PURE__ */ function(LatticeKind) {
+	LatticeKind["Square"] = "square";
+	LatticeKind["Hexagonal"] = "hexagonal";
+	LatticeKind["Quincunx"] = "quincunx";
+	LatticeKind["Brick"] = "brick";
+	return LatticeKind;
+}({});
+var ROW = {
+	["square"]: 1,
+	["hexagonal"]: Math.sqrt(3) / 2,
+	["quincunx"]: .5,
+	["brick"]: 1
+};
+var SHIFTED = {
+	["square"]: false,
+	["hexagonal"]: true,
+	["quincunx"]: true,
+	["brick"]: true
+};
+/** A regular lattice of bin centres that stays inside the plot and assigns items to their nearest node. */
+var DotLattice = class {
+	kind;
+	step;
+	width;
+	height;
+	rowHeight;
+	rowCount;
+	left;
+	top;
+	constructor(kind, step, width, height) {
+		this.kind = kind;
+		this.step = step;
+		this.width = width;
+		this.height = height;
+		this.rowHeight = step * ROW[kind];
+		this.rowCount = Math.max(1, Math.floor((height - step) / this.rowHeight) + 1);
+		this.left = (width - (this.columnsIn(0) - 1) * step) / 2;
+		this.top = (height - (this.rowCount - 1) * this.rowHeight) / 2;
+	}
+	shift(row) {
+		return SHIFTED[this.kind] && row % 2 ? this.step / 2 : 0;
+	}
+	columnsIn(row) {
+		return Math.max(1, Math.floor((this.width - this.step - this.shift(row)) / this.step) + 1);
+	}
+	/** Every node, with `place`'d items in `members`. */
+	bin(items, place) {
+		const nodes = /* @__PURE__ */ new Map();
+		for (let r = 0; r < this.rowCount; r++) for (let c = 0; c < this.columnsIn(r); c++) nodes.set(`${r}/${c}`, {
+			key: `${r}/${c}`,
+			cx: this.left + this.shift(r) + c * this.step,
+			cy: this.top + r * this.rowHeight,
+			members: []
+		});
+		for (const item of items) nodes.get(this.nearest(place(item))).members.push(item);
+		return [...nodes.values()];
+	}
+	nearest([x, y]) {
+		const center = Math.round((y - this.top) / this.rowHeight);
+		let best = "0/0", closest = Number.POSITIVE_INFINITY;
+		for (let r = Math.max(0, center - 1); r <= Math.min(this.rowCount - 1, center + 1); r++) {
+			const c = Math.max(0, Math.min(this.columnsIn(r) - 1, Math.round((x - this.left - this.shift(r)) / this.step)));
+			const gap = Math.hypot(x - (this.left + this.shift(r) + c * this.step), y - (this.top + r * this.rowHeight));
+			if (gap < closest) {
+				closest = gap;
+				best = `${r}/${c}`;
+			}
+		}
+		return best;
+	}
+};
+export { DotLattice, LatticeKind };

package/dist/charts/density/FieldChart.js

@@ -0,0 +1,58 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { LegendPosition } from "../../core/enums.js";
+import { color } from "d3";
+// src/charts/density/FieldChart.ts
+var STOPS = [
+	.2,
+	.4,
+	.6,
+	.8,
+	1
+];
+/** Shared by density charts: tone mapping, a value ramp in the legend and fade-in reveals. */
+var FieldChart = class FieldChart extends CartesianChart {
+	ramp = [];
+	legendItems() {
+		return this.ramp.length ? this.ramp : super.legendItems();
+	}
+	/** True when magnitude is carried by size alone, so colour chips would say nothing. */
+	get sizeEncoded() {
+		return false;
+	}
+	get legendPosition() {
+		return this.sizeEncoded && !this.options.legend ? LegendPosition.None : super.legendPosition;
+	}
+	clearRamp() {
+		this.ramp = [];
+	}
+	/** A fixed legend for marks that are neither identity nor magnitude. */
+	showKey(items) {
+		this.ramp = items;
+	}
+	/** Legend chips along the sequential scale, labelled with the value they stand for. */
+	showRamp(ctx, top, tone = ctx.palette.sequential, label = (t) => FieldChart.short(t * top)) {
+		this.ramp = top > 0 ? STOPS.map((t) => ({
+			key: `ramp-${t}`,
+			label: label(t),
+			color: tone(t)
+		})) : [];
+	}
+	/** Sets `final` attributes on fresh marks at zero opacity, then fades them in with the stagger. */
+	reveal(ctx, marks, geometry, stagger = 0) {
+		return ctx.set(marks, {
+			...geometry,
+			opacity: 1
+		}, {
+			...geometry,
+			opacity: 0
+		}, stagger);
+	}
+	/** Ink that stays legible on any fill the sequential ramp produces. */
+	inkOn(ctx, fill) {
+		return ctx.palette.inkOn(color(fill)?.formatHex() ?? fill);
+	}
+	static short(value) {
+		return Math.abs(value) >= 100 || Number.isInteger(value) ? `${Math.round(value)}` : value.toPrecision(2);
+	}
+};
+export { FieldChart };

package/dist/charts/density/FieldContours.js

@@ -0,0 +1,56 @@
+import { FieldInterpolation } from "./DensityEnums.js";
+import { contours } from "d3";
+// src/charts/density/FieldContours.ts
+var fixed = (value) => +value.toFixed(1);
+var trace = (points, close) => points.length ? `M${points.map(([x, y]) => `${fixed(x)},${fixed(y)}`).join("L")}${close ? "Z" : ""}` : "";
+/** Extracts contour shapes from a `columns × rows` scalar grid and projects them to pixels. */
+var FieldContours = class {
+	columns;
+	rows;
+	project;
+	generator;
+	filled;
+	/** `project` maps fractional grid coordinates, where cell centres sit on integers, to pixels. */
+	constructor(values, columns, rows, project, interpolation = FieldInterpolation.Smooth) {
+		this.columns = columns;
+		this.rows = rows;
+		this.project = project;
+		this.generator = contours().size([columns, rows]).smooth(interpolation === FieldInterpolation.Smooth);
+		this.filled = Array.from(values, (value) => Number.isFinite(value) ? value : Number.NEGATIVE_INFINITY);
+	}
+	at(level) {
+		const polygons = this.generator.contour(this.filled, level).coordinates;
+		const closed = [], lines = [], polylines = [];
+		for (const polygon of polygons) for (const ring of polygon) {
+			const { columns, rows, project } = this;
+			closed.push(trace(ring.map(([x, y]) => project(Math.max(0, Math.min(columns - 1, x - .5)), Math.max(0, Math.min(rows - 1, y - .5)))), true));
+			for (const run of this.runs(ring)) {
+				polylines.push(run);
+				lines.push(trace(run, false));
+			}
+		}
+		return {
+			area: closed.join(""),
+			line: lines.join(""),
+			polylines
+		};
+	}
+	/** Splits a ring into stretches that stay off the border, rotated to start at a break. */
+	runs(ring) {
+		const { columns, rows, project } = this;
+		const inside = ([x, y]) => x > .5 && y > .5 && x < columns - .5 && y < rows - .5;
+		const open = ring.slice(0, -1);
+		const start = open.findIndex((point) => !inside(point));
+		const walk = start < 0 ? ring : [...open.slice(start), ...open.slice(0, start + 1)];
+		const runs = [];
+		let run = [];
+		for (const point of walk) if (inside(point)) run.push(project(point[0] - .5, point[1] - .5));
+		else {
+			if (run.length > 1) runs.push(run);
+			run = [];
+		}
+		if (run.length > 1) runs.push(run);
+		return runs;
+	}
+};
+export { FieldContours };

package/dist/charts/density/FieldLevels.js

@@ -0,0 +1,66 @@
+import { LevelSpacing } from "./DensityEnums.js";
+import { ascending, descending, format, quantileSorted } from "d3";
+// src/charts/density/FieldLevels.ts
+var SHORT = format(".2~r");
+var RATIO = 1.5;
+var MASS = [
+	.95,
+	.9,
+	.8,
+	.7,
+	.6,
+	.5,
+	.4,
+	.3,
+	.2,
+	.1,
+	.05
+];
+/** Chooses contour thresholds for a scalar field. */
+var FieldLevels = class {
+	static of(values, count, spacing = LevelSpacing.Uniform) {
+		const finite = values.filter(Number.isFinite);
+		if (!finite.length) return [];
+		if (spacing === LevelSpacing.Mass) return this.mass(finite, count);
+		const sorted = [...finite].sort(ascending);
+		const low = sorted[0], high = sorted[sorted.length - 1];
+		if (low === high) return [];
+		const steps = Array.from({ length: count }, (_, i) => (i + 1) / (count + 1));
+		if (spacing === LevelSpacing.Quantile) return this.labelled(steps.map((t) => quantileSorted(sorted, t)));
+		if (spacing === LevelSpacing.Geometric) return this.labelled(steps.map((_, i) => low + (high - low) * (RATIO ** (i + 1) - 1) / (RATIO ** (count + 1) - 1)));
+		return this.labelled(steps.map((t) => low + (high - low) * t));
+	}
+	/** Levels symmetric about zero, for fields with polarity. */
+	static symmetric(values, count, spacing = LevelSpacing.Uniform) {
+		const magnitude = values.filter(Number.isFinite).map(Math.abs);
+		const half = this.of([0, ...magnitude], Math.max(1, Math.floor(count / 2)), spacing).map((level) => level.value);
+		return this.labelled([
+			...half.map((v) => -v).reverse(),
+			0,
+			...half
+		]);
+	}
+	static mass(values, count) {
+		const sorted = [...values].sort(descending);
+		const total = sorted.reduce((sum, value) => sum + value, 0);
+		if (!total) return [];
+		const shares = Array.from({ length: count }, (_, i) => MASS[Math.round(i * (MASS.length - 1) / Math.max(1, count - 1))]).reverse();
+		const levels = [];
+		let running = 0, cursor = 0;
+		for (const share of shares) {
+			while (cursor < sorted.length - 1 && running < share * total) running += sorted[cursor++];
+			levels.push({
+				value: sorted[cursor],
+				label: `${Math.round(share * 100)}%`
+			});
+		}
+		return levels.filter((level, i) => level.value > 0 && level.value !== levels[i - 1]?.value).reverse();
+	}
+	static labelled(values) {
+		return [...new Set(values)].map((value) => ({
+			value,
+			label: SHORT(value)
+		}));
+	}
+};
+export { FieldLevels };

package/dist/charts/density/FilledContour.js

@@ -0,0 +1,90 @@
+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 { FieldChart } from "./FieldChart.js";
+import { FieldLevels } from "./FieldLevels.js";
+import { GridFieldChart } from "./GridFieldChart.js";
+// src/charts/density/FilledContour.ts
+/** Whether levels run from low to high, or mirror outward from zero. */
+var ContourPolarity = /* @__PURE__ */ function(ContourPolarity) {
+	ContourPolarity["Sequential"] = "sequential";
+	ContourPolarity["Diverging"] = "diverging";
+	return ContourPolarity;
+}({});
+/** Paints a surface as stacked bands of equal value. Use it for fast reading of where a field is high or low. */
+var FilledContour = class extends GridFieldChart {
+	static meta = {
+		id: "field-filled-contour",
+		name: "Filled contour",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Grid,
+		description: "Fills the bands between contour levels so a surface reads as regions of magnitude, with signed fields split around zero.",
+		tags: [
+			"contourf",
+			"isoband",
+			"hypsometric",
+			"surface"
+		],
+		sample: (seed) => SampleData.surface(seed, 60),
+		variants: {
+			levels: [
+				8,
+				4,
+				12
+			],
+			spacing: [
+				LevelSpacing.Uniform,
+				LevelSpacing.Quantile,
+				LevelSpacing.Geometric
+			],
+			polarity: ["sequential", "diverging"],
+			interpolation: [FieldInterpolation.Smooth, FieldInterpolation.Stepped],
+			isolines: [false, true],
+			labels: [false, true]
+		},
+		valid: ({ polarity, spacing, isolines, labels }) => !(polarity === "diverging" && spacing === LevelSpacing.Geometric) && !(labels && !isolines)
+	};
+	defaults() {
+		return {
+			levels: 8,
+			spacing: LevelSpacing.Uniform,
+			polarity: "sequential",
+			interpolation: FieldInterpolation.Smooth,
+			isolines: false,
+			labels: false
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { levels, spacing, polarity, interpolation, isolines, labels } = this.options;
+		const field = this.field(), { low, high, reach } = field;
+		const diverging = polarity === "diverging";
+		const steps = diverging ? FieldLevels.symmetric(field.values, levels, spacing) : FieldLevels.of(field.values, levels, spacing);
+		const contours = this.contours(axes, field, interpolation);
+		const fill = (value) => diverging ? ctx.palette.diverging(value / (reach || 1)) : ctx.palette.sequential((value - low) / (high - low || 1));
+		const bands = [...Number.isFinite(low) && high > low ? [{
+			value: low,
+			label: FieldChart.short(low),
+			...contours.at(low - (high - low))
+		}] : [], ...steps.map((level) => ({
+			...level,
+			...contours.at(level.value)
+		}))];
+		const paths = ctx.marks("bands", "path", bands, (d) => d.value).attr("fill", (d) => fill(d.value));
+		this.reveal(ctx, paths, { d: (d) => d.area }, 35);
+		ctx.hover(paths, (d) => ({
+			rows: [[`${this.zName()} from`, d.label]],
+			color: fill(d.value)
+		}));
+		const lines = ctx.marks("isolines", "path", isolines ? bands.slice(1) : [], (d) => d.value).attr("fill", "none").attr("stroke", ctx.theme.surface).attr("stroke-width", 1).attr("stroke-opacity", .7);
+		this.reveal(ctx, lines, { d: (d) => d.line });
+		ContourLabels.draw(ctx, labels ? bands.slice(1).map((d) => ({
+			text: d.label,
+			polylines: d.polylines
+		})) : []);
+		if (diverging) this.fieldRamp(ctx, field);
+		else this.showRamp(ctx, high - low, ctx.palette.sequential, (t) => FieldChart.short(low + t * (high - low)));
+	}
+};
+export { ContourPolarity, FilledContour };