@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/flow/StateTransitionChart.js

@@ -0,0 +1,298 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowGraphChart } from "./FlowChart.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+import { LayeredLayout } from "./LayeredLayout.js";
+import { scaleLinear } from "d3";
+// src/charts/flow/StateTransitionChart.ts
+var StateLayout = /* @__PURE__ */ function(StateLayout) {
+	StateLayout["Ring"] = "ring";
+	StateLayout["Layered"] = "layered";
+	StateLayout["Grid"] = "grid";
+	return StateLayout;
+}({});
+var StateEdge = /* @__PURE__ */ function(StateEdge) {
+	StateEdge["Arc"] = "arc";
+	StateEdge["Straight"] = "straight";
+	return StateEdge;
+}({});
+/** `Proportional` scales edge width with probability or rate. */
+var StateWeight = /* @__PURE__ */ function(StateWeight) {
+	StateWeight["Uniform"] = "uniform";
+	StateWeight["Proportional"] = "proportional";
+	return StateWeight;
+}({});
+/** `Disc` holds the name; `Dot` is a small point with the name beside it, for busier machines. */
+var StateMark = /* @__PURE__ */ function(StateMark) {
+	StateMark["Disc"] = "disc";
+	StateMark["Dot"] = "dot";
+	return StateMark;
+}({});
+/** Model discrete systems: state machines, Markov chains, lifecycles. Each circle is a state and each arrow a transition, self-loops included. */
+var StateTransitionChart = class extends FlowGraphChart {
+	static meta = {
+		id: "state-transition",
+		name: "State transition diagram",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Draws states and the transitions between them, with self-loops, for state machines and Markov chains.",
+		tags: [
+			"state machine",
+			"markov",
+			"fsm",
+			"lifecycle"
+		],
+		sample: (seed) => {
+			const { rows, values } = SampleData.matrix(seed, 5, 5);
+			const names = [
+				"Idle",
+				"Active",
+				"Paused",
+				"Review",
+				"Done"
+			];
+			const links = rows.flatMap((_, r) => {
+				const row = values[r].map((value, c) => ({
+					c,
+					value: value + 1.3
+				})).sort((a, b) => b.value - a.value).slice(0, 2 + r % 2);
+				const total = row.reduce((sum, { value }) => sum + value, 0);
+				return row.map(({ c, value }) => ({
+					source: names[r],
+					target: names[c],
+					value: +(value / total).toFixed(2)
+				}));
+			});
+			return {
+				nodes: names.map((id) => ({
+					id,
+					accepting: id === "Done" ? "yes" : ""
+				})),
+				links
+			};
+		},
+		variants: {
+			layout: [
+				"ring",
+				"layered",
+				"grid"
+			],
+			edge: ["arc", "straight"],
+			weight: ["uniform", "proportional"],
+			mark: ["disc", "dot"],
+			edgeLabels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			layout: "ring",
+			edge: "arc",
+			weight: "uniform",
+			mark: "disc",
+			edgeLabels: true,
+			accepting: "accepting"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 10,
+			right: 12,
+			bottom: 10,
+			left: 12
+		};
+	}
+	get radius() {
+		return this.options.mark === "dot" ? 8 : 19;
+	}
+	positions(vertices, ctx) {
+		const { layout } = this.options;
+		const R = this.radius;
+		const { width: W, height: H } = ctx.plot;
+		const pad = R + 26;
+		const n = vertices.length;
+		if (layout === "grid") {
+			const columns = Math.ceil(Math.sqrt(n * W / H)), rows = Math.ceil(n / columns);
+			return vertices.map((vertex, i) => {
+				const offset = (columns - ((rows - 1) * columns > i ? columns : n - (rows - 1) * columns)) / 2;
+				return {
+					...vertex,
+					x: pad + (i % columns + offset) * (W - 2 * pad) / Math.max(1, columns - 1),
+					y: rows > 1 ? pad + Math.floor(i / columns) * (H - 2 * pad) / (rows - 1) : H / 2
+				};
+			});
+		}
+		if (layout === "layered") {
+			const graph = this.graph();
+			const placed = LayeredLayout.place(graph, {
+				extent: H - 2 * pad,
+				node: 2 * R + 28,
+				lane: 16
+			});
+			const scale = scaleLinear([0, Math.max(1, placed.ranks - 1)], [pad, W - pad]);
+			return vertices.map((vertex) => ({
+				...vertex,
+				x: scale(placed.rank.get(vertex.id) ?? 0),
+				y: pad + (placed.cross.get(vertex.id) ?? 0)
+			}));
+		}
+		return vertices.map((vertex, i) => {
+			const angle = i / n * Math.PI * 2 - Math.PI / 2;
+			return {
+				...vertex,
+				x: W / 2 + (W / 2 - pad) * Math.cos(angle) * (n > 1 ? 1 : 0),
+				y: H / 2 + (H / 2 - pad) * Math.sin(angle) * (n > 1 ? 1 : 0)
+			};
+		});
+	}
+	draw(ctx) {
+		const { edge, weight, mark, edgeLabels, accepting, initial, value } = this.options;
+		const R = this.radius;
+		const graph = this.graph(false);
+		const states = this.positions(graph.vertices, ctx);
+		const { width: W, height: H } = ctx.plot;
+		const byId = new Map(states.map((state) => [state.id, state]));
+		const heaviest = Math.max(1e-9, ...graph.arcs.map((arc) => arc.value));
+		const size = (arc) => weight === "proportional" ? 1.5 + arc.value / heaviest * 6 : 2;
+		const mutual = new Set(graph.arcs.map((arc) => `${arc.source}>${arc.target}`));
+		const center = [W / 2, H / 2];
+		const transitions = graph.arcs.map((arc) => {
+			const from = byId.get(arc.source), to = byId.get(arc.target);
+			const a = [from.x, from.y], b = [to.x, to.y];
+			if (arc.source === arc.target) {
+				const out = Math.atan2(from.y - center[1], from.x - center[0]) || -Math.PI / 2;
+				const heading = Math.abs(from.x - center[0]) + Math.abs(from.y - center[1]) < 1 ? -Math.PI / 2 : out;
+				const spread = .62;
+				const p0 = [from.x + (R + 1) * Math.cos(heading - spread), from.y + (R + 1) * Math.sin(heading - spread)];
+				const p1 = [from.x + (R + 7) * Math.cos(heading + spread), from.y + (R + 7) * Math.sin(heading + spread)];
+				const far = [from.x + (R + 42) * Math.cos(heading), from.y + (R + 42) * Math.sin(heading)];
+				const clamp = (p) => [Math.max(4, Math.min(W - 4, p[0])), Math.max(4, Math.min(H - 4, p[1]))];
+				const points = FlowGeometry.quadratic(p0, clamp(far), p1);
+				return {
+					arc,
+					from,
+					to,
+					points,
+					width: size(arc),
+					label: points[12]
+				};
+			}
+			const span = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+			const side = edge === "straight" && mutual.has(`${arc.target}>${arc.source}`) ? 7 / span : 0;
+			const shift = ([x, y]) => [x + (b[1] - a[1]) * side, y - (b[0] - a[0]) * side];
+			const lift = edge === "arc" ? .16 : 0;
+			const control = [(a[0] + b[0]) / 2 + (b[1] - a[1]) * lift, (a[1] + b[1]) / 2 - (b[0] - a[0]) * lift];
+			const points = FlowGeometry.trim(FlowGeometry.quadratic(shift(a), shift(control), shift(b), 40), R + 2, R + 3);
+			return {
+				arc,
+				from,
+				to,
+				points,
+				width: size(arc),
+				label: points[Math.floor(points.length * .55)]
+			};
+		});
+		const lines = ctx.marks("edges", "path", transitions, (d) => `${d.arc.source}>${d.arc.target}`).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", (d) => d.width).attr("stroke-linecap", "round");
+		const stem = (d) => FlowGeometry.polyline(d.points.slice(0, -1));
+		this.stroke(ctx, lines, stem);
+		ctx.hover(lines, (d) => ({
+			title: `${d.from.label} → ${d.to.label}`,
+			rows: [[value ?? "Value", d.arc.value]]
+		}));
+		const heads = ctx.marks("heads", "path", transitions, (d) => `${d.arc.source}>${d.arc.target}`).attr("fill", ctx.theme.axis);
+		const head = (d) => FlowGeometry.arrow(d.points[d.points.length - 1], FlowGeometry.heading(d.points), 9 + d.width);
+		ctx.set(heads, { d: head }, { d: head });
+		const first = states.find((state) => state.id === initial) ?? states[0];
+		const entry = first ? [first] : [];
+		const inset = (d) => {
+			const out = Math.atan2(d.y - H / 2, d.x - W / 2);
+			const toward = (angle) => [d.x + (R + 23) * Math.cos(angle), d.y + (R + 23) * Math.sin(angle)];
+			const inside = ([x, y]) => x > 3 && x < W - 3 && y > 3 && y < H - 3;
+			const angle = [
+				out + .9,
+				out - .9,
+				out + 2.2,
+				out - 2.2
+			].find((turn) => inside(toward(turn))) ?? out + 2.2;
+			return [
+				toward(angle),
+				[d.x + (R + 3) * Math.cos(angle), d.y + (R + 3) * Math.sin(angle)],
+				angle + Math.PI
+			];
+		};
+		const entries = ctx.marks("entry", "path", entry, (d) => d.id).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2);
+		ctx.set(entries, { d: (d) => {
+			const [a, b] = inset(d);
+			return `${FlowGeometry.polyline([a, b])}`;
+		} });
+		const arrows = ctx.marks("entry-heads", "path", entry, (d) => d.id).attr("fill", ctx.theme.inkSecondary);
+		ctx.set(arrows, { d: (d) => {
+			const [, tip, angle] = inset(d);
+			return FlowGeometry.arrow(tip, angle, 9);
+		} });
+		const color = (state) => ctx.palette.color(state.group ?? state.label);
+		const disc = mark === "disc";
+		const accepted = (state) => Boolean(state.raw?.[accepting]);
+		const rims = ctx.marks("rims", "circle", states.filter(accepted), (d) => d.id).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2);
+		ctx.set(rims, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: R + 4
+		});
+		const dots = ctx.marks("states", "circle", states, (d) => d.id).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: R
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 30);
+		ctx.hover(dots, (d) => ({
+			title: d.label,
+			color: color(d),
+			rows: [["Out", graph.arcs.filter((arc) => arc.source === d.id).length], ["In", graph.arcs.filter((arc) => arc.target === d.id).length]]
+		}));
+		this.labels(ctx, "names", states.map((state) => disc ? {
+			key: state.id,
+			x: state.x,
+			y: state.y,
+			text: FlowTable.fit(state.label, 2 * R - 2, 10),
+			anchor: "middle",
+			size: 10,
+			weight: 600,
+			fill: ctx.palette.inkOn(color(state))
+		} : {
+			key: state.id,
+			x: state.x,
+			y: state.y + (state.y > H / 2 ? 19 : -19),
+			text: state.label,
+			anchor: "middle",
+			weight: 600,
+			tone: "ink",
+			halo: true
+		}));
+		const taken = [];
+		const clear = ([x, y]) => {
+			const free = states.every((state) => Math.hypot(x - state.x, y - state.y) > (disc ? R + 10 : R + 22)) && taken.every(([a, b]) => Math.abs(a - x) > 26 || Math.abs(b - y) > 12);
+			if (free) taken.push([x, y]);
+			return free;
+		};
+		const tags = edgeLabels ? transitions.filter((t) => clear(t.label)).map((t) => ({
+			key: `${t.arc.source}>${t.arc.target}`,
+			x: t.label[0],
+			y: t.label[1],
+			text: `${t.arc.value}`,
+			anchor: "middle",
+			size: 10,
+			halo: true
+		})) : [];
+		this.labels(ctx, "values", tags);
+	}
+	legendItems() {
+		return [];
+	}
+};
+export { StateEdge, StateLayout, StateMark, StateTransitionChart, StateWeight };

package/dist/charts/flow/StratumChart.js

@@ -0,0 +1,184 @@
+import { FlowChart } from "./FlowChart.js";
+import { FlowBaseline } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+import { rollup, sum } from "d3";
+// src/charts/flow/StratumChart.ts
+var StratumAxisOrder = /* @__PURE__ */ function(StratumAxisOrder) {
+	StratumAxisOrder["Input"] = "input";
+	StratumAxisOrder["Reversed"] = "reversed";
+	StratumAxisOrder["Cardinality"] = "cardinality";
+	return StratumAxisOrder;
+}({});
+/** `Threaded` keeps every combination a continuous stream; `Pairwise` merges bands between adjacent axes. */
+var StratumThreading = /* @__PURE__ */ function(StratumThreading) {
+	StratumThreading["Threaded"] = "threaded";
+	StratumThreading["Pairwise"] = "pairwise";
+	return StratumThreading;
+}({});
+/** Categorical axes joined by bands: the shared engine of alluvial and parallel-sets charts. */
+var StratumChart = class extends FlowChart {
+	dimensions() {
+		const { data, dimensions, value, axisOrder } = this.options;
+		const rows = data ?? [];
+		const fields = dimensions ?? Object.keys(rows[0] ?? {}).filter((key) => key !== value && typeof rows[0][key] === "string");
+		if (axisOrder === "reversed") return [...fields].reverse();
+		if (axisOrder === "cardinality") {
+			const count = (field) => new Set(rows.map((row) => row[field])).size;
+			return [...fields].sort((a, b) => count(a) - count(b));
+		}
+		return fields;
+	}
+	/** Lays bands out between `[start, end]` along the flow and `[0, breadth]` across it, with each axis `thick` deep. */
+	layout(start, end, breadth, thick) {
+		const { data, value, gap, categoryOrder, baseline, threading } = this.options;
+		const fields = this.dimensions();
+		const weight = (row) => {
+			const amount = Number(row[value]);
+			return row[value] === void 0 ? 1 : Number.isFinite(amount) && amount > 0 ? amount : 0;
+		};
+		const threads = [...rollup(data ?? [], (rows) => sum(rows, weight), (row) => fields.map((field) => String(row[field] ?? "∅")).join("\0"))].filter(([, amount]) => amount > 0).map(([key, amount]) => ({
+			path: key.split("\0"),
+			value: amount
+		}));
+		const total = sum(threads, (thread) => thread.value);
+		if (!fields.length || !total) return {
+			axes: [],
+			segments: [],
+			total: 0
+		};
+		const axes = fields.map((field, i) => {
+			const totals = rollup(threads, (rows) => sum(rows, (row) => row.value), (row) => row.path[i]);
+			const names = FlowTable.sorted([...totals.keys()], categoryOrder, (name) => totals.get(name));
+			return {
+				field,
+				u: fields.length > 1 ? start + i * (end - start - thick) / (fields.length - 1) : start,
+				strata: names.map((name) => ({
+					name,
+					value: totals.get(name),
+					v0: 0,
+					v1: 0
+				}))
+			};
+		});
+		const unit = (breadth - gap * (Math.max(...axes.map((axis) => axis.strata.length)) - 1)) / total;
+		for (const axis of axes) {
+			const free = breadth - total * unit - gap * (axis.strata.length - 1);
+			let cursor = baseline === FlowBaseline.Center ? free / 2 : baseline === FlowBaseline.Bottom ? free : 0;
+			const spread = baseline === void 0 && axis.strata.length > 1 ? free / (axis.strata.length - 1) : 0;
+			for (const stratum of axis.strata) {
+				stratum.v0 = cursor;
+				stratum.v1 = cursor + stratum.value * unit;
+				cursor = stratum.v1 + gap + spread;
+			}
+		}
+		const rankOf = axes.map((axis) => new Map(axis.strata.map((stratum, i) => [stratum.name, i])));
+		return {
+			axes,
+			total,
+			segments: threading === "pairwise" ? this.pairwise(axes, threads, rankOf, thick, unit) : this.threaded(axes, threads, rankOf, thick, unit)
+		};
+	}
+	threaded(axes, threads, rankOf, thick, unit) {
+		const seat = axes.map((axis, a) => {
+			const order = [...threads].sort((x, y) => {
+				const keys = [
+					a,
+					...Array.from({ length: a }, (_, k) => k),
+					...Array.from({ length: axes.length - a - 1 }, (_, k) => a + k + 1)
+				];
+				for (const k of keys) {
+					const delta = rankOf[k].get(x.path[k]) - rankOf[k].get(y.path[k]);
+					if (delta) return delta;
+				}
+				return 0;
+			});
+			const cursors = new Map(axis.strata.map((stratum) => [stratum.name, stratum.v0]));
+			return new Map(order.map((thread) => {
+				const v0 = cursors.get(thread.path[a]), v1 = v0 + thread.value * unit;
+				cursors.set(thread.path[a], v1);
+				return [thread, {
+					v0,
+					v1
+				}];
+			}));
+		});
+		return threads.flatMap((thread) => axes.slice(1).map((axis, i) => ({
+			key: `${thread.path.join("/")}#${i}`,
+			origin: thread.path[0],
+			left: thread.path[i],
+			right: thread.path[i + 1],
+			value: thread.value,
+			a: {
+				u: axes[i].u + thick,
+				...seat[i].get(thread)
+			},
+			b: {
+				u: axis.u,
+				...seat[i + 1].get(thread)
+			}
+		})));
+	}
+	pairwise(axes, threads, rankOf, thick, unit) {
+		return axes.slice(1).flatMap((axis, i) => {
+			const pairs = [...rollup(threads, (rows) => sum(rows, (row) => row.value), (row) => row.path[i], (row) => row.path[i + 1])].flatMap(([left, rights]) => [...rights].map(([right, value]) => ({
+				left,
+				right,
+				value
+			})));
+			const out = new Map(axes[i].strata.map((stratum) => [stratum.name, stratum.v0]));
+			const into = new Map(axis.strata.map((stratum) => [stratum.name, stratum.v0]));
+			const claim = (cursors, name, value) => {
+				const v0 = cursors.get(name), v1 = v0 + value * unit;
+				cursors.set(name, v1);
+				return {
+					v0,
+					v1
+				};
+			};
+			const seats = new Map(pairs.map((pair) => [pair, {
+				a: {
+					v0: 0,
+					v1: 0
+				},
+				b: {
+					v0: 0,
+					v1: 0
+				}
+			}]));
+			for (const pair of [...pairs].sort((x, y) => rankOf[i + 1].get(x.right) - rankOf[i + 1].get(y.right))) seats.get(pair).a = claim(out, pair.left, pair.value);
+			for (const pair of [...pairs].sort((x, y) => rankOf[i].get(x.left) - rankOf[i].get(y.left))) seats.get(pair).b = claim(into, pair.right, pair.value);
+			return pairs.map((pair) => ({
+				key: `${pair.left}/${pair.right}#${i}`,
+				origin: pair.left,
+				left: pair.left,
+				right: pair.right,
+				value: pair.value,
+				a: {
+					u: axes[i].u + thick,
+					...seats.get(pair).a
+				},
+				b: {
+					u: axis.u,
+					...seats.get(pair).b
+				}
+			}));
+		});
+	}
+	segmentTip(segment, total, color) {
+		return {
+			title: `${segment.left} → ${segment.right}`,
+			color,
+			rows: [["Amount", +segment.value.toFixed(2)], ["Share", `${(segment.value / total * 100).toFixed(1)}%`]]
+		};
+	}
+	segmentBands(layout, to, color) {
+		return layout.segments.map((segment) => ({
+			key: segment.key,
+			from: color(segment),
+			datum: segment,
+			d: FlowGeometry.ribbon(segment.a, segment.b, this.options.ribbon, to)
+		}));
+	}
+};
+export { StratumAxisOrder, StratumChart, StratumThreading };

package/dist/charts/flow/StreamFlow.js

@@ -0,0 +1,174 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowChart } from "./FlowChart.js";
+import { FlowTable } from "./FlowTable.js";
+import { area, range, scaleLinear, scalePoint, scaleTime, stack, stackOffsetExpand, stackOffsetNone, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderDescending, stackOrderInsideOut, stackOrderNone } from "d3";
+// src/charts/flow/StreamFlow.ts
+var StreamOffset = /* @__PURE__ */ function(StreamOffset) {
+	StreamOffset["Wiggle"] = "wiggle";
+	StreamOffset["Silhouette"] = "silhouette";
+	StreamOffset["Expand"] = "expand";
+	StreamOffset["Baseline"] = "baseline";
+	return StreamOffset;
+}({});
+var StreamOrder = /* @__PURE__ */ function(StreamOrder) {
+	StreamOrder["InsideOut"] = "inside-out";
+	StreamOrder["Appearance"] = "appearance";
+	StreamOrder["Ascending"] = "ascending";
+	StreamOrder["Descending"] = "descending";
+	StreamOrder["Input"] = "input";
+	return StreamOrder;
+}({});
+var OFFSET = {
+	["wiggle"]: stackOffsetWiggle,
+	["silhouette"]: stackOffsetSilhouette,
+	["expand"]: stackOffsetExpand,
+	["baseline"]: stackOffsetNone
+};
+var ORDER = {
+	["inside-out"]: stackOrderInsideOut,
+	["appearance"]: stackOrderAppearance,
+	["ascending"]: stackOrderAscending,
+	["descending"]: stackOrderDescending,
+	["input"]: stackOrderNone
+};
+/** Watch the composition of a total drift over time, when the shape of the whole matters more than exact values. Negative amounts count as zero. */
+var StreamFlow = class extends FlowChart {
+	static meta = {
+		id: "stream-flow",
+		name: "Stream flow",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks series around a flowing baseline to show how a total and its parts shift over time.",
+		tags: [
+			"streamgraph",
+			"theme river",
+			"stacked area"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 36, 6).map((row, i) => {
+			const peak = 5 + Math.floor(i / 36) * 11 % 31, day = i % 36;
+			return {
+				...row,
+				value: +(+row.value * (.12 + 1.4 * Math.exp(-(((day - peak) / 8) ** 2)))).toFixed(2)
+			};
+		}),
+		variants: {
+			offset: [
+				"wiggle",
+				"silhouette",
+				"expand",
+				"baseline"
+			],
+			order: [
+				"inside-out",
+				"appearance",
+				"ascending",
+				"descending",
+				"input"
+			],
+			curve: [
+				CurveKind.Basis,
+				CurveKind.Monotone,
+				CurveKind.CatmullRom,
+				CurveKind.Linear
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical]
+		}
+	};
+	defaults() {
+		return {
+			x: "date",
+			series: "series",
+			y: "value",
+			offset: "wiggle",
+			order: "inside-out",
+			curve: CurveKind.Basis,
+			orientation: Orientation.Horizontal
+		};
+	}
+	plotMargin() {
+		return this.options.orientation === Orientation.Vertical ? {
+			top: 8,
+			right: 8,
+			bottom: 8,
+			left: 58
+		} : {
+			top: 8,
+			right: 16,
+			bottom: 26,
+			left: 16
+		};
+	}
+	draw(ctx) {
+		const { data, x, series, y, offset, order, curve, orientation } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const table = FlowTable.pivot(data, x, series, y);
+		const rows = table.columns.map((_, c) => ({
+			c,
+			...Object.fromEntries(table.series.map((name) => [name, Math.max(0, table.at(c, name))]))
+		}));
+		const layers = stack().keys(table.series).offset(OFFSET[offset]).order(ORDER[order])(rows);
+		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
+		const low = Math.min(0, ...layers.flat().map((d) => d[0])), high = Math.max(1, ...layers.flat().map((d) => d[1]));
+		const across = scaleLinear([low, high], [breadth, 0]);
+		const first = table.columns[0];
+		const along = first instanceof Date ? (c) => scaleTime([first, table.columns[table.columns.length - 1]], [0, length])(table.columns[c]) : typeof first === "number" ? (c) => scaleLinear([first, table.columns[table.columns.length - 1]], [0, length])(table.columns[c]) : (c) => scalePoint(range(table.columns.length).map(String), [0, length])(String(c)) ?? 0;
+		const color = (name) => ctx.palette.color(name);
+		for (const name of table.series) color(name);
+		const flat = area();
+		const shape = vertical ? flat.curve(Scales.curve(curve)).y((d) => along(d.data.c)).x0((d) => across(d[0])).x1((d) => across(d[1])) : flat.curve(Scales.curve(curve)).x((d) => along(d.data.c)).y0((d) => across(d[0])).y1((d) => across(d[1]));
+		const zero = (layer) => shape(layer.map((d) => Object.assign([d[0], d[0]], { data: d.data }))) ?? "";
+		const paths = ctx.marks("layers", "path", layers, (d) => d.key).attr("fill", (d) => color(d.key));
+		ctx.set(paths, { d: (d) => shape(d) ?? "" }, { d: zero }, 30);
+		ctx.hover(paths, (d) => ({
+			title: d.key,
+			color: color(d.key),
+			rows: [["Latest", +table.at(table.columns.length - 1, d.key).toFixed(2)]]
+		}));
+		const count = Math.min(Math.floor(length / (vertical ? 40 : 90)) + 1, table.columns.length);
+		const picks = count > 1 ? range(count).map((i) => Math.round(i * (table.columns.length - 1) / (count - 1))) : table.columns.length ? [0] : [];
+		this.ticks(ctx, "dates", picks.map((c, i) => vertical ? {
+			key: `t${c}`,
+			x: -6,
+			y: along(c),
+			text: table.labels[c],
+			anchor: "end"
+		} : {
+			key: `t${c}`,
+			x: along(c),
+			y: 0,
+			text: table.labels[c],
+			anchor: i === 0 ? "start" : i === picks.length - 1 ? "end" : "middle"
+		}), vertical ? "left" : "bottom");
+		this.labels(ctx, "names", layers.flatMap((layer) => {
+			const best = layer.reduce((top, d, c) => {
+				return !(c < 2 || c > layer.length - 3) && Math.abs(across(d[1]) - across(d[0])) > Math.abs(across(layer[top][1]) - across(layer[top][0])) ? c : top;
+			}, Math.min(2, Math.max(0, layer.length - 1)));
+			const d = layer[best];
+			if (!d) return [];
+			const thick = Math.abs(across(d[1]) - across(d[0])), middle = (across(d[0]) + across(d[1])) / 2;
+			const fill = ctx.palette.inkOn(color(layer.key));
+			if (thick < 15) return [];
+			return [vertical ? {
+				key: layer.key,
+				x: middle,
+				y: along(best),
+				text: layer.key,
+				anchor: "middle",
+				fill,
+				weight: 600
+			} : {
+				key: layer.key,
+				x: along(best),
+				y: middle,
+				text: layer.key,
+				anchor: "middle",
+				fill,
+				weight: 600
+			}];
+		}));
+	}
+};
+export { StreamFlow, StreamOffset, StreamOrder };