@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/pictorial/PictogramChart.js

@@ -0,0 +1,120 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PictorialIcon } from "./PictorialIcons.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { UnitChart } from "./UnitChart.js";
+import { ascending, descending, rollup } from "d3";
+// src/charts/pictorial/PictogramChart.ts
+var PictogramRounding = /* @__PURE__ */ function(PictogramRounding) {
+	PictogramRounding["Partial"] = "partial";
+	PictogramRounding["Whole"] = "whole";
+	return PictogramRounding;
+}({});
+var PictogramSort = /* @__PURE__ */ function(PictogramSort) {
+	PictogramSort["Input"] = "input";
+	PictogramSort["Descending"] = "descending";
+	PictogramSort["Ascending"] = "ascending";
+	return PictogramSort;
+}({});
+/** A bar chart counted in icons: use it when the unit itself carries meaning for a general audience. */
+var PictogramChart = class extends UnitChart {
+	static meta = {
+		id: "pictogram",
+		name: "Pictogram",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares category totals as rows of repeated icons, each icon worth a stated number of units.",
+		tags: [
+			"pictograph",
+			"icon bar",
+			"unit chart"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			rounding: ["partial", "whole"],
+			sort: [
+				"input",
+				"descending",
+				"ascending"
+			],
+			track: [false, true],
+			icon: [
+				PictorialIcon.Person,
+				PictorialIcon.Drop,
+				PictorialIcon.House,
+				PictorialIcon.Tree,
+				PictorialIcon.Car
+			]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			orientation: Orientation.Horizontal,
+			rounding: "partial",
+			sort: "input",
+			track: false,
+			icon: PictorialIcon.Person
+		};
+	}
+	tallies() {
+		const { data, category, value, sort } = this.options;
+		const rows = [...rollup(data, (rows) => rows.reduce((sum, row) => sum + Math.max(0, Number(row[value] ?? 0) || 0), 0), (row) => String(row[category] ?? "—"))].map(([name, total]) => ({
+			category: name,
+			value: total
+		}));
+		if (sort === "descending") rows.sort((a, b) => descending(a.value, b.value));
+		if (sort === "ascending") rows.sort((a, b) => ascending(a.value, b.value));
+		return rows;
+	}
+	draw(ctx) {
+		const { rounding, track, icon, orientation } = this.options;
+		const tallies = this.tallies();
+		if (!tallies.length) return;
+		const horizontal = orientation === Orientation.Horizontal;
+		const { width, height } = ctx.plot;
+		const gutter = horizontal ? Math.min(width * .3, Math.max(...tallies.map((d) => TextMetrics.width(d.category, 11))) + 10) : 0;
+		const foot = horizontal ? 18 : 32;
+		const across = (horizontal ? height - foot : width) / tallies.length;
+		const along = horizontal ? width - gutter - 44 : height - foot - 18;
+		const largest = Math.max(...tallies.map((d) => d.value));
+		const unit = this.unitFor(largest, Math.floor(along / Math.max(10, Math.min(across * .86, 26))));
+		const whole = rounding === "whole";
+		const counted = (value) => whole ? Math.round(value / unit) : value / unit;
+		const span = Math.max(1, Math.ceil(counted(largest)));
+		const size = Math.min(across * .86, along / span);
+		const fill = ctx.palette.color(this.options.value);
+		const start = (index) => across * index + (across - size) / 2;
+		const icons = tallies.flatMap((tally, index) => {
+			const amount = counted(tally.value), slots = track ? span : Math.ceil(amount);
+			return Array.from({ length: slots }, (_, i) => {
+				const part = Math.max(0, Math.min(1, amount - i));
+				return {
+					key: `${tally.category}/${i}`,
+					icon,
+					size,
+					fill,
+					part,
+					ghost: part === 0,
+					x: horizontal ? gutter + i * size : start(index),
+					y: horizontal ? start(index) : height - foot - (i + 1) * size,
+					tip: {
+						title: tally.category,
+						color: fill,
+						rows: [[this.options.value, tally.value], ["Icons", +(tally.value / unit).toFixed(2)]]
+					}
+				};
+			});
+		});
+		this.drawIcons(ctx, "icons", icons);
+		const labels = ctx.marks("labels", "text", tallies, (d) => d.category).attr("x", (_, i) => horizontal ? gutter - 8 : across * (i + .5)).attr("y", (_, i) => horizontal ? across * (i + .5) + 4 : height - foot + 14).attr("text-anchor", horizontal ? "end" : "middle").text((d) => TextMetrics.clip(d.category, 11, horizontal ? gutter - 8 : across - 4));
+		ctx.text(labels);
+		const totals = ctx.marks("totals", "text", tallies, (d) => d.category).attr("x", (d, i) => horizontal ? gutter + (track ? span : Math.ceil(counted(d.value))) * size + 6 : across * (i + .5)).attr("y", (d, i) => horizontal ? across * (i + .5) + 4 : height - foot - (track ? span : Math.ceil(counted(d.value))) * size - 5).attr("text-anchor", horizontal ? "start" : "middle").text((d) => d.value.toLocaleString("en"));
+		ctx.text(totals, 11, "ink");
+		this.drawUnitKey(ctx, unit, icon, fill, width, height - 3);
+	}
+};
+export { PictogramChart, PictogramRounding, PictogramSort };

package/dist/charts/pictorial/PictorialIcons.js

@@ -0,0 +1,30 @@
+// src/charts/pictorial/PictorialIcons.ts
+var PictorialIcon = /* @__PURE__ */ function(PictorialIcon) {
+	PictorialIcon["Person"] = "person";
+	PictorialIcon["Dot"] = "dot";
+	PictorialIcon["Square"] = "square";
+	PictorialIcon["Drop"] = "drop";
+	PictorialIcon["Heart"] = "heart";
+	PictorialIcon["House"] = "house";
+	PictorialIcon["Tree"] = "tree";
+	PictorialIcon["Car"] = "car";
+	PictorialIcon["Leaf"] = "leaf";
+	PictorialIcon["Bolt"] = "bolt";
+	PictorialIcon["Star"] = "star";
+	return PictorialIcon;
+}({});
+/** Silhouettes drawn in a 24 × 24 box. */
+var ICON_PATHS = {
+	["person"]: "M12 1.5a4 4 0 1 1 0 8a4 4 0 1 1 0-8ZM7.5 11h9a2.5 2.5 0 0 1 2.5 2.5V19a1 1 0 0 1-1 1h-1v2.5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V20H6a1 1 0 0 1-1-1v-5.5a2.5 2.5 0 0 1 2.5-2.5Z",
+	["dot"]: "M12 2.5a9.5 9.5 0 1 1 0 19a9.5 9.5 0 1 1 0-19Z",
+	["square"]: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z",
+	["drop"]: "M12 1.5C12 1.5 4.5 10 4.5 15a7.5 7.5 0 0 0 15 0C19.5 10 12 1.5 12 1.5Z",
+	["heart"]: "M12 21.5C5 16 1.5 12.5 1.5 8.2a5.2 5.2 0 0 1 10.5-1.7a5.2 5.2 0 0 1 10.5 1.7c0 4.3-3.5 7.8-10.5 13.3Z",
+	["house"]: "M12 2 1.5 11.5H5V21a1 1 0 0 0 1 1h4v-6.5h4V22h4a1 1 0 0 0 1-1v-9.5h3.5Z",
+	["tree"]: "M12 1.5 5.5 9.5h3L4 15.5h6V22.5h4V15.5h6l-4.5-6h3Z",
+	["car"]: "M5 10.5 6.7 5.8A2.5 2.5 0 0 1 9 4.2h6a2.5 2.5 0 0 1 2.3 1.6L19 10.5a2.5 2.5 0 0 1 2.5 2.5v4.5a1 1 0 0 1-1 1h-1.3a2.7 2.7 0 0 1-5.2 0h-4a2.7 2.7 0 0 1-5.2 0H3.5a1 1 0 0 1-1-1V13a2.5 2.5 0 0 1 2.5-2.5Z",
+	["leaf"]: "M4 21C3 9.5 10 3.5 21.5 2.5C22 13.5 16 20.5 7 19.5L4 21Z",
+	["bolt"]: "M13.5 1.5 4 13.5h6.5L9.5 22.5 20 9.5h-6.7Z",
+	["star"]: "M12 2 15 8.5 22 9.3 16.8 14.1 18.2 21 12 17.5 5.8 21 7.2 14.1 2 9.3 9 8.5Z"
+};
+export { ICON_PATHS, PictorialIcon };

package/dist/charts/pictorial/PolarGlyphMatrix.js

@@ -0,0 +1,200 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { arc, curveLinearClosed, descending, lineRadial, max, rollup, select, sum } from "d3";
+// src/charts/pictorial/PolarGlyphMatrix.ts
+var PolarGlyphKind = /* @__PURE__ */ function(PolarGlyphKind) {
+	PolarGlyphKind["Rose"] = "rose";
+	PolarGlyphKind["Pie"] = "pie";
+	PolarGlyphKind["Rings"] = "rings";
+	PolarGlyphKind["Radar"] = "radar";
+	return PolarGlyphKind;
+}({});
+var PolarGlyphSweep = /* @__PURE__ */ function(PolarGlyphSweep) {
+	PolarGlyphSweep["Full"] = "full";
+	PolarGlyphSweep["Half"] = "half";
+	return PolarGlyphSweep;
+}({});
+var PolarGlyphScale = /* @__PURE__ */ function(PolarGlyphScale) {
+	PolarGlyphScale["Shared"] = "shared";
+	PolarGlyphScale["PerCell"] = "per-cell";
+	return PolarGlyphScale;
+}({});
+var TAU = Math.PI * 2;
+/** Rows × columns of tiny polar charts: compare a cyclic or part-to-whole profile across two factors. */
+var PolarGlyphMatrix = class extends Chart2D {
+	static meta = {
+		id: "polar-glyph-matrix",
+		name: "Polar glyph matrix",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Places a small rose, pie or radar in every cell of a matrix to compare profiles across two factors.",
+		tags: [
+			"small multiples",
+			"rose",
+			"pie matrix",
+			"glyph"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 48, 4).map((row) => {
+			const day = Math.round((+row.date - Date.UTC(2026, 0, 1)) / 864e5);
+			return {
+				row: row.series,
+				column: `Week ${Math.floor(day / 8) + 1}`,
+				slice: `Day ${day % 8 + 1}`,
+				value: row.value
+			};
+		}),
+		variants: {
+			kind: [
+				"rose",
+				"pie",
+				"rings",
+				"radar"
+			],
+			sweep: ["full", "half"],
+			scale: ["shared", "per-cell"],
+			hub: [0, .3],
+			ranked: [false, true]
+		},
+		valid: ({ kind, scale }) => kind !== "pie" || scale === "shared"
+	};
+	defaults() {
+		return {
+			row: "row",
+			column: "column",
+			slice: "slice",
+			value: "value",
+			kind: "rose",
+			sweep: "full",
+			scale: "shared",
+			hub: 0,
+			ranked: false
+		};
+	}
+	cells() {
+		const { data, row, column, slice, value, ranked } = this.options;
+		const amount = (entry) => Math.max(0, Number(entry[value] ?? 0) || 0);
+		const grouped = rollup(data, (rows) => rows, (entry) => String(entry[row] ?? "—"), (entry) => String(entry[column] ?? "—"));
+		const columns = [...new Set(data.map((entry) => String(entry[column] ?? "—")))];
+		let rows = [...grouped.keys()];
+		if (ranked) {
+			const total = (name) => sum([...grouped.get(name).values()].flat(), amount);
+			rows = rows.sort((a, b) => descending(total(a), total(b)));
+		}
+		const cells = rows.flatMap((name, r) => columns.flatMap((col, c) => {
+			const members = grouped.get(name)?.get(col);
+			if (!members) return [];
+			return [{
+				row: name,
+				column: col,
+				x: c,
+				y: r,
+				slices: [...rollup(members, (group) => sum(group, amount), (entry) => String(entry[slice] ?? "—"))].map(([key, total]) => ({
+					slice: key,
+					value: total
+				}))
+			}];
+		}));
+		return {
+			rows,
+			columns,
+			cells
+		};
+	}
+	drawCell(ctx, group, cell, radius, top) {
+		const { kind, sweep, scale, hub } = this.options;
+		const span = sweep === "half" ? Math.PI : TAU, start = sweep === "half" ? -Math.PI / 2 : 0;
+		const n = cell.slices.length || 1;
+		const local = max(cell.slices, (d) => d.value) || 1;
+		const peak = scale === "shared" ? top : local;
+		const inner = radius * hub;
+		const honest = (value) => Math.sqrt(inner ** 2 + (radius ** 2 - inner ** 2) * (value / peak));
+		const wedge = arc().padRadius(radius);
+		const total = sum(cell.slices, (d) => d.value) || 1;
+		let cursor = start;
+		const parts = cell.slices.map((d, i) => {
+			const color = ctx.palette.sequential(.25 + .7 * (d.value / top));
+			if (kind === "pie") {
+				const startAngle = cursor, endAngle = cursor + d.value / total * span;
+				cursor = endAngle;
+				return {
+					d: wedge({
+						innerRadius: inner,
+						outerRadius: radius,
+						startAngle,
+						endAngle,
+						padAngle: .04
+					}) ?? "",
+					color,
+					datum: d
+				};
+			}
+			if (kind === "rings") {
+				const band = (radius - inner) / n;
+				return {
+					d: wedge({
+						innerRadius: inner + i * band,
+						outerRadius: inner + (i + 1) * band - .6,
+						startAngle: start,
+						endAngle: start + d.value / peak * span
+					}) ?? "",
+					color,
+					datum: d
+				};
+			}
+			return {
+				d: wedge({
+					innerRadius: inner,
+					outerRadius: honest(d.value),
+					startAngle: start + i / n * span,
+					endAngle: start + (i + 1) / n * span,
+					padAngle: .05
+				}) ?? "",
+				color,
+				datum: d
+			};
+		});
+		const radar = kind === "radar";
+		const wedges = ctx.marks("wedges", "path", radar ? [] : parts, (d) => d.datum.slice, group).attr("d", (d) => d.d).attr("fill", (d) => d.color);
+		ctx.hover(wedges, (d) => ({
+			title: `${cell.row} · ${cell.column}`,
+			color: d.color,
+			rows: [[d.datum.slice, d.datum.value]]
+		}));
+		const outline = lineRadial().angle((_, i) => start + i / n * span).radius((d) => inner + (radius - inner) * (d.value / peak));
+		const open = sweep === "half";
+		const shape = radar ? [(open ? outline : outline.curve(curveLinearClosed))(cell.slices) ?? ""] : [];
+		const line = ctx.marks("radar", "path", shape, (_, i) => i, group).attr("d", String).attr("fill", open ? "none" : ctx.palette.color(cell.row)).attr("fill-opacity", .25).attr("stroke", ctx.palette.color(cell.row)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.hover(line, () => ({
+			title: `${cell.row} · ${cell.column}`,
+			color: ctx.palette.color(cell.row),
+			rows: cell.slices.map((d) => [d.slice, d.value])
+		}));
+	}
+	/** Only the radar outlines use row identity; the other kinds shade by magnitude. */
+	legendItems() {
+		return this.options.kind === "radar" ? super.legendItems() : [];
+	}
+	draw(ctx) {
+		const { rows, columns, cells } = this.cells();
+		if (!cells.length) return;
+		const left = Math.min(ctx.plot.width * .2, Math.max(...rows.map((name) => TextMetrics.width(name, 11))) + 10), head = 16;
+		const cellWidth = (ctx.plot.width - left) / columns.length, cellHeight = (ctx.plot.height - head) / rows.length;
+		const half = this.options.sweep === "half";
+		const radius = Math.max(4, half ? Math.min(cellWidth / 2, cellHeight * .82) - 3 : Math.min(cellWidth, cellHeight) / 2 - 3);
+		const top = max(cells.flatMap((cell) => cell.slices), (d) => d.value) || 1;
+		const place = (d, scale = 1) => `translate(${left + cellWidth * (d.x + .5)},${head + cellHeight * d.y + (half ? cellHeight * .5 + radius * .46 : cellHeight / 2)}) scale(${scale})`;
+		const groups = ctx.marks("cells", "g", cells, (d) => `${d.row}/${d.column}`);
+		ctx.set(groups, { transform: (d) => place(d) }, { transform: (d) => place(d, 0) }, 8);
+		const chart = this;
+		groups.each(function(cell) {
+			chart.drawCell(ctx, select(this), cell, radius, top);
+		});
+		ctx.text(ctx.marks("row-labels", "text", rows, String).attr("x", left - 8).attr("y", (_, i) => head + cellHeight * (i + .5) + 4).attr("text-anchor", "end").text((d) => TextMetrics.clip(d, 11, left - 8)));
+		const step = Math.max(1, Math.ceil(Math.max(...columns.map((name) => TextMetrics.width(name, 11))) / cellWidth + .1));
+		ctx.text(ctx.marks("column-labels", "text", columns.filter((_, i) => i % step === 0), String).attr("x", (d) => left + cellWidth * (columns.indexOf(d) + .5)).attr("y", 10).attr("text-anchor", "middle").text(String));
+	}
+};
+export { PolarGlyphKind, PolarGlyphMatrix, PolarGlyphScale, PolarGlyphSweep };

package/dist/charts/pictorial/SankeyText.js

@@ -0,0 +1,250 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Corpus } from "./Corpus.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { ascending, descending, forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY, max, path, scaleLinear } from "d3";
+import { sankey, sankeyCenter, sankeyJustify, sankeyLeft, sankeyLinkHorizontal, sankeyRight } from "d3-sankey";
+// src/charts/pictorial/SankeyText.ts
+var PhraseLayout = /* @__PURE__ */ function(PhraseLayout) {
+	PhraseLayout["Flow"] = "flow";
+	PhraseLayout["Bipartite"] = "bipartite";
+	PhraseLayout["Arcs"] = "arcs";
+	PhraseLayout["Net"] = "net";
+	return PhraseLayout;
+}({});
+var PhraseAlign = /* @__PURE__ */ function(PhraseAlign) {
+	PhraseAlign["Justify"] = "justify";
+	PhraseAlign["Left"] = "left";
+	PhraseAlign["Right"] = "right";
+	PhraseAlign["Center"] = "center";
+	return PhraseAlign;
+}({});
+var PhraseOrder = /* @__PURE__ */ function(PhraseOrder) {
+	PhraseOrder["Frequency"] = "frequency";
+	PhraseOrder["Alphabetical"] = "alphabetical";
+	return PhraseOrder;
+}({});
+/** Connector value that pairs consecutive content words. */
+var ANY_WORD = "any-word";
+var ALIGN = {
+	["justify"]: sankeyJustify,
+	["left"]: sankeyLeft,
+	["right"]: sankeyRight,
+	["center"]: sankeyCenter
+};
+/** Phrase net: the graph of "X connector Y" in a text, drawn as a sankey, arcs or a force net. */
+var SankeyText = class extends Chart2D {
+	static meta = {
+		id: "sankey-text",
+		name: "Phrase net",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Links words that a chosen connector joins in the text, with link weight showing how often each pair occurs.",
+		tags: [
+			"phrase net",
+			"word graph",
+			"text sankey",
+			"bigram"
+		],
+		sample: (seed) => Corpus.sample(seed, 120),
+		variants: {
+			layout: [
+				"flow",
+				"bipartite",
+				"arcs",
+				"net"
+			],
+			connector: [
+				"of",
+				"and",
+				ANY_WORD
+			],
+			align: [
+				"justify",
+				"left",
+				"right",
+				"center"
+			],
+			order: ["frequency", "alphabetical"]
+		},
+		valid: ({ layout, connector, align, order }) => (layout === "flow" && connector !== "any-word" || align === "justify") && (layout !== "net" || order === "frequency")
+	};
+	defaults() {
+		return {
+			text: "text",
+			connector: "of",
+			layout: "flow",
+			align: "justify",
+			order: "frequency",
+			limit: 16
+		};
+	}
+	/** "X the? connector the? Y", ignoring the articles between the words. */
+	pairs() {
+		const { text, connector, limit } = this.options;
+		const counts = /* @__PURE__ */ new Map();
+		const add = (source, target) => {
+			if (source === target) return;
+			const key = `${source}\u0000${target}`;
+			const hit = counts.get(key);
+			if (hit) hit.value += 1;
+			else counts.set(key, {
+				source,
+				target,
+				value: 1
+			});
+		};
+		for (const tokens of Corpus.sentences(this.options.data, text)) {
+			const content = tokens.map((token, i) => ({
+				token,
+				i
+			})).filter(({ token }) => !Corpus.isStop(token));
+			for (let n = 0; n + 1 < content.length; n++) {
+				const left = content[n], right = content[n + 1];
+				if (connector === "any-word" || tokens.slice(left.i + 1, right.i).includes(connector)) add(left.token, right.token);
+			}
+		}
+		return [...counts.values()].sort((a, b) => b.value - a.value || ascending(a.source + a.target, b.source + b.target)).slice(0, limit);
+	}
+	/** Drops the weakest links that would close a cycle, which a sankey cannot draw. */
+	acyclic(pairs) {
+		const edges = /* @__PURE__ */ new Map();
+		const reaches = (from, goal, seen = /* @__PURE__ */ new Set()) => {
+			if (from === goal) return true;
+			if (seen.has(from)) return false;
+			seen.add(from);
+			return [...edges.get(from) ?? []].some((next) => reaches(next, goal, seen));
+		};
+		return pairs.filter(({ source, target }) => {
+			if (reaches(target, source)) return false;
+			edges.set(source, (edges.get(source) ?? /* @__PURE__ */ new Set()).add(target));
+			return true;
+		});
+	}
+	terms(pairs) {
+		const counts = /* @__PURE__ */ new Map();
+		for (const { source, target, value } of pairs) for (const id of [source, target]) counts.set(id, (counts.get(id) ?? 0) + value);
+		const list = [...counts].map(([id, count]) => ({
+			id,
+			word: id.replace(/^[<>]/, ""),
+			count
+		}));
+		return this.options.order === "alphabetical" ? list.sort((a, b) => ascending(a.word, b.word)) : list.sort((a, b) => descending(a.count, b.count) || ascending(a.word, b.word));
+	}
+	drawSankey(ctx, pairs) {
+		const { width, height } = ctx.plot;
+		const flows = this.options.layout === "bipartite" ? pairs.map((pair) => ({
+			...pair,
+			source: `<${pair.source}`,
+			target: `>${pair.target}`
+		})) : this.acyclic(pairs);
+		const terms = this.terms(flows);
+		const rank = new Map(terms.map((term, i) => [term.id, i]));
+		const inset = Math.min(width * .2, Math.max(...terms.map((term) => TextMetrics.width(term.word, 11))) + 8);
+		const { nodes, links } = sankey().nodeId((d) => d.id).nodeWidth(10).nodePadding(Math.max(4, Math.min(12, height / (terms.length * 2)))).extent([[inset, 2], [width - inset, height - 2]]).nodeAlign(ALIGN[this.options.align]).nodeSort((a, b) => rank.get(a.id) - rank.get(b.id))({
+			nodes: terms.map((term) => ({ ...term })),
+			links: flows.map((pair) => ({ ...pair }))
+		});
+		const path = sankeyLinkHorizontal();
+		const color = (d) => ctx.palette.sequential(.3 + .6 * (d.count / (max(terms, (term) => term.count) || 1)));
+		const ribbons = ctx.marks("ribbons", "path", links, (d) => `${d.source.id}>${d.target.id}`).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-opacity", .42).attr("stroke-width", (d) => Math.max(1, d.width ?? 1)).attr("d", (d) => path(d));
+		ctx.drawOn(ribbons);
+		ctx.hover(ribbons, (d) => ({
+			title: `${d.source.word} → ${d.target.word}`,
+			rows: [["Occurrences", d.value]]
+		}));
+		const bars = ctx.marks("nodes", "rect", nodes, (d) => d.id).attr("fill", color).attr("rx", 2);
+		ctx.set(bars, {
+			x: (d) => d.x0,
+			y: (d) => d.y0,
+			width: (d) => d.x1 - d.x0,
+			height: (d) => Math.max(2, d.y1 - d.y0)
+		}, { height: 0 });
+		ctx.hover(bars, (d) => ({
+			title: d.word,
+			color: color(d),
+			rows: [["Occurrences", d.count]]
+		}));
+		const middle = width / 2;
+		const legible = nodes.filter((node, i) => !nodes.some((other, j) => j < i && other.x0 === node.x0 && Math.abs(other.y0 + other.y1 - (node.y0 + node.y1)) / 2 < 12));
+		const labels = ctx.marks("labels", "text", legible, (d) => d.id).attr("x", (d) => d.x0 < middle ? d.x0 - 6 : d.x1 + 6).attr("y", (d) => (d.y0 + d.y1) / 2 + 4).attr("text-anchor", (d) => d.x0 < middle ? "end" : "start").text((d) => TextMetrics.clip(d.word, 11, inset - 8));
+		ctx.text(labels, 11, "ink").attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("stroke-linejoin", "round");
+	}
+	drawArcs(ctx, pairs) {
+		const { width, height } = ctx.plot;
+		const terms = this.terms(pairs);
+		const base = height - 38;
+		const tilted = width / Math.max(1, terms.length) < 44;
+		const x = scaleLinear([0, Math.max(1, terms.length - 1)], [tilted ? 38 : 26, width - (tilted ? 10 : 26)]);
+		const spot = new Map(terms.map((term, i) => [term.id, x(i)]));
+		const top = max(pairs, (pair) => pair.value) || 1, peak = max(terms, (term) => term.count) || 1;
+		const curve = (pair) => {
+			const from = spot.get(pair.source), to = spot.get(pair.target), r = Math.abs(to - from) / 2;
+			const rise = Math.min(r, base - 6);
+			const context = path();
+			context.moveTo(from, base);
+			context.bezierCurveTo(from, base - rise * 1.33, to, base - rise * 1.33, to, base);
+			return context.toString();
+		};
+		const arcs = ctx.marks("arcs", "path", pairs, (pair) => `${pair.source}>${pair.target}`).attr("fill", "none").attr("stroke", (pair) => ctx.palette.sequential(.3 + .6 * (pair.value / top))).attr("stroke-width", (pair) => 1 + 3 * (pair.value / top)).attr("d", curve);
+		ctx.drawOn(arcs);
+		ctx.hover(arcs, (pair) => ({
+			title: `${pair.source} → ${pair.target}`,
+			rows: [["Occurrences", pair.value]]
+		}));
+		const dots = ctx.marks("dots", "circle", terms, (term) => term.id).attr("fill", (term) => ctx.palette.sequential(.3 + .6 * (term.count / peak))).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (term) => spot.get(term.id),
+			cy: base,
+			r: 5
+		}, { r: 0 });
+		ctx.hover(dots, (term) => ({
+			title: term.word,
+			rows: [["Occurrences", term.count]]
+		}));
+		const labels = ctx.marks("labels", "text", terms, (term) => term.id).attr("text-anchor", tilted ? "end" : "middle").text((term) => TextMetrics.clip(term.word, 11, tilted ? 46 : width / Math.max(1, terms.length) - 4)).attr("transform", (term) => `translate(${spot.get(term.id) + (tilted ? 3 : 0)},${base + 12}) rotate(${tilted ? -40 : 0})`);
+		ctx.text(labels);
+	}
+	drawNet(ctx, pairs) {
+		const { width, height } = ctx.plot;
+		const terms = this.terms(pairs);
+		const peak = max(terms, (term) => term.count) || 1, top = max(pairs, (pair) => pair.value) || 1;
+		const size = (term) => 11 + 12 * Math.sqrt(term.count / peak);
+		const nodes = terms.map((term) => ({ ...term }));
+		const edges = pairs.map((pair) => ({ ...pair }));
+		forceSimulation(nodes).force("charge", forceManyBody().strength(-260)).force("link", forceLink(edges).id((d) => d.id).distance(Math.min(width, height) * .28)).force("collide", forceCollide((d) => TextMetrics.width(d.word, size(d)) * .56 + 4)).force("x", forceX(width / 2).strength(.09)).force("y", forceY(height / 2).strength(.16)).stop().tick(220);
+		const half = (term) => TextMetrics.width(term.word, size(term), 600) / 2;
+		const clampX = (term) => Math.max(half(term), Math.min(width - half(term), term.x ?? 0));
+		const clampY = (term) => Math.max(size(term), Math.min(height - 4, term.y ?? 0));
+		const stem = (edge) => {
+			const a = edge.source, b = edge.target;
+			const x0 = clampX(a), y0 = clampY(a), x1 = clampX(b), y1 = clampY(b);
+			const context = path();
+			context.moveTo(x0, y0);
+			context.quadraticCurveTo((x0 + x1) / 2 + (y1 - y0) * .12, (y0 + y1) / 2 - (x1 - x0) * .12, x1, y1);
+			return context.toString();
+		};
+		const links = ctx.marks("links", "path", edges, (edge) => `${edge.source.id}>${edge.target.id}`).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", (edge) => 1 + 3 * (edge.value / top)).attr("d", stem);
+		ctx.drawOn(links);
+		ctx.marks("halo", "text", nodes, (term) => term.id).attr("text-anchor", "middle").attr("stroke", ctx.theme.surface).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("fill", "none").attr("font-family", ctx.theme.fontFamily).attr("font-weight", 600).attr("font-size", size).attr("dy", (term) => size(term) * .34).attr("x", clampX).attr("y", clampY).text((term) => term.word);
+		const words = ctx.marks("words", "text", nodes, (term) => term.id).attr("text-anchor", "middle").attr("fill", ctx.theme.ink).attr("font-family", ctx.theme.fontFamily).attr("font-weight", 600).attr("font-size", size).attr("dy", (term) => size(term) * .34).text((term) => term.word);
+		ctx.set(words, {
+			x: clampX,
+			y: clampY
+		});
+		ctx.hover(words, (term) => ({
+			title: term.word,
+			rows: [["Occurrences", term.count]]
+		}));
+	}
+	draw(ctx) {
+		const pairs = this.pairs();
+		if (!pairs.length) return;
+		const { layout } = this.options;
+		if (layout === "arcs") this.drawArcs(ctx, pairs);
+		else if (layout === "net") this.drawNet(ctx, pairs);
+		else this.drawSankey(ctx, pairs);
+	}
+};
+export { ANY_WORD, PhraseAlign, PhraseLayout, PhraseOrder, SankeyText };