@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/proportion/DotMatrixChart.js

@@ -0,0 +1,168 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { MarkShape, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/DotMatrixChart.ts
+var DotMatrixLayout = /* @__PURE__ */ function(DotMatrixLayout) {
+	DotMatrixLayout["Rows"] = "rows";
+	DotMatrixLayout["Columns"] = "columns";
+	DotMatrixLayout["Flow"] = "flow";
+	return DotMatrixLayout;
+}({});
+/** `Round` draws whole dots; `Partial` shrinks the last dot to the remainder so no value is rounded away. */
+var DotRemainder = /* @__PURE__ */ function(DotRemainder) {
+	DotRemainder["Round"] = "whole-dots";
+	DotRemainder["Partial"] = "partial-dot";
+	return DotRemainder;
+}({});
+var GUTTER = 72;
+var NOTE = 16;
+/** Absolute amounts as countable tokens, for audiences who distrust areas and angles. */
+var DotMatrixChart = class extends ShareChart {
+	static meta = {
+		id: "dot-matrix",
+		name: "Dot matrix",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Represents amounts with rows of identical dots, each worth a fixed value, so counts can be compared directly.",
+		tags: [
+			"unit chart",
+			"isotype",
+			"dot plot",
+			"count"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			layout: [
+				"rows",
+				"columns",
+				"flow"
+			],
+			symbol: [
+				MarkShape.Circle,
+				MarkShape.Square,
+				MarkShape.Diamond
+			],
+			dots: [
+				20,
+				40,
+				12
+			],
+			remainder: ["whole-dots", "partial-dot"],
+			sort: [ShareSort.Descending, ShareSort.Data]
+		},
+		valid: (values) => !(values.layout === "flow" && values.remainder === "whole-dots" && values.sort === ShareSort.Data)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			layout: "rows",
+			symbol: MarkShape.Circle,
+			dots: 20,
+			remainder: "whole-dots"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.layout === "flow" ? LegendPosition.Top : LegendPosition.None);
+	}
+	/** Dot sizes of a part: full dots, then a scaled last dot when partial remainders are on. */
+	tokens(share, unit) {
+		const exact = share.value / unit;
+		if (this.options.remainder === "whole-dots") return Array.from({ length: Math.round(exact) || 1 }, () => 1);
+		const whole = Math.floor(exact), left = exact - whole;
+		return [...Array.from({ length: whole }, () => 1), ...left > .02 ? [Math.sqrt(left)] : []];
+	}
+	rows(ctx, shares, unit) {
+		const horizontal = this.options.layout === "rows";
+		const { width } = ctx.plot, height = ctx.plot.height - (horizontal ? NOTE : 0);
+		const counts = shares.map((share) => this.tokens(share, unit));
+		const across = Math.max(...counts.map((tokens) => tokens.length));
+		const lanes = horizontal ? height / shares.length : width / shares.length;
+		const runway = horizontal ? width - GUTTER : height - 34;
+		const wrapAt = (pitch) => Math.max(1, Math.floor(lanes * .92 / pitch));
+		let pitch = 26;
+		while (pitch > 3 && Math.ceil(across / wrapAt(pitch)) * pitch > runway) pitch -= .25;
+		const wrap = wrapAt(pitch);
+		return shares.flatMap((share, lane) => counts[lane].map((scale, i) => {
+			const along = (Math.floor(i / wrap) + .5) * pitch, cross = (lane + .5) * lanes + (i % wrap - (wrap - 1) / 2) * pitch;
+			return {
+				key: `${share.name}.${i}`,
+				share,
+				size: pitch * .82 * scale,
+				x: horizontal ? GUTTER + along : cross,
+				y: horizontal ? cross : height - 18 - along
+			};
+		}));
+	}
+	flow(ctx, shares, unit) {
+		const { width } = ctx.plot, height = ctx.plot.height - NOTE;
+		const counts = shares.map((share) => this.tokens(share, unit));
+		const total = counts.reduce((sum, tokens) => sum + tokens.length, 0);
+		const pitch = Math.min(26, Math.sqrt(width * height / Math.max(1, total)) * .94);
+		const columns = Math.max(1, Math.floor(width / pitch));
+		const left = (width - columns * pitch) / 2, top = (height - Math.ceil(total / columns) * pitch) / 2;
+		let at = 0;
+		return shares.flatMap((share, s) => counts[s].map((scale, i) => {
+			const index = at++;
+			return {
+				key: `${share.name}.${i}`,
+				share,
+				size: pitch * .8 * scale,
+				x: left + (index % columns + .5) * pitch,
+				y: top + (Math.floor(index / columns) + .5) * pitch
+			};
+		}));
+	}
+	drawShares(ctx, shares) {
+		const { layout, symbol, dots, value } = this.options;
+		const unit = Math.max(...shares.map((share) => share.value)) / Math.max(1, dots);
+		const placed = layout === "flow" ? this.flow(ctx, shares, unit) : this.rows(ctx, shares, unit);
+		const marks = ctx.marks("dots", "rect", placed, (d) => d.key).attr("fill", (d) => ShareData.fill(ctx, d.share));
+		const side = (d) => d.size * (symbol === MarkShape.Diamond ? .74 : 1);
+		ctx.set(marks, {
+			x: (d) => (d.x - side(d) / 2).toFixed(2),
+			y: (d) => (d.y - side(d) / 2).toFixed(2),
+			width: (d) => side(d).toFixed(2),
+			height: (d) => side(d).toFixed(2),
+			rx: (d) => (symbol === MarkShape.Circle ? side(d) / 2 : Math.min(2, side(d) * .2)).toFixed(2),
+			transform: (d) => symbol === MarkShape.Diamond ? `rotate(45,${d.x.toFixed(2)},${d.y.toFixed(2)})` : null
+		}, {
+			width: 0,
+			height: 0
+		}, 3);
+		ctx.hover(marks, (d) => ({
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [[value, d.share.value], ["One dot", Scales.format(unit, unit)]]
+		}));
+		const { width, height } = ctx.plot;
+		const lanes = shares.map((share, i) => layout === "rows" ? {
+			share,
+			x: 64,
+			y: (i + .5) * (height - NOTE) / shares.length + 4,
+			anchor: "end",
+			room: 62
+		} : {
+			share,
+			x: (i + .5) * width / shares.length,
+			y: height - 2,
+			anchor: "middle",
+			room: width / shares.length - 4
+		});
+		const names = ctx.text(ctx.marks("names", "text", layout === "flow" ? [] : lanes, (d) => d.share.name)).attr("text-anchor", (d) => d.anchor).text((d) => ShareData.fit(d.share.name, d.room));
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const note = ctx.text(ctx.marks("unit", "text", [`One dot = ${Scales.format(unit, unit)}`]).text((d) => d), 10.5, "muted").attr("text-anchor", "end");
+		ctx.set(note, {
+			x: width,
+			y: layout === "columns" ? 9 : height - 2
+		});
+	}
+};
+export { DotMatrixChart, DotMatrixLayout, DotRemainder };

package/dist/charts/proportion/EulerDiagram.js

@@ -0,0 +1,75 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { EulerLayout } from "./EulerLayout.js";
+import { SetData } from "./SetData.js";
+import { SetDiagram, SetLabel } from "./SetDiagram.js";
+// src/charts/proportion/EulerDiagram.ts
+/** Set sizes and overlaps drawn to scale, for when how much matters as much as whether. */
+var EulerDiagram = class extends SetDiagram {
+	static meta = {
+		id: "euler",
+		name: "Euler diagram",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Sizes circles and their overlaps by the data, leaving out combinations that do not occur.",
+		tags: [
+			"area-proportional venn",
+			"sets",
+			"overlap"
+		],
+		sample: (seed) => {
+			const rows = SetData.sample(seed, 5);
+			const order = rows.filter((row) => !String(row.sets).includes("&")).map((row) => String(row.sets));
+			return rows.filter((row) => {
+				const members = String(row.sets).split("&").map((name) => order.indexOf(name));
+				const chained = members.every((at, i) => !i || at === members[i - 1] + 1);
+				return members.length === 1 || chained && members.length === 2 || chained && members.length === 3 && members[0] === 0;
+			});
+		},
+		variants: {
+			limit: [
+				3,
+				2,
+				4,
+				5
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			labels: [
+				SetLabel.Values,
+				SetLabel.Names,
+				SetLabel.None
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === SetLabel.Names && this.options.limit <= 3 ? LegendPosition.None : LegendPosition.Top);
+	}
+	shapes(ctx, table) {
+		const { width, height } = ctx.plot;
+		const solved = EulerLayout.align(EulerLayout.solve(table), this.options.orientation === Orientation.Horizontal ? 0 : Math.PI / 2);
+		const x0 = Math.min(...solved.map((c) => c.x - c.r)), x1 = Math.max(...solved.map((c) => c.x + c.r));
+		const y0 = Math.min(...solved.map((c) => c.y - c.r)), y1 = Math.max(...solved.map((c) => c.y + c.r));
+		const scale = Math.min((width - 4) / (x1 - x0), (height - 18) / (y1 - y0));
+		return solved.map((c) => ({
+			cx: width / 2 + (c.x - (x0 + x1) / 2) * scale,
+			cy: (height - 14) / 2 + (c.y - (y0 + y1) / 2) * scale,
+			rx: c.r * scale,
+			ry: c.r * scale,
+			angle: 0
+		}));
+	}
+	missing(ctx, count) {
+		const note = ctx.text(ctx.marks("missing", "text", count ? [count] : []), 10.5, "muted").text((d) => `${d} ${d === 1 ? "combination" : "combinations"} cannot be drawn to scale`);
+		ctx.set(note, {
+			x: 0,
+			y: ctx.plot.height - 2
+		});
+	}
+};
+export { EulerDiagram };

package/dist/charts/proportion/EulerLayout.js

@@ -0,0 +1,91 @@
+// src/charts/proportion/EulerLayout.ts
+var lens = (a, b, d) => {
+	if (d >= a + b) return 0;
+	if (d <= Math.abs(a - b)) return Math.PI * Math.min(a, b) ** 2;
+	const x = (d * d + a * a - b * b) / (2 * d), y = d - x;
+	const segment = (r, h) => r * r * Math.acos(Math.max(-1, Math.min(1, h / r))) - h * Math.sqrt(Math.max(0, r * r - h * h));
+	return segment(a, x) + segment(b, y);
+};
+/**
+* Area-proportional circles: each pair's distance is solved exactly from its overlap, then stress
+* minimisation places all circles. Two sets are exact; three or more are the best circular fit.
+*/
+var EulerLayout = class {
+	static distance(a, b, overlap) {
+		let low = Math.abs(a - b), high = a + b;
+		if (overlap <= 0) return high * 1.04;
+		if (overlap >= Math.PI * Math.min(a, b) ** 2 * .999) return low * .9;
+		for (let i = 0; i < 48; i++) {
+			const middle = (low + high) / 2;
+			if (lens(a, b, middle) > overlap) low = middle;
+			else high = middle;
+		}
+		return (low + high) / 2;
+	}
+	static solve(table) {
+		const n = table.names.length;
+		const radii = table.sizes.map((size) => Math.sqrt(size / Math.PI));
+		const overlap = (i, j) => table.regions.reduce((sum, region) => sum + (region.mask & 1 << i && region.mask & 1 << j ? region.value : 0), 0);
+		const pairs = Array.from({ length: n }, (_, i) => Array.from({ length: n }, (_, j) => {
+			if (i >= j) return null;
+			const shared = overlap(i, j);
+			return {
+				i,
+				j,
+				target: this.distance(radii[i], radii[j], shared),
+				disjoint: shared <= 0,
+				nested: shared >= Math.PI * Math.min(radii[i], radii[j]) ** 2 * .999
+			};
+		})).flat().filter((pair) => pair !== null);
+		const spread = radii.reduce((a, b) => a + b, 0) / Math.max(1, n);
+		let best = [], bestStress = Infinity;
+		for (let start = 0; start < 4; start++) {
+			const points = radii.map((_, i) => {
+				const angle = (i * (start % 2 ? 2 : 1) + start * .37) / n * Math.PI * 2;
+				return [Math.cos(angle) * spread, Math.sin(angle) * spread];
+			});
+			let stress = 0;
+			for (let step = 0; step < 500; step++) {
+				stress = 0;
+				for (const { i, j, target, disjoint, nested } of pairs) {
+					const dx = points[j][0] - points[i][0], dy = points[j][1] - points[i][1], d = Math.hypot(dx, dy) || 1e-6;
+					const wrong = d - target;
+					if (disjoint && wrong > 0 || nested && wrong < 0) continue;
+					stress += wrong * wrong;
+					const push = wrong / d * .12;
+					points[i][0] += dx * push;
+					points[i][1] += dy * push;
+					points[j][0] -= dx * push;
+					points[j][1] -= dy * push;
+				}
+			}
+			if (stress < bestStress) {
+				bestStress = stress;
+				best = points;
+			}
+		}
+		return best.map(([x, y], i) => ({
+			x,
+			y,
+			r: radii[i]
+		}));
+	}
+	/** Rotates so the longest spread lies along `angle`. */
+	static align(circles, angle) {
+		const cx = circles.reduce((a, c) => a + c.x, 0) / circles.length, cy = circles.reduce((a, c) => a + c.y, 0) / circles.length;
+		let xx = 0, yy = 0, xy = 0;
+		for (const { x, y } of circles) {
+			xx += (x - cx) ** 2;
+			yy += (y - cy) ** 2;
+			xy += (x - cx) * (y - cy);
+		}
+		const turn = angle - .5 * Math.atan2(2 * xy, xx - yy);
+		const cos = Math.cos(turn), sin = Math.sin(turn);
+		return circles.map((c) => ({
+			...c,
+			x: (c.x - cx) * cos - (c.y - cy) * sin,
+			y: (c.x - cx) * sin + (c.y - cy) * cos
+		}));
+	}
+};
+export { EulerLayout };

package/dist/charts/proportion/ExplodedPie.js

@@ -0,0 +1,70 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PieBase } from "./PieBase.js";
+import { PieLabel, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/ExplodedPie.ts
+var PieExplode = /* @__PURE__ */ function(PieExplode) {
+	PieExplode["Largest"] = "pull-largest";
+	PieExplode["Smallest"] = "pull-smallest";
+	PieExplode["TopTwo"] = "pull-top-two";
+	PieExplode["All"] = "pull-all";
+	return PieExplode;
+}({});
+/** A pie that pulls out the slice the story is about. */
+var ExplodedPie = class extends PieBase {
+	static meta = {
+		id: "exploded-pie",
+		name: "Exploded pie",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Pulls chosen slices away from a pie to draw the eye to them while keeping the whole visible.",
+		tags: ["pulled slice", "emphasis"],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			explode: [
+				"pull-largest",
+				"pull-smallest",
+				"pull-top-two",
+				"pull-all"
+			],
+			distance: [.1, .2],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			],
+			labels: [
+				PieLabel.Callout,
+				PieLabel.Inside,
+				PieLabel.None
+			]
+		}
+	};
+	pulled = /* @__PURE__ */ new Set();
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			explode: "pull-largest",
+			distance: .1
+		};
+	}
+	reach() {
+		return 1 + this.options.distance;
+	}
+	prepare(shares) {
+		const ranked = [...shares].sort((a, b) => b.value - a.value);
+		const chosen = {
+			["pull-largest"]: ranked.slice(0, 1),
+			["pull-smallest"]: ranked.slice(-1),
+			["pull-top-two"]: ranked.slice(0, 2),
+			["pull-all"]: ranked
+		};
+		this.pulled = new Set(chosen[this.options.explode].map((share) => share.name));
+	}
+	offset(slice, radius) {
+		return this.pulled.has(slice.data.name) ? radius * this.options.distance : 0;
+	}
+};
+export { ExplodedPie, PieExplode };

package/dist/charts/proportion/FunnelChart.js

@@ -0,0 +1,204 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { pairs } from "d3";
+// src/charts/proportion/FunnelChart.ts
+var FunnelForm = /* @__PURE__ */ function(FunnelForm) {
+	FunnelForm["Trapezoid"] = "trapezoid";
+	FunnelForm["Stepped"] = "stepped";
+	FunnelForm["Curved"] = "curved";
+	return FunnelForm;
+}({});
+var FunnelAlign = /* @__PURE__ */ function(FunnelAlign) {
+	FunnelAlign["Centred"] = "centred";
+	FunnelAlign["Leading"] = "leading-edge";
+	return FunnelAlign;
+}({});
+/** `Equal` gives every stage the same depth; `Proportional` also scales depth by value. */
+var FunnelDepth = /* @__PURE__ */ function(FunnelDepth) {
+	FunnelDepth["Equal"] = "equal-depth";
+	FunnelDepth["Proportional"] = "proportional-depth";
+	return FunnelDepth;
+}({});
+var FunnelNote = /* @__PURE__ */ function(FunnelNote) {
+	FunnelNote["Rails"] = "rails";
+	FunnelNote["Inside"] = "inside";
+	FunnelNote["None"] = "unlabelled";
+	return FunnelNote;
+}({});
+var STAGES = [
+	"Visited",
+	"Signed up",
+	"Activated",
+	"Subscribed",
+	"Renewed",
+	"Referred"
+];
+var NAME = 88;
+var RATE = 54;
+var MIN_DEPTH = 16;
+/** Stage-by-stage drop-off through a process, in the order the rows arrive. */
+var FunnelChart = class extends ShareChart {
+	static meta = {
+		id: "funnel",
+		name: "Funnel chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows how a quantity shrinks through ordered stages, making the biggest drop-off easy to find.",
+		tags: [
+			"conversion",
+			"pipeline",
+			"drop-off"
+		],
+		sample: (seed) => {
+			const rates = SampleData.categories(seed, STAGES.length, 1).map((row) => .5 + Number(row.value) / 220);
+			let value = 12e3;
+			return STAGES.map((category, i) => ({
+				category,
+				value: i ? value = Math.round(value * rates[i]) : value
+			}));
+		},
+		variants: {
+			form: [
+				"trapezoid",
+				"stepped",
+				"curved"
+			],
+			align: ["centred", "leading-edge"],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			depth: ["equal-depth", "proportional-depth"],
+			notes: [
+				"rails",
+				"inside",
+				"unlabelled"
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			limit: 12,
+			form: "trapezoid",
+			align: "centred",
+			orientation: Orientation.Vertical,
+			depth: "equal-depth",
+			notes: "rails"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.None;
+	}
+	bands(shares, length, breadth) {
+		const top = Math.max(...shares.map((share) => share.value));
+		const free = Math.max(0, length - 2 * (shares.length - 1));
+		const whole = shares.reduce((total, share) => total + share.value, 0);
+		const floor = Math.min(MIN_DEPTH, free / shares.length);
+		const depths = shares.map((share) => this.options.depth === "equal-depth" ? free / shares.length : floor + (free - floor * shares.length) * share.value / whole);
+		let cursor = 0;
+		return shares.map((share, i) => {
+			const start = cursor, end = start + depths[i];
+			cursor = end + 2;
+			const open = breadth * share.value / top, next = shares[i + 1];
+			return {
+				share,
+				start,
+				end,
+				open,
+				close: this.options.form === "stepped" ? open : next ? breadth * next.value / top : open
+			};
+		});
+	}
+	path(band, breadth) {
+		const vertical = this.options.orientation === Orientation.Vertical, centred = this.options.align === "centred";
+		const place = (along, cross) => vertical ? `${cross.toFixed(2)},${along.toFixed(2)}` : `${along.toFixed(2)},${cross.toFixed(2)}`;
+		const low = (width) => centred ? (breadth - width) / 2 : 0, high = (width) => low(width) + width;
+		const { start, end, open, close } = band, midpoint = (start + end) / 2;
+		if (this.options.form !== "curved") return `M${place(start, low(open))}L${place(start, high(open))}L${place(end, high(close))}L${place(end, low(close))}Z`;
+		return `M${place(start, low(open))}L${place(start, high(open))}C${place(midpoint, high(open))} ${place(midpoint, high(close))} ${place(end, high(close))}L${place(end, low(close))}C${place(midpoint, low(close))} ${place(midpoint, low(open))} ${place(start, low(open))}Z`;
+	}
+	drawShares(ctx, shares) {
+		const { orientation, notes, value, align } = this.options;
+		const vertical = orientation === Orientation.Vertical, rails = notes === "rails";
+		const { width, height } = ctx.plot;
+		const before = rails ? vertical ? NAME : 22 : 0, after = rails ? vertical ? RATE : 18 : 0;
+		const length = vertical ? height : width, breadth = (vertical ? width : height) - before - after;
+		const bands = this.bands(shares, length, breadth);
+		const top = Math.max(...shares.map((share) => share.value));
+		const stage = ctx.nest(vertical ? `translate(${before},0)` : `translate(0,${before})`, "funnel");
+		const fill = (d) => ctx.palette.sequential(.38 + .56 * (d.share.value / top));
+		const paths = stage.marks("bands", "path", bands, (d) => d.share.name, stage.root).attr("fill", fill);
+		const collapsed = (d) => this.path({
+			...d,
+			open: 0,
+			close: 0
+		}, breadth);
+		ctx.set(paths, { d: (d) => this.path(d, breadth) }, { d: collapsed }, 50);
+		const rate = (d, i) => i ? d.share.value / bands[i - 1].share.value : 1;
+		ctx.hover(paths, (d, i) => ({
+			title: d.share.name,
+			color: fill(d),
+			rows: [
+				[value, d.share.value],
+				["Of first stage", ShareData.percent(d.share.value / bands[0].share.value)],
+				["Of previous", ShareData.percent(rate(d, i))]
+			]
+		}));
+		const offsetOf = (band) => align === "centred" ? breadth / 2 : Math.max(band.open, band.close) / 2;
+		const inside = bands.flatMap((band) => {
+			const room = vertical ? (band.open + band.close) / 2 - 8 : band.end - band.start - 8;
+			const depth = vertical ? band.end - band.start : Math.min(band.open, band.close);
+			const amount = Scales.format(band.share.value, top);
+			const line = notes === "inside" ? ShareData.fit(`${band.share.name}  ${amount}`, room) : rails ? amount : "";
+			if (!line || ShareData.width(line) > room || depth < 15) return [];
+			const along = (band.start + band.end) / 2, cross = offsetOf(band);
+			return [{
+				key: band.share.name,
+				text: line,
+				x: vertical ? cross : along,
+				y: (vertical ? along : cross) + 4,
+				fill: ShareData.ink(ctx, fill(band))
+			}];
+		});
+		const written = stage.text(stage.marks("values", "text", inside, (d) => d.key, stage.root)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(written, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const heads = (rails ? bands : []).flatMap((band) => {
+			const along = (band.start + band.end) / 2;
+			if (vertical) return [{
+				key: band.share.name,
+				text: ShareData.fit(band.share.name, 78),
+				x: 78,
+				y: along + 4,
+				anchor: "end"
+			}];
+			return [{
+				key: band.share.name,
+				text: ShareData.fit(band.share.name, band.end - band.start - 4),
+				x: along,
+				y: 13,
+				anchor: "middle"
+			}];
+		});
+		const names = ctx.text(ctx.marks("names", "text", heads, (d) => d.key)).attr("text-anchor", (d) => d.anchor).text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const steps = (rails ? pairs(bands) : []).map(([from, to]) => ({
+			key: to.share.name,
+			text: ShareData.percent(to.share.value / from.share.value),
+			along: (from.end + to.start) / 2
+		}));
+		const conversion = ctx.text(ctx.marks("rates", "text", steps, (d) => d.key), 10.5, "muted").attr("text-anchor", vertical ? "end" : "middle").text((d) => d.text);
+		ctx.set(conversion, {
+			x: (d) => vertical ? width : d.along,
+			y: (d) => vertical ? d.along + 4 : height - 3
+		});
+	}
+};
+export { FunnelAlign, FunnelChart, FunnelDepth, FunnelForm, FunnelNote };