@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/multivariate/ParallelPlanes3D.js

@@ -0,0 +1,175 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { InstancedSticks } from "./InstancedSticks.js";
+import { MultivariateMath } from "./MultivariateMath.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideNormal, WideTable } from "./WideTable.js";
+import { ascending, quantile, range, scaleLinear } from "d3";
+import { BufferAttribute, BufferGeometry, DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry } from "three";
+// src/charts/multivariate/ParallelPlanes3D.ts
+var PlaneDepth = /* @__PURE__ */ function(PlaneDepth) {
+	PlaneDepth["Group"] = "group";
+	PlaneDepth["Rank"] = "rank";
+	return PlaneDepth;
+}({});
+var PlaneLayer = /* @__PURE__ */ function(PlaneLayer) {
+	PlaneLayer["Lines"] = "lines";
+	PlaneLayer["Ribbons"] = "ribbons";
+	return PlaneLayer;
+}({});
+/** Pull parallel coordinates apart in depth, so that overlapping classes each get a plane of their own. */
+var ParallelPlanes3D = class extends Chart3D {
+	static meta = {
+		id: "parallel-planes-3d",
+		name: "3D parallel planes",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Separates parallel coordinates into depth planes, one per class or rank, so that overlapping profiles can be told apart.",
+		tags: [
+			"multivariate",
+			"parallel coordinates",
+			"depth",
+			"stacked"
+		],
+		sample: (seed) => MultivariateSample.wide(seed),
+		variants: {
+			layer: ["lines", "ribbons"],
+			depth: ["group", "rank"],
+			normal: [WideNormal.MinMax, WideNormal.Rank],
+			reorder: [false, true]
+		},
+		valid: (values) => values.layer === "lines" || values.depth === "group"
+	};
+	defaults() {
+		return {
+			distance: 5,
+			group: "group",
+			depth: "group",
+			layer: "lines",
+			normal: WideNormal.MinMax,
+			reorder: false
+		};
+	}
+	build(ctx) {
+		const table = new WideTable(this.options.data, this.options.dimensions, this.options.group);
+		const records = table.complete;
+		if (table.dimensions.length < 2 || !records.length) return;
+		const values = table.normalised(this.options.normal, records);
+		const order = this.options.reorder ? MultivariateMath.chain(table.dimensions.map((_, d) => values.map((row) => row[d]))) : range(table.dimensions.length);
+		const x = scaleLinear([0, order.length - 1], [-1, 1]);
+		const y = scaleLinear([0, 1], [-.7, .7]);
+		const byGroup = this.options.depth === "group";
+		const planes = scaleLinear([0, Math.max(1, table.groups.length - 1)], [-.8, .8]);
+		const ranks = [...records.keys()].sort((a, b) => ascending(values[a][order[0]], values[b][order[0]]));
+		const depth = scaleLinear([0, Math.max(1, records.length - 1)], [-.9, .9]);
+		const zOf = records.map((record, i) => byGroup ? planes(table.groups.indexOf(record.group)) : depth(ranks.indexOf(i)));
+		const floor = new Mesh(new PlaneGeometry(2.3, 2.1), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = -.74;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		const zs = byGroup ? table.groups.map((_, g) => planes(g)) : [-.9, .9];
+		const posts = order.flatMap((_, a) => zs.map((z) => ({
+			from: [
+				x(a),
+				-.72,
+				z
+			],
+			to: [
+				x(a),
+				.72,
+				z
+			],
+			color: ctx.theme.axis
+		})));
+		InstancedSticks.add(ctx, posts, .006, false);
+		if (this.options.layer === "lines") {
+			const sticks = records.flatMap((record, i) => order.slice(0, -1).map((d, a) => ({
+				from: [
+					x(a),
+					y(values[i][d]),
+					zOf[i]
+				],
+				to: [
+					x(a + 1),
+					y(values[i][order[a + 1]]),
+					zOf[i]
+				],
+				color: ctx.palette.color(record.group)
+			})));
+			const lines = InstancedSticks.add(ctx, sticks, .009);
+			ctx.pick(lines, (i) => {
+				const record = records[Math.floor(i / (order.length - 1))];
+				return {
+					title: record.group,
+					color: ctx.palette.color(record.group),
+					rows: table.dimensions.map((name, d) => [name, record.values[d]])
+				};
+			});
+		} else this.ribbons(ctx, table, values, order, x, y, planes);
+		order.forEach((d, a) => ctx.label(table.dimensions[d], [
+			x(a),
+			.82,
+			zs[zs.length - 1]
+		], "ink", 11));
+	}
+	ribbons(ctx, table, values, order, x, y, planes) {
+		const records = table.complete;
+		table.groups.forEach((name, g) => {
+			const own = values.filter((_, i) => records[i].group === name);
+			const edge = (d, q) => y(quantile(own.map((row) => row[d]), q) ?? .5);
+			const z = planes(g);
+			const positions = order.flatMap((d, a) => [
+				x(a),
+				edge(d, .25),
+				z,
+				x(a),
+				edge(d, .75),
+				z
+			]);
+			const index = order.slice(0, -1).flatMap((_, a) => [
+				a * 2,
+				a * 2 + 1,
+				a * 2 + 2,
+				a * 2 + 1,
+				a * 2 + 3,
+				a * 2 + 2
+			]);
+			const geometry = new BufferGeometry();
+			geometry.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+			geometry.setIndex(index);
+			geometry.computeVertexNormals();
+			const mesh = new Mesh(geometry, new MeshStandardMaterial({
+				color: ctx.palette.color(name),
+				side: DoubleSide,
+				transparent: true,
+				opacity: .82,
+				roughness: .6
+			}));
+			mesh.castShadow = true;
+			ctx.reveal((progress) => mesh.scale.setY(Math.max(.001, progress)));
+			ctx.root.add(mesh);
+			ctx.pick(mesh, () => ({
+				title: name,
+				color: ctx.palette.color(name),
+				rows: [["Observations", own.length]]
+			}));
+			const medians = order.slice(0, -1).map((d, a) => ({
+				from: [
+					x(a),
+					edge(d, .5),
+					z + .01
+				],
+				to: [
+					x(a + 1),
+					edge(order[a + 1], .5),
+					z + .01
+				],
+				color: ctx.theme.ink
+			}));
+			InstancedSticks.add(ctx, medians, .008);
+		});
+	}
+};
+export { ParallelPlanes3D, PlaneDepth, PlaneLayer };

package/dist/charts/multivariate/PixelBarChart.js

@@ -0,0 +1,201 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { ascending, extent, group, scaleBand, scaleLinear } from "d3";
+// src/charts/multivariate/PixelBarChart.ts
+var PixelFill = /* @__PURE__ */ function(PixelFill) {
+	PixelFill["Rows"] = "rows";
+	PixelFill["Columns"] = "columns";
+	PixelFill["Serpentine"] = "serpentine";
+	return PixelFill;
+}({});
+var PixelSort = /* @__PURE__ */ function(PixelSort) {
+	PixelSort["Sort"] = "sort-column";
+	PixelSort["Value"] = "value";
+	PixelSort["Given"] = "given";
+	return PixelSort;
+}({});
+var PixelBarWidth = /* @__PURE__ */ function(PixelBarWidth) {
+	PixelBarWidth["Equal"] = "equal";
+	PixelBarWidth["Proportional"] = "proportional";
+	return PixelBarWidth;
+}({});
+var finite = (cell) => cell !== null && cell !== void 0 && Number.isFinite(+cell);
+/** A histogram that keeps every row: bar size counts rows while each pixel shows that row's value. */
+var PixelBarChart = class extends Chart2D {
+	static meta = {
+		id: "pixel-bar",
+		name: "Pixel bar chart",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills bars with one pixel per row, ordered by one measure and coloured by another, to show detail inside each aggregate.",
+		tags: [
+			"multivariate",
+			"pixel-oriented",
+			"keim",
+			"dense display"
+		],
+		sample: (seed) => SampleData.points(seed, 800, 4).filter((row, i) => row.group !== "Delta" ? i % 5 !== 0 || row.group === "Alpha" : i % 3 === 0).filter((row, i) => row.group !== "Charlie" || i % 2 === 0),
+		variants: {
+			barWidth: ["equal", "proportional"],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			fill: [
+				"rows",
+				"columns",
+				"serpentine"
+			],
+			order: [
+				"sort-column",
+				"value",
+				"given"
+			]
+		}
+	};
+	defaults() {
+		return {
+			category: "group",
+			sort: "x",
+			value: "y",
+			orientation: Orientation.Vertical,
+			fill: "rows",
+			order: "sort-column",
+			barWidth: "equal"
+		};
+	}
+	get upright() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	plotMargin() {
+		return this.upright ? {
+			top: 6,
+			right: 16,
+			bottom: 34,
+			left: 16
+		} : {
+			top: 6,
+			right: 16,
+			bottom: 22,
+			left: 72
+		};
+	}
+	ordered(rows) {
+		const { order, sort, value } = this.options;
+		if (order === "given") return rows;
+		const key = order === "sort-column" ? sort : value;
+		return [...rows].sort((a, b) => ascending(+(a[key] ?? NaN), +(b[key] ?? NaN)));
+	}
+	/** Sizes bars in plot units so pixels stay square. `breadth` runs across bars, `length` along them. */
+	layout(ctx, groups) {
+		const across = this.upright ? ctx.plot.width : ctx.plot.height, along = this.upright ? ctx.plot.height : ctx.plot.width;
+		const total = groups.reduce((sum, [, rows]) => sum + rows.length, 0), gap = Math.min(16, across / groups.length / 4);
+		const room = across - gap * (groups.length - 1);
+		if (this.options.barWidth === "proportional") {
+			let side = Math.sqrt(room * along / total);
+			const breadthAt = (size) => groups.reduce((sum, [, rows]) => sum + Math.ceil(rows.length / Math.max(1, Math.floor(along / size))) * size, 0);
+			while (breadthAt(side) > room) side *= .98;
+			const perLength = Math.max(1, Math.floor(along / side));
+			let start = 0;
+			return groups.map(([name, rows]) => {
+				const columns = Math.ceil(rows.length / perLength), breadth = columns * side;
+				const bar = {
+					name,
+					rows,
+					start,
+					breadth,
+					length: along,
+					columns,
+					side
+				};
+				start += breadth + gap;
+				return bar;
+			});
+		}
+		const band = scaleBand(groups.map(([name]) => name), [0, across]).paddingInner(gap / (room / groups.length + gap));
+		const largest = Math.max(...groups.map(([, rows]) => rows.length));
+		let side = Math.sqrt(band.bandwidth() * along / largest);
+		const columnsAt = (size) => Math.max(1, Math.floor(band.bandwidth() / size));
+		while (Math.ceil(largest / columnsAt(side)) * side > along) side *= .98;
+		const columns = columnsAt(side);
+		return groups.map(([name, rows]) => ({
+			name,
+			rows,
+			start: band(name),
+			breadth: columns * side,
+			length: Math.ceil(rows.length / columns) * side,
+			columns,
+			side
+		}));
+	}
+	place(bar, i) {
+		const { fill } = this.options;
+		const { columns } = bar;
+		if (fill === "columns") {
+			const perColumn = Math.max(1, Math.floor(bar.length / bar.side));
+			return {
+				u: Math.floor(i / perColumn),
+				v: i % perColumn
+			};
+		}
+		const v = Math.floor(i / columns), u = i % columns;
+		return {
+			u: fill === "serpentine" && v % 2 ? columns - 1 - u : u,
+			v
+		};
+	}
+	draw(ctx) {
+		const { data, category, value } = this.options;
+		const rows = (Array.isArray(data) ? data : []).filter((row) => finite(row[value]));
+		if (!rows.length) return;
+		const bars = this.layout(ctx, [...group(rows, (row) => String(row[category] ?? "Other"))]);
+		const { width, height } = ctx.plot;
+		const [low = 0, high = 1] = extent(rows, (row) => +row[value]);
+		const heat = scaleLinear([low, high === low ? low + 1 : high], [0, 1]);
+		const pixels = bars.flatMap((bar) => {
+			const order = new Map(this.ordered(bar.rows).map((row, i) => [row, i]));
+			return bar.rows.map((row, r) => {
+				const { u, v } = this.place(bar, order.get(row));
+				const across = bar.start + u * bar.side, along = v * bar.side;
+				return {
+					key: `${bar.name}/${r}`,
+					bar,
+					row,
+					side: bar.side,
+					...this.upright ? {
+						x: across,
+						y: height - along - bar.side
+					} : {
+						x: along,
+						y: across
+					}
+				};
+			});
+		});
+		const fill = (d) => ctx.palette.sequential(heat(+d.row[value]));
+		const cells = ctx.marks("pixels", "rect", pixels, (d) => d.key).attr("fill", fill).attr("shape-rendering", "crispEdges");
+		ctx.set(cells, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.side + .2,
+			height: (d) => d.side + .2
+		});
+		ctx.hover(cells, (d) => ({
+			title: d.bar.name,
+			color: fill(d),
+			rows: [[this.options.sort, +d.row[this.options.sort] || 0], [value, +d.row[value]]]
+		}));
+		const labels = ctx.marks("bar-labels", "text", bars, (bar) => bar.name).attr("dy", "0.32em").text((bar) => MultivariateKit.trim(`${bar.name} ${bar.rows.length}`, this.upright ? Math.max(bar.breadth, 56) : 66));
+		ctx.text(labels, 10.5).attr("text-anchor", this.upright ? "middle" : "end");
+		ctx.set(labels, this.upright ? {
+			x: (bar) => bar.start + bar.breadth / 2,
+			y: height + 8
+		} : {
+			x: -6,
+			y: (bar) => bar.start + bar.breadth / 2
+		});
+		const key = 96, x = width - key - 30;
+		MultivariateKit.ramp(ctx, Math.max(40, x), height + (this.upright ? 20 : 10), key, String(+low.toFixed(1)), String(+high.toFixed(1)));
+	}
+};
+export { PixelBarChart, PixelBarWidth, PixelFill, PixelSort };

package/dist/charts/multivariate/ProjectionChart.js

@@ -0,0 +1,55 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { MultivariateKit, ProjectionOverlay } from "./MultivariateKit.js";
+import { WideTable } from "./WideTable.js";
+import { extent, scaleLinear } from "d3";
+// src/charts/multivariate/ProjectionChart.ts
+/** A 2D embedding of many measures on equal-aspect axes, so that distance on screen means distance in the embedding. */
+var ProjectionChart = class extends Chart2D {
+	/** Marks drawn above the point cloud. */
+	annotate(_ctx, _frame, _table, _embedding) {}
+	plotMargin() {
+		return {
+			top: 10,
+			right: 16,
+			bottom: 36,
+			left: 42
+		};
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		const records = table.complete;
+		if (table.dimensions.length < 2 || records.length < 2) return;
+		const embedding = this.embed(table, records);
+		const { width, height } = ctx.plot;
+		const every = [...embedding.points, ...embedding.extra ?? []];
+		const [xLow = 0, xHigh = 1] = extent(every, (p) => p[0]), [yLow = 0, yHigh = 1] = extent(every, (p) => p[1]);
+		const unit = Math.max((xHigh - xLow || 1) / width, (yHigh - yLow || 1) / height) * 1.12;
+		const xMid = (xLow + xHigh) / 2, yMid = (yLow + yHigh) / 2;
+		const x = scaleLinear([xMid - unit * width / 2, xMid + unit * width / 2], [0, width]);
+		const y = scaleLinear([yMid - unit * height / 2, yMid + unit * height / 2], [height, 0]);
+		MultivariateKit.axes(ctx, x, y, {
+			width,
+			height,
+			xLabel: embedding.xLabel,
+			yLabel: embedding.yLabel
+		});
+		const points = embedding.points.map((p, i) => ({
+			x: x(p[0]),
+			y: y(p[1]),
+			record: records[i]
+		}));
+		MultivariateKit.overlay(ctx, points, this.options.overlay ?? ProjectionOverlay.Points, {
+			x: 0,
+			y: 0,
+			width,
+			height
+		});
+		MultivariateKit.dots(ctx, points, (point) => MultivariateKit.tooltip(table, point.record, ctx.palette.color(point.record.group)), height < 220 ? 3.5 : 4.5);
+		this.annotate(ctx, {
+			x,
+			y,
+			points
+		}, table, embedding);
+	}
+};
+export { ProjectionChart };

package/dist/charts/multivariate/RadViz.js

@@ -0,0 +1,89 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { AnchoredProjection } from "./AnchoredProjection.js";
+import { ProjectionOverlay } from "./MultivariateKit.js";
+import { MultivariateMath } from "./MultivariateMath.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideNormal } from "./WideTable.js";
+import { deviation } from "d3";
+// src/charts/multivariate/RadViz.ts
+var RadVizAnchorOrder = /* @__PURE__ */ function(RadVizAnchorOrder) {
+	RadVizAnchorOrder["Given"] = "given";
+	RadVizAnchorOrder["Similarity"] = "similarity";
+	return RadVizAnchorOrder;
+}({});
+var RadVizSpacing = /* @__PURE__ */ function(RadVizSpacing) {
+	RadVizSpacing["Even"] = "even";
+	RadVizSpacing["Spread"] = "spread";
+	return RadVizSpacing;
+}({});
+/** Spring-force projection: read which measures dominate an observation from where it settles on the disc. */
+var RadViz = class extends AnchoredProjection {
+	static meta = {
+		id: "radviz",
+		name: "RadViz",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Hangs each observation from springs tied to anchors on a circle, so it settles nearest the measures it scores highest on.",
+		tags: [
+			"multivariate",
+			"radial coordinates",
+			"spring projection"
+		],
+		sample: (seed) => MultivariateSample.wide(seed),
+		variants: {
+			anchorOrder: ["given", "similarity"],
+			spacing: ["even", "spread"],
+			normal: [WideNormal.MinMax, WideNormal.Rank],
+			overlay: [
+				ProjectionOverlay.Points,
+				ProjectionOverlay.Hulls,
+				ProjectionOverlay.Ellipses,
+				ProjectionOverlay.Contours
+			]
+		}
+	};
+	defaults() {
+		return {
+			group: "group",
+			anchorOrder: "given",
+			spacing: "even",
+			normal: WideNormal.MinMax,
+			overlay: ProjectionOverlay.Points
+		};
+	}
+	project(table, values, radius) {
+		const columns = table.dimensions.map((_, d) => values.map((row) => row[d]));
+		const order = this.options.anchorOrder === "similarity" ? MultivariateMath.chain(columns) : table.dimensions.map((_, d) => d);
+		const weights = order.map((d) => this.options.spacing === "spread" ? deviation(columns[d]) || .01 : 1);
+		const total = weights.reduce((sum, weight) => sum + weight, 0);
+		let cursor = -Math.PI / 2;
+		const anchors = order.map((d, i) => {
+			const angle = cursor;
+			cursor += weights[i] / total * Math.PI * 2;
+			return {
+				name: table.dimensions[d],
+				column: d,
+				angle,
+				x: Math.cos(angle) * radius,
+				y: Math.sin(angle) * radius
+			};
+		});
+		return {
+			anchors,
+			points: values.map((row) => {
+				const pull = anchors.reduce((sum, anchor) => sum + Math.max(0, row[anchor.column]), 0) || 1;
+				return [anchors.reduce((sum, anchor) => sum + Math.max(0, row[anchor.column]) * anchor.x / pull, 0), anchors.reduce((sum, anchor) => sum + Math.max(0, row[anchor.column]) * anchor.y / pull, 0)];
+			})
+		};
+	}
+	guides(ctx, _anchors, radius) {
+		const ring = ctx.marks("ring", "circle", [radius]).attr("fill", "none").attr("stroke", ctx.theme.axis);
+		ctx.set(ring, {
+			cx: 0,
+			cy: 0,
+			r: radius
+		}, { r: 0 });
+	}
+};
+export { RadViz, RadVizAnchorOrder, RadVizSpacing };

package/dist/charts/multivariate/SankeyMultivariate.js

@@ -0,0 +1,178 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { ascending, descending, rollup, sum } from "d3";
+import { sankey } from "d3-sankey";
+// src/charts/multivariate/SankeyMultivariate.ts
+var SankeyNodeSort = /* @__PURE__ */ function(SankeyNodeSort) {
+	SankeyNodeSort["Relaxed"] = "relaxed";
+	SankeyNodeSort["Size"] = "size";
+	SankeyNodeSort["Name"] = "name";
+	return SankeyNodeSort;
+}({});
+var SankeyMeasure = /* @__PURE__ */ function(SankeyMeasure) {
+	SankeyMeasure["Count"] = "count";
+	SankeyMeasure["Value"] = "value";
+	return SankeyMeasure;
+}({});
+/** Turn a table of categorical columns into a flow: how rows move from each column's classes into the next. */
+var SankeyMultivariate = class extends Chart2D {
+	static meta = {
+		id: "sankey-multivariate",
+		name: "Multivariate sankey",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Builds a sankey directly from table columns, with each column a layer and links tracing how rows pass between classes.",
+		tags: [
+			"multivariate",
+			"alluvial",
+			"categorical flow"
+		],
+		sample: (seed) => MultivariateSample.nominal(seed),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			nodeSort: [
+				"relaxed",
+				"size",
+				"name"
+			],
+			measure: ["count", "value"],
+			traced: [true, false],
+			curved: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			value: "value",
+			orientation: Orientation.Horizontal,
+			nodeSort: "relaxed",
+			measure: "count",
+			traced: true,
+			curved: true
+		};
+	}
+	get flat() {
+		return this.options.orientation === Orientation.Horizontal;
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 16,
+			bottom: 8,
+			left: this.flat ? 16 : 62
+		};
+	}
+	columns(rows) {
+		return this.options.dimensions ?? Object.keys(rows[0] ?? {}).filter((name) => rows.every((row) => typeof row[name] === "string" || row[name] == null));
+	}
+	graph(rows, columns) {
+		const { measure, value, traced } = this.options;
+		const weight = (row) => measure === "value" ? Math.abs(+row[value] || 0) : 1;
+		const links = /* @__PURE__ */ new Map();
+		const nodes = /* @__PURE__ */ new Map();
+		for (const row of rows) {
+			const steps = columns.flatMap((column, layer) => row[column] == null ? [] : [{
+				id: `${layer}:${row[column]}`,
+				name: String(row[column]),
+				layer
+			}]);
+			for (const step of steps) nodes.set(step.id, step);
+			const origin = steps[0]?.name ?? "";
+			steps.slice(1).forEach((step, i) => {
+				const source = steps[i].id, key = `${source}>${step.id}>${traced ? origin : ""}`;
+				const link = links.get(key) ?? {
+					source,
+					target: step.id,
+					value: 0,
+					origin: traced ? origin : ""
+				};
+				link.value += weight(row);
+				links.set(key, link);
+			});
+		}
+		return {
+			nodes: [...nodes.values()],
+			links: [...links.values()].filter((link) => link.value > 0)
+		};
+	}
+	draw(ctx) {
+		const rows = Array.isArray(this.options.data) ? this.options.data : [];
+		const columns = this.columns(rows);
+		const input = this.graph(rows, columns);
+		if (!input.links.length) return;
+		const { width, height } = ctx.plot;
+		const head = this.flat ? 16 : 0;
+		const along = this.flat ? width : height, across = this.flat ? height : width;
+		const crowd = Math.max(...columns.map((_, layer) => input.nodes.filter((node) => node.layer === layer).length));
+		const layout = sankey().nodeId((node) => node.id).nodeWidth(11).nodePadding(Math.min(14, (across - head) / (crowd * 3))).extent([[0, head], [along, across]]);
+		const sort = this.options.nodeSort;
+		if (sort === "size") layout.nodeSort((a, b) => descending(a.value ?? 0, b.value ?? 0));
+		if (sort === "name") layout.nodeSort((a, b) => ascending(a.name, b.name));
+		const graph = layout({
+			nodes: input.nodes.map((node) => ({ ...node })),
+			links: input.links.map((link) => ({ ...link }))
+		});
+		const originColor = (name) => name ? ctx.palette.color(name) : ctx.theme.inkMuted;
+		const fill = (link) => originColor(link.origin);
+		const ribbon = (link) => {
+			const half = (link.width ?? 0) / 2, source = link.source, target = link.target;
+			return MultivariateKit.ribbon(source.x1, link.y0 - half, link.y0 + half, target.x0, link.y1 - half, link.y1 + half, this.options.curved, !this.flat);
+		};
+		const key = (link) => `${link.source.id}>${link.target.id}>${link.origin}`;
+		const links = ctx.marks("links", "path", graph.links, key).attr("fill", fill).attr("fill-opacity", .45);
+		ctx.set(links, { d: ribbon }, {}, 2);
+		ctx.hover(links, (link) => ({
+			title: `${link.source.name} → ${link.target.name}`,
+			color: fill(link),
+			rows: [["Flow", Math.round(link.value)], ...link.origin ? [["From", link.origin]] : []]
+		}));
+		const nodes = ctx.marks("nodes", "rect", graph.nodes, (node) => node.id).attr("fill", ctx.theme.inkSecondary).attr("rx", 2);
+		ctx.set(nodes, this.flat ? {
+			x: (n) => n.x0,
+			width: (n) => n.x1 - n.x0,
+			y: (n) => n.y0,
+			height: (n) => Math.max(1, n.y1 - n.y0)
+		} : {
+			y: (n) => n.x0,
+			height: (n) => n.x1 - n.x0,
+			x: (n) => n.y0,
+			width: (n) => Math.max(1, n.y1 - n.y0)
+		});
+		ctx.hover(nodes, (node) => ({
+			title: node.name,
+			rows: [[columns[node.layer] ?? "", Math.round(node.value ?? 0)]]
+		}));
+		this.drawLabels(ctx, graph.nodes, columns, along);
+	}
+	drawLabels(ctx, nodes, columns, along) {
+		const flat = this.flat;
+		const end = (n) => n.x0 > along * .6;
+		const fits = (n) => flat ? n.y1 - n.y0 >= 12 : n.y1 - n.y0 >= n.name.length * 6.2;
+		const labels = ctx.marks("labels", "text", nodes.filter(fits), (node) => node.id).attr("dy", "0.32em").text((node) => node.name);
+		MultivariateKit.halo(ctx.text(labels, 10.5, "ink"), ctx).attr("text-anchor", (n) => flat ? end(n) ? "end" : "start" : "middle");
+		ctx.set(labels, flat ? {
+			x: (n) => end(n) ? n.x0 - 4 : n.x1 + 4,
+			y: (n) => (n.y0 + n.y1) / 2
+		} : {
+			x: (n) => (n.y0 + n.y1) / 2,
+			y: (n) => end(n) ? n.x0 - 8 : n.x1 + 9
+		});
+		const heads = [...rollup(nodes, (own) => own[0].x0, (node) => node.layer)].map(([layer, at]) => ({
+			name: columns[layer] ?? "",
+			at
+		}));
+		const last = sum(heads, () => 1) - 1;
+		const names = ctx.marks("axis-names", "text", heads, (d) => d.name).attr("font-weight", 600).attr("dy", "0.32em").text((d) => d.name);
+		ctx.text(names, 11, "ink").attr("text-anchor", (_, i) => flat ? i === last ? "end" : i === 0 ? "start" : "middle" : "end");
+		ctx.set(names, flat ? {
+			x: (d, i) => d.at + (i === last ? 11 : i === 0 ? 0 : 5),
+			y: 6
+		} : {
+			x: -6,
+			y: (d) => d.at + 5
+		});
+	}
+};
+export { SankeyMeasure, SankeyMultivariate, SankeyNodeSort };