@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/pictorial/WordTreeChart.js

@@ -0,0 +1,198 @@
+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 { path } from "d3";
+// src/charts/pictorial/WordTreeChart.ts
+var WordTreeDirection = /* @__PURE__ */ function(WordTreeDirection) {
+	WordTreeDirection["After"] = "after";
+	WordTreeDirection["Before"] = "before";
+	WordTreeDirection["Both"] = "both";
+	return WordTreeDirection;
+}({});
+var WordTreeLink = /* @__PURE__ */ function(WordTreeLink) {
+	WordTreeLink["Curve"] = "curve";
+	WordTreeLink["Elbow"] = "elbow";
+	WordTreeLink["Straight"] = "straight";
+	return WordTreeLink;
+}({});
+var WordTreeSizing = /* @__PURE__ */ function(WordTreeSizing) {
+	WordTreeSizing["Frequency"] = "frequency";
+	WordTreeSizing["Uniform"] = "uniform";
+	return WordTreeSizing;
+}({});
+var GAP = 16;
+var LINE = 1.3;
+/** Word tree: reads the actual phrases that follow or precede a word, branching where they diverge. */
+var WordTreeChart = class extends Chart2D {
+	static meta = {
+		id: "word-tree",
+		name: "Word tree",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Branches from a chosen word into the phrases around it, showing how the word is actually used in context.",
+		tags: [
+			"text",
+			"concordance",
+			"phrases",
+			"suffix tree"
+		],
+		sample: (seed) => Corpus.sample(seed),
+		variants: {
+			direction: [
+				"after",
+				"before",
+				"both"
+			],
+			link: [
+				"curve",
+				"elbow",
+				"straight"
+			],
+			sizing: ["frequency", "uniform"],
+			depth: [
+				3,
+				2,
+				5
+			]
+		}
+	};
+	defaults() {
+		return {
+			text: "text",
+			direction: "after",
+			link: "curve",
+			sizing: "frequency",
+			depth: 3
+		};
+	}
+	/** Prefix tree of the token runs; chains with no fork collapse into one phrase. */
+	grow(runs, depth, reversed) {
+		if (depth === 0) return [];
+		const groups = /* @__PURE__ */ new Map();
+		for (const run of runs) if (run.length) groups.set(run[0], [...groups.get(run[0]) ?? [], run.slice(1)]);
+		return [...groups].sort((a, b) => b[1].length - a[1].length || a[0].localeCompare(b[0])).map(([word, rests]) => {
+			const phrase = [word];
+			let current = rests;
+			while (current.length > 1 && current.every((run) => run.length && run[0] === current[0][0])) {
+				phrase.push(current[0][0]);
+				current = current.map((run) => run.slice(1));
+			}
+			return {
+				text: (reversed ? phrase.reverse() : phrase).join(" "),
+				count: rests.length,
+				children: this.grow(current, depth - 1, reversed)
+			};
+		});
+	}
+	root(sentences) {
+		const wanted = this.options.root?.toLowerCase();
+		return wanted && sentences.some((tokens) => tokens.includes(wanted)) ? wanted : Corpus.keywords(sentences)[0]?.[0] ?? "";
+	}
+	font(count, top, largest) {
+		return this.options.sizing === "uniform" ? 11 : 10 + (largest - 10) * Math.sqrt(count / top);
+	}
+	height(branch, top, largest) {
+		const own = this.font(branch.count, top, largest) * LINE;
+		return Math.max(own, branch.children.reduce((sum, child) => sum + this.height(child, top, largest), 0));
+	}
+	/** Removes the lightest leaf until the tree fits the plot height. */
+	trim(branches, top, room, largest) {
+		const leaves = (list) => list.flatMap((branch) => branch.children.length ? leaves(branch.children) : [[branch, list]]);
+		const total = () => branches.reduce((sum, branch) => sum + this.height(branch, top, largest), 0);
+		while (branches.length && total() > room) {
+			const [lightest, owner] = leaves(branches).reduce((low, leaf) => leaf[0].count <= low[0].count ? leaf : low);
+			owner.splice(owner.indexOf(lightest), 1);
+		}
+	}
+	link(x0, y0, x1, y1) {
+		const context = path();
+		const mid = (x0 + x1) / 2;
+		context.moveTo(x0, y0);
+		if (this.options.link === "curve") context.bezierCurveTo(mid, y0, mid, y1, x1, y1);
+		else if (this.options.link === "elbow") {
+			context.lineTo(mid, y0);
+			context.lineTo(mid, y1);
+			context.lineTo(x1, y1);
+		} else context.lineTo(x1, y1);
+		return context.toString();
+	}
+	place(list, side, x, y, parentY, limit, top, largest, key, out) {
+		const left = x + side * GAP;
+		let cursor = y;
+		for (const branch of list) {
+			const height = this.height(branch, top, largest);
+			const size = this.font(branch.count, top, largest);
+			const room = side > 0 ? limit - left : left - limit;
+			const shown = TextMetrics.clip(branch.text, size, room);
+			if (!shown) {
+				cursor += height;
+				continue;
+			}
+			const width = TextMetrics.width(shown, size), middle = cursor + height / 2, id = `${key}/${branch.text}`;
+			out.push({
+				branch,
+				side,
+				x: left,
+				y: middle,
+				size,
+				shown,
+				width,
+				path: this.link(x, parentY, left - side * 3, middle),
+				key: id
+			});
+			this.place(branch.children, side, left + side * width, cursor, middle, limit, top, largest, id, out);
+			cursor += height;
+		}
+	}
+	draw(ctx) {
+		const { text, direction, depth } = this.options;
+		const { width, height } = ctx.plot;
+		const sentences = Corpus.sentences(this.options.data, text);
+		const word = this.root(sentences);
+		if (!word) return;
+		const contexts = sentences.flatMap((tokens) => tokens.flatMap((token, i) => token === word ? [{
+			before: tokens.slice(0, i).reverse(),
+			after: tokens.slice(i + 1)
+		}] : []));
+		const top = contexts.length;
+		const largest = Math.min(26, Math.max(14, height / 9));
+		const after = direction === "before" ? [] : this.grow(contexts.map((c) => c.after), depth, false);
+		const before = direction === "after" ? [] : this.grow(contexts.map((c) => c.before), depth, true);
+		this.trim(after, top, height, largest);
+		this.trim(before, top, height, largest);
+		const rootSize = Math.min(largest + 6, 30);
+		const rootWidth = TextMetrics.width(word, rootSize, 600);
+		const rootX = direction === "after" ? 0 : direction === "before" ? width - rootWidth : (width - rootWidth) / 2;
+		const out = [];
+		const fan = (list, side, from, limit) => {
+			const used = list.reduce((sum, branch) => sum + this.height(branch, top, largest), 0);
+			this.place(list, side, from, (height - used) / 2, height / 2, limit, top, largest, side > 0 ? "a" : "b", out);
+		};
+		fan(after, 1, rootX + rootWidth + 2, width);
+		fan(before, -1, rootX - 2, 0);
+		const links = ctx.marks("links", "path", out, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", (d) => Math.max(1, Math.min(4, d.branch.count / top * 8)));
+		ctx.set(links, { d: (d) => d.path });
+		ctx.drawOn(links);
+		const words = ctx.marks("words", "text", out, (d) => d.key).attr("font-family", ctx.theme.fontFamily).attr("font-size", (d) => d.size).attr("fill", (d) => d.branch.count > 1 ? ctx.theme.ink : ctx.theme.inkSecondary).attr("text-anchor", (d) => d.side > 0 ? "start" : "end").attr("dy", (d) => d.size * .34).text((d) => d.shown);
+		ctx.set(words, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		ctx.hover(words, (d) => ({
+			title: d.branch.text,
+			rows: [["Occurrences", d.branch.count]]
+		}));
+		const center = ctx.marks("root", "text", [word], String).attr("font-family", ctx.theme.fontFamily).attr("font-weight", 600).attr("font-size", rootSize).attr("fill", ctx.theme.ink).attr("dy", rootSize * .34).text(String);
+		ctx.set(center, {
+			x: rootX,
+			y: height / 2
+		});
+		ctx.hover(center, () => ({
+			title: word,
+			rows: [["Occurrences", top]]
+		}));
+	}
+};
+export { WordTreeChart, WordTreeDirection, WordTreeLink, WordTreeSizing };

package/dist/charts/pictorial/index.js

@@ -0,0 +1,44 @@
+import { ArrowAnchor, ArrowEncoding, ArrowGlyphs, ArrowLayout, ArrowStyle } from "./ArrowGlyphs.js";
+import { WordChart } from "./WordChart.js";
+import { BubbleText, BubbleTextLayout, BubbleTextOrder } from "./BubbleText.js";
+import { ColorSwatchChart, SwatchLayout, SwatchSort } from "./ColorSwatchChart.js";
+import { ConcordanceChart, ConcordanceDispersion, ConcordanceSort, ConcordanceView } from "./ConcordanceChart.js";
+import { GlyphChart, PictorialGlyphLayout, PictorialGlyphOrder } from "./GlyphChart.js";
+import { FaceDetail, FaceGlyphs, FaceHead } from "./FaceGlyphs.js";
+import { ICON_PATHS, PictorialIcon } from "./PictorialIcons.js";
+import { ICON_BOX, UnitChart } from "./UnitChart.js";
+import { IconArray, IconArrayFacet, IconArrayFill, IconArrayShape } from "./IconArray.js";
+import { IsotypeChart, IsotypeIcons, IsotypeLayout } from "./IsotypeChart.js";
+import { PictogramChart, PictogramRounding, PictogramSort } from "./PictogramChart.js";
+import { PolarGlyphKind, PolarGlyphMatrix, PolarGlyphScale, PolarGlyphSweep } from "./PolarGlyphMatrix.js";
+import { ANY_WORD, PhraseAlign, PhraseLayout, PhraseOrder, SankeyText } from "./SankeyText.js";
+import { SentimentMark, SentimentStrip } from "./SentimentStrip.js";
+import { ShapeEncoding, ShapeGrid, ShapeOrder } from "./ShapeGrid.js";
+import { StarGlyphs, StarShape } from "./StarGlyphs.js";
+import { TagAlign, TagChart, TagSort, TagStyle } from "./TagChart.js";
+import { TextTreemap, TextTreemapTile } from "./TextTreemap.js";
+import { WeatherGlyphs, WeatherHemisphere, WeatherSymbol } from "./WeatherGlyphs.js";
+import { WordCloudChart, WordCloudRotation, WordCloudSpiral } from "./WordCloudChart.js";
+import { WordTreeChart, WordTreeDirection, WordTreeLink, WordTreeSizing } from "./WordTreeChart.js";
+// src/charts/pictorial/index.ts
+var pictorialCatalog = [
+	WordCloudChart,
+	PictogramChart,
+	IsotypeChart,
+	TextTreemap,
+	TagChart,
+	WordTreeChart,
+	ConcordanceChart,
+	SentimentStrip,
+	SankeyText,
+	ColorSwatchChart,
+	IconArray,
+	FaceGlyphs,
+	StarGlyphs,
+	ArrowGlyphs,
+	WeatherGlyphs,
+	ShapeGrid,
+	PolarGlyphMatrix,
+	BubbleText
+];
+export { ANY_WORD, ArrowAnchor, ArrowEncoding, ArrowGlyphs, ArrowLayout, ArrowStyle, BubbleText, BubbleTextLayout, BubbleTextOrder, ColorSwatchChart, ConcordanceChart, ConcordanceDispersion, ConcordanceSort, ConcordanceView, FaceDetail, FaceGlyphs, FaceHead, GlyphChart, ICON_BOX, ICON_PATHS, IconArray, IconArrayFacet, IconArrayFill, IconArrayShape, IsotypeChart, IsotypeIcons, IsotypeLayout, PhraseAlign, PhraseLayout, PhraseOrder, PictogramChart, PictogramRounding, PictogramSort, PictorialGlyphLayout, PictorialGlyphOrder, PictorialIcon, PolarGlyphKind, PolarGlyphMatrix, PolarGlyphScale, PolarGlyphSweep, SankeyText, SentimentMark, SentimentStrip, ShapeEncoding, ShapeGrid, ShapeOrder, StarGlyphs, StarShape, SwatchLayout, SwatchSort, TagAlign, TagChart, TagSort, TagStyle, TextTreemap, TextTreemapTile, UnitChart, WeatherGlyphs, WeatherHemisphere, WeatherSymbol, WordChart, WordCloudChart, WordCloudRotation, WordCloudSpiral, WordTreeChart, WordTreeDirection, WordTreeLink, WordTreeSizing, pictorialCatalog };

package/dist/charts/proportion/BarOfPie.js

@@ -0,0 +1,181 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { pie, sum } from "d3";
+// src/charts/proportion/BarOfPie.ts
+var BreakoutForm = /* @__PURE__ */ function(BreakoutForm) {
+	BreakoutForm["Bar"] = "bar-of-pie";
+	BreakoutForm["Pie"] = "pie-of-pie";
+	return BreakoutForm;
+}({});
+var BreakoutSide = /* @__PURE__ */ function(BreakoutSide) {
+	BreakoutSide["Right"] = "detail-right";
+	BreakoutSide["Left"] = "detail-left";
+	return BreakoutSide;
+}({});
+var GROUP = "Others";
+/** A pie whose small slices would be unreadable: they move into a magnified detail beside it. */
+var BarOfPie = class extends ShareChart {
+	static meta = {
+		id: "bar-of-pie",
+		name: "Bar of pie",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Collapses the smallest slices of a pie into one, then magnifies them in a linked bar or second pie.",
+		tags: [
+			"pie of pie",
+			"breakout",
+			"secondary plot"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 1),
+		variants: {
+			form: ["bar-of-pie", "pie-of-pie"],
+			detail: [
+				3,
+				2,
+				4
+			],
+			side: ["detail-right", "detail-left"],
+			values: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			detail: 3,
+			form: "bar-of-pie",
+			side: "detail-right",
+			values: true
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.Top;
+	}
+	drawShares(ctx, shares) {
+		const { detail, form, side, value, values } = this.options;
+		const { width, height } = ctx.plot;
+		const moved = Math.min(detail, Math.max(0, shares.length - 1));
+		const ranked = [...shares].sort((a, b) => b.value - a.value);
+		const small = ranked.slice(ranked.length - moved), main = ranked.slice(0, ranked.length - moved);
+		const smallTotal = sum(small, (share) => share.value);
+		const group = {
+			name: GROUP,
+			value: smallTotal,
+			fraction: small.reduce((total, share) => total + share.fraction, 0),
+			index: shares.length,
+			rest: true
+		};
+		const dir = side === "detail-right" ? 1 : -1, detailReach = form === "bar-of-pie" ? .72 : 1.24;
+		const radius = Math.min(height / 2, width / (2.42 + detailReach)), cy = height / 2;
+		const breadth = radius * (2.42 + detailReach);
+		const centre = width / 2 - dir * breadth / 2 + dir * radius;
+		const facing = dir * Math.PI / 2;
+		const lead = moved ? group.fraction * Math.PI : 0;
+		const parts = moved ? [group, ...main] : main;
+		const slices = pie().value((share) => share.value).sort(null).startAngle(facing - lead).endAngle(facing - lead + Math.PI * 2)(parts);
+		const shape = ShareData.arcs(() => 0, () => radius, radius, parts.length > 1 ? 2 : 0);
+		const stage = ctx.nest(`translate(${centre},${cy})`, "main");
+		const fill = (share) => share.name === GROUP && share.rest ? ctx.theme.axis : ShareData.fill(ctx, share);
+		const paths = ctx.marks("slices", "path", slices, (d) => d.data.name, stage.root).attr("fill", (d) => fill(d.data));
+		ctx.set(paths, { d: (d) => shape(d) ?? "" }, { d: (d) => shape({
+			...d,
+			endAngle: d.startAngle
+		}) ?? "" }, 24);
+		const tip = (share) => ({
+			title: share.name,
+			color: fill(share),
+			rows: [[value, share.value], ["Share", ShareData.percent(share.fraction)]]
+		});
+		ctx.hover(paths, (d) => tip(d.data));
+		const onSlice = (values ? slices : []).filter((d) => d.endAngle - d.startAngle > .34).map((d) => {
+			const angle = (d.startAngle + d.endAngle) / 2;
+			return {
+				key: d.data.name,
+				text: ShareData.percent(d.data.fraction),
+				x: Math.sin(angle) * radius * .66,
+				y: -Math.cos(angle) * radius * .66,
+				fill: ShareData.ink(ctx, fill(d.data))
+			};
+		});
+		const mainText = ctx.text(ctx.marks("slice-values", "text", onSlice, (d) => d.key, stage.root)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("font-weight", 600).attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(mainText, {
+			x: (d) => d.x,
+			y: (d) => d.y + 4
+		});
+		const detailX = centre + dir * radius * (1.42 + detailReach / 2);
+		const barW = radius * .72, reachY = radius * .92;
+		const rimAngle = lead;
+		const rimX = centre + dir * Math.cos(rimAngle) * radius, rimY = Math.sin(rimAngle) * radius;
+		const pieRadius = radius * .62;
+		const entry = form === "bar-of-pie" ? detailX - dir * barW / 2 : detailX - dir * Math.cos(rimAngle) * pieRadius;
+		const entryY = form === "bar-of-pie" ? reachY : Math.sin(rimAngle) * pieRadius;
+		const links = moved ? [-1, 1].map((sign) => ({
+			key: sign,
+			d: `M${rimX.toFixed(1)},${(cy + sign * rimY).toFixed(1)}L${entry.toFixed(1)},${(cy + sign * entryY).toFixed(1)}`
+		})) : [];
+		ctx.set(ctx.marks("links", "path", links, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => d.d });
+		const barOf = () => {
+			let y = cy - reachY;
+			return (form === "bar-of-pie" ? small : []).map((share) => {
+				const tall = reachY * 2 * share.value / smallTotal, top = y;
+				y += tall;
+				return {
+					share,
+					y: top,
+					tall: Math.max(1, tall - 2)
+				};
+			});
+		};
+		const bars = barOf();
+		const stack = ctx.marks("detail-bars", "rect", bars, (d) => d.share.name).attr("fill", (d) => fill(d.share)).attr("rx", 3);
+		ctx.set(stack, {
+			x: detailX - barW / 2,
+			width: barW,
+			y: (d) => d.y,
+			height: (d) => d.tall
+		}, {
+			x: detailX - barW / 2,
+			width: 0,
+			y: (d) => d.y,
+			height: (d) => d.tall
+		}, 40);
+		ctx.hover(stack, (d) => tip(d.share));
+		const inner = pie().value((share) => share.value).sort(null)(form === "pie-of-pie" ? small : []);
+		const small2 = ShareData.arcs(() => 0, () => pieRadius, pieRadius, inner.length > 1 ? 2 : 0);
+		const detailStage = ctx.nest(`translate(${detailX},${cy})`, "detail");
+		const second = ctx.marks("detail-slices", "path", inner, (d) => d.data.name, detailStage.root).attr("fill", (d) => fill(d.data));
+		ctx.set(second, { d: (d) => small2(d) ?? "" }, { d: (d) => small2({
+			...d,
+			endAngle: d.startAngle
+		}) ?? "" }, 40);
+		ctx.hover(second, (d) => tip(d.data));
+		const captions = values ? [...bars.filter((d) => d.tall >= 15).map((d) => ({
+			key: d.share.name,
+			text: ShareData.percent(d.share.fraction),
+			x: detailX,
+			y: d.y + d.tall / 2 + 4,
+			anchor: "middle",
+			fill: ShareData.ink(ctx, fill(d.share))
+		})), ...inner.filter((d) => d.endAngle - d.startAngle > .6).map((d) => {
+			const angle = (d.startAngle + d.endAngle) / 2;
+			return {
+				key: d.data.name,
+				text: ShareData.percent(d.data.fraction),
+				x: detailX + Math.sin(angle) * pieRadius * .64,
+				y: cy - Math.cos(angle) * pieRadius * .64 + 4,
+				anchor: "middle",
+				fill: ShareData.ink(ctx, fill(d.data))
+			};
+		})] : [];
+		const detailText = ctx.text(ctx.marks("detail-values", "text", captions, (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", (d) => d.anchor).attr("font-weight", 600).attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(detailText, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { BarOfPie, BreakoutForm, BreakoutSide };

package/dist/charts/proportion/ConeFunnel.js

@@ -0,0 +1,126 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { ShareData } from "./ShareData.js";
+import { FunnelChart } from "./FunnelChart.js";
+import { CylinderGeometry, Mesh, MeshStandardMaterial, PlaneGeometry, ShadowMaterial } from "three";
+// src/charts/proportion/ConeFunnel.ts
+/** Cross-section of the solid. `Discs` stacks flat cylinders instead of tapering. */
+var ConeProfile = /* @__PURE__ */ function(ConeProfile) {
+	ConeProfile["Cone"] = "cone";
+	ConeProfile["Pyramid"] = "square-pyramid";
+	ConeProfile["Hexagon"] = "hexagonal";
+	ConeProfile["Discs"] = "stacked-discs";
+	return ConeProfile;
+}({});
+var ConeApex = /* @__PURE__ */ function(ConeApex) {
+	ConeApex["Down"] = "apex-down";
+	ConeApex["Up"] = "apex-up";
+	return ConeApex;
+}({});
+var ConeDepth = /* @__PURE__ */ function(ConeDepth) {
+	ConeDepth["Equal"] = "equal-height";
+	ConeDepth["Proportional"] = "proportional-height";
+	return ConeDepth;
+}({});
+var SEGMENTS = {
+	["cone"]: 64,
+	["square-pyramid"]: 4,
+	["hexagonal"]: 6,
+	["stacked-discs"]: 64
+};
+var TALL = 1.7;
+/** A funnel with depth, where each layer's cross-section area follows its stage's value. */
+var ConeFunnel = class extends Chart3D {
+	static meta = {
+		id: "cone-funnel",
+		name: "Cone funnel",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Stacks tapered 3D layers whose cross-section area follows each stage of a funnel or pyramid.",
+		tags: [
+			"3d funnel",
+			"3d pyramid",
+			"conversion"
+		],
+		sample: (seed) => FunnelChart.meta.sample(seed),
+		variants: {
+			profile: [
+				"cone",
+				"square-pyramid",
+				"hexagonal",
+				"stacked-discs"
+			],
+			apex: ["apex-down", "apex-up"],
+			depth: ["equal-height", "proportional-height"],
+			gap: [.03, .1]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			limit: 8,
+			profile: "cone",
+			apex: "apex-down",
+			depth: "equal-height",
+			gap: .03,
+			distance: 4.9
+		};
+	}
+	build(ctx) {
+		const { data, category, value, limit, profile, apex, depth, gap } = this.options;
+		const shares = ShareData.collect(data, category, value, void 0, limit);
+		ShareData.register(ctx, shares);
+		if (!shares.length) return;
+		const down = apex === "apex-down";
+		const stack = down ? shares : [...shares].reverse();
+		const top = Math.max(...shares.map((share) => share.value));
+		const radius = (amount) => .82 * Math.sqrt(amount / top);
+		const free = TALL - gap * (stack.length - 1);
+		const whole = shares.reduce((total, share) => total + share.value, 0);
+		const floor = free / stack.length / 3;
+		const heights = stack.map((share) => depth === "equal-height" ? free / stack.length : floor + (free - floor * stack.length) * share.value / whole);
+		const discs = profile === "stacked-discs";
+		let y = TALL / 2 - .05;
+		const shadow = new Mesh(new PlaneGeometry(3, 3), new ShadowMaterial({ opacity: .16 }));
+		shadow.rotation.x = -Math.PI / 2;
+		shadow.position.y = -1.7 / 2 - .08;
+		shadow.receiveShadow = true;
+		ctx.root.add(shadow);
+		stack.forEach((share, i) => {
+			const height = heights[i], next = stack[i + 1], before = stack[i - 1];
+			const upper = discs ? radius(share.value) : down ? radius(share.value) : before ? radius(before.value) : Math.max(.02, radius(share.value) * .2);
+			const lower = discs ? radius(share.value) : down ? next ? radius(next.value) : Math.max(.02, radius(share.value) * .55) : radius(share.value);
+			const flat = profile === "square-pyramid" || profile === "hexagonal";
+			const material = new MeshStandardMaterial({
+				color: ShareData.fill(ctx, share),
+				roughness: .5,
+				metalness: .05,
+				flatShading: flat
+			});
+			const mesh = new Mesh(new CylinderGeometry(upper, lower, height, SEGMENTS[profile], 1), material);
+			if (profile === "square-pyramid") mesh.rotation.y = Math.PI / 4;
+			mesh.castShadow = mesh.receiveShadow = true;
+			const centre = y - height / 2;
+			ctx.root.add(mesh);
+			ctx.reveal((t) => {
+				mesh.scale.set(Math.max(.001, t), Math.max(.001, t), Math.max(.001, t));
+				mesh.position.y = centre;
+			}, .7, i * .08);
+			ctx.pick(mesh, () => ({
+				title: share.name,
+				color: ShareData.fill(ctx, share),
+				rows: [[value, share.value], ["Share", ShareData.percent(share.fraction)]]
+			}));
+			ctx.label(`${ShareData.fit(share.name, 80)}  ${Scales.format(share.value, top)}`, [
+				Math.max(upper, lower) + .34,
+				centre,
+				0
+			], "ink", 11);
+			y -= height + gap;
+		});
+	}
+};
+export { ConeApex, ConeDepth, ConeFunnel, ConeProfile };

package/dist/charts/proportion/DonutChart.js

@@ -0,0 +1,103 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PieBase } from "./PieBase.js";
+import { ShareData } from "./ShareData.js";
+import { PieLabel, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/DonutChart.ts
+/** What the donut's hole says. `Peak` also raises the largest slice above the ring. */
+var DonutCentre = /* @__PURE__ */ function(DonutCentre) {
+	DonutCentre["Total"] = "total";
+	DonutCentre["Peak"] = "peak";
+	DonutCentre["Empty"] = "empty-centre";
+	return DonutCentre;
+}({});
+var SHRINK = .92;
+/** A pie with room for one headline number in the middle. */
+var DonutChart = class extends PieBase {
+	static meta = {
+		id: "donut",
+		name: "Donut chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows parts of a whole around a ring, keeping the centre free for the total or headline share.",
+		tags: [
+			"doughnut",
+			"ring",
+			"share"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			],
+			labels: [
+				PieLabel.Callout,
+				PieLabel.Spider,
+				PieLabel.Inside,
+				PieLabel.None
+			],
+			hole: [
+				.62,
+				.45,
+				.8
+			],
+			centre: [
+				"total",
+				"peak",
+				"empty-centre"
+			]
+		},
+		valid: (values) => !(values.labels === PieLabel.Inside && values.hole === .8)
+	};
+	peak = null;
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			hole: .62,
+			centre: "total"
+		};
+	}
+	hole() {
+		return this.options.hole;
+	}
+	prepare(shares) {
+		this.peak = this.options.centre === "peak" ? shares.reduce((top, share) => share.value > top.value ? share : top) : null;
+	}
+	outer(slice, radius) {
+		return !this.peak || slice.data.name === this.peak.name ? radius : radius * SHRINK;
+	}
+	decorate(ctx, shares, stage) {
+		const whole = shares.reduce((total, share) => total + share.value, 0);
+		const room = this.options.hole * stage.radius * 1.7;
+		const size = Math.max(14, Math.min(30, room / 3.2));
+		const lines = this.options.centre === "empty-centre" ? [] : this.peak ? [{
+			text: ShareData.percent(this.peak.fraction),
+			size,
+			y: 2,
+			tone: "ink"
+		}, {
+			text: ShareData.fit(this.peak.name, room),
+			size: 11,
+			y: 18,
+			tone: "secondary"
+		}] : [{
+			text: Scales.format(whole, whole),
+			size,
+			y: 4,
+			tone: "ink"
+		}, {
+			text: "Total",
+			size: 11,
+			y: 20,
+			tone: "muted"
+		}];
+		const text = ctx.marks("centre", "text", lines, (_, i) => i).attr("text-anchor", "middle").attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => d.tone === "ink" ? ctx.theme.ink : d.tone === "muted" ? ctx.theme.inkMuted : ctx.theme.inkSecondary).attr("font-size", (d) => d.size).attr("font-weight", (d) => d.size > 11 ? 600 : 400).text((d) => d.text);
+		ctx.set(text, { y: (d) => d.y });
+	}
+};
+export { DonutCentre, DonutChart };