@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/hierarchy/PhylogeneticTree.js

@@ -0,0 +1,245 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { PhyloBranches, PhyloLadder, PhyloLayout, PolarSweep, TreeLinkShape } from "./hierarchyEnums.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { polarFrame } from "./PolarFrame.js";
+import { TreeLinks } from "./TreeLinks.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { extent, max, scaleLinear, ticks } from "d3";
+// src/charts/hierarchy/PhylogeneticTree.ts
+var AXIS = 22;
+var TIP = 4;
+/** Evolutionary tree with real branch lengths: rectangular, slanted, circular, fan or unrooted. */
+var PhylogeneticTree = class extends TreeNodeLinkChart {
+	static meta = {
+		id: "phylogenetic-tree",
+		name: "Phylogenetic tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Draws evolutionary relationships with branch length as distance, in the rectangular, circular and unrooted layouts biologists use.",
+		tags: [
+			"phylogram",
+			"cladogram",
+			"evolution",
+			"biology",
+			"newick"
+		],
+		sample: (seed) => TreeSamples.branchLengths(seed),
+		variants: {
+			layout: Object.values(PhyloLayout),
+			branches: Object.values(PhyloBranches),
+			ladder: Object.values(PhyloLadder),
+			ruler: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			length: "length",
+			layout: PhyloLayout.Rectangular,
+			branches: PhyloBranches.Phylogram,
+			ladder: PhyloLadder.None,
+			ruler: true
+		};
+	}
+	drawn;
+	distances(root) {
+		const { length, branches } = this.options;
+		const distance = /* @__PURE__ */ new Map();
+		root.eachBefore((node) => {
+			if (branches === PhyloBranches.Cladogram) return distance.set(node, root.height - node.height);
+			const step = Number(node.data.source[length]);
+			distance.set(node, node.parent ? distance.get(node.parent) + (Number.isFinite(step) && step > 0 ? step : 1) : 0);
+		});
+		return distance;
+	}
+	/** Leaf order index for tips; a parent sits midway between its outer children. */
+	ordinates(root) {
+		let next = 0;
+		const order = /* @__PURE__ */ new Map();
+		root.eachAfter((node) => order.set(node, node.children ? (order.get(node.children[0]) + order.get(node.children.at(-1))) / 2 : next++));
+		return order;
+	}
+	ladderize(root) {
+		const { ladder } = this.options;
+		if (ladder === PhyloLadder.None) return;
+		root.eachAfter((node) => node.children?.sort((a, b) => (ladder === PhyloLadder.Up ? 1 : -1) * (a.leaves().length - b.leaves().length)));
+	}
+	drawTree(ctx) {
+		if (this.drawn !== this.options.layout) ctx.root.selectAll("*").remove();
+		this.drawn = this.options.layout;
+		const root = this.tree();
+		this.ladderize(root);
+		const distance = this.distances(root);
+		const { layout } = this.options;
+		if (layout === PhyloLayout.Unrooted) this.drawUnrooted(ctx, root, distance);
+		else if (layout === PhyloLayout.Circular || layout === PhyloLayout.Fan) this.drawCircular(ctx, root, distance);
+		else this.drawLinear(ctx, root, distance);
+	}
+	tipSpace(root, limit, size = 10) {
+		return Math.min(limit, (max(root.leaves(), (leaf) => TreeStyle.width(leaf.data.name, size)) ?? 0) + 10);
+	}
+	drawLinear(ctx, root, distance) {
+		const { width, height } = ctx.plot;
+		const { layout, ruler } = this.options;
+		const leaves = root.leaves().length;
+		const reserve = ruler ? AXIS : 0;
+		const gap = (height - reserve) / Math.max(1, leaves);
+		const room = gap >= 11 ? this.tipSpace(root, width * .3) : 8;
+		const reach = max(root.descendants(), (node) => distance.get(node)) || 1;
+		const x = scaleLinear([0, reach], [6, width - room]);
+		const order = this.ordinates(root);
+		const y = (node) => (order.get(node) + .5) * gap;
+		if (ruler) this.axis(ctx, x, height - reserve + 4);
+		const spots = root.descendants().map((node) => {
+			const spot = {
+				node,
+				x: x(distance.get(node)),
+				y: y(node),
+				r: node.children ? 0 : TIP
+			};
+			if (!node.children && gap >= 11) spot.label = {
+				text: TreeStyle.fit(node.data.name, room - 10, 10),
+				x: spot.x + 7,
+				y: spot.y,
+				dy: ".35em",
+				size: 10
+			};
+			return spot;
+		});
+		this.paintTree(ctx, spots, (from, to) => layout === PhyloLayout.Slanted ? `M${from.x},${from.y}L${to.x},${to.y}` : `M${from.x},${from.y}V${to.y}H${to.x}`);
+	}
+	drawCircular(ctx, root, distance) {
+		const { ruler, layout } = this.options;
+		const leaves = root.leaves().length;
+		const sweep = layout === PhyloLayout.Fan ? PolarSweep.Half : PolarSweep.Full;
+		const probe = polarFrame(sweep, ctx.plot.width, ctx.plot.height, 2);
+		const pad = this.tipSpace(root, probe.radius * .36);
+		const frame = polarFrame(sweep, ctx.plot.width, ctx.plot.height, pad);
+		const span = (frame.end - frame.start) * (sweep === PolarSweep.Full ? 1 - 1 / leaves : 1);
+		const order = this.ordinates(root);
+		const reach = max(root.descendants(), (node) => distance.get(node)) || 1;
+		const angle = (node) => frame.start + (leaves > 1 ? order.get(node) / (leaves - 1) * span : 0);
+		const radius = scaleLinear([0, reach], [0, frame.radius]);
+		const stage = ctx.nest(`translate(${frame.cx},${frame.cy})`, "stage");
+		const marks = ruler ? ticks(0, reach, 4).filter((tick) => tick > 0) : [];
+		const large = sweep === PolarSweep.Full;
+		const circle = (value) => {
+			const r = radius(value);
+			return large ? `M0,${-r}A${r},${r} 0 1 1 0,${r}A${r},${r} 0 1 1 0,${-r}` : `M${TreeLinks.polar({
+				angle: frame.start,
+				radius: r
+			})}A${r},${r} 0 0 1 ${TreeLinks.polar({
+				angle: frame.end,
+				radius: r
+			})}`;
+		};
+		const rings = stage.marks("rings", "path", marks, (mark) => mark).attr("fill", "none").attr("stroke", this.theme.grid).attr("stroke-width", 1);
+		stage.set(rings, { d: circle }, {});
+		const roomy = frame.radius * span / leaves >= 11;
+		const polar = new Map(root.descendants().map((node) => [node, {
+			angle: angle(node),
+			radius: radius(distance.get(node))
+		}]));
+		const spots = root.descendants().map((node) => {
+			const at = polar.get(node);
+			const [x, y] = TreeLinks.polar(at);
+			const spot = {
+				node,
+				x,
+				y,
+				r: node.children ? 0 : TIP
+			};
+			if (!node.children && roomy) {
+				const left = Math.sin(at.angle) < 0;
+				spot.label = {
+					text: TreeStyle.fit(node.data.name, pad - 8, 10),
+					x: 0,
+					y: 0,
+					dy: ".35em",
+					size: 10,
+					anchor: left ? "end" : "start",
+					transform: `rotate(${at.angle * 180 / Math.PI - 90}) translate(${at.radius + 7},0)${left ? " rotate(180)" : ""}`
+				};
+			}
+			return spot;
+		});
+		this.paintTree(stage, spots, (from, to) => TreeLinks.radial(TreeLinkShape.Elbow, polar.get(from.node), polar.get(to.node)));
+	}
+	/** Equal-angle algorithm: each subtree gets a wedge sized by its leaves, and branches keep their true length. */
+	drawUnrooted(ctx, root, distance) {
+		const { width, height } = ctx.plot;
+		const { ruler } = this.options;
+		const points = /* @__PURE__ */ new Map([[root, [0, 0]]]);
+		const spread = (node, from, to) => {
+			let angle = from;
+			for (const kid of node.children ?? []) {
+				const wedge = (to - from) * kid.leaves().length / node.leaves().length;
+				const heading = angle + wedge / 2;
+				const length = distance.get(kid) - distance.get(node);
+				const [x, y] = points.get(node);
+				points.set(kid, [x + length * Math.cos(heading), y + length * Math.sin(heading)]);
+				spread(kid, angle, angle + wedge);
+				angle += wedge;
+			}
+		};
+		spread(root, 0, 2 * Math.PI);
+		const all = [...points.values()];
+		const [x0, x1] = extent(all, (p) => p[0]), [y0, y1] = extent(all, (p) => p[1]), bar = ruler ? AXIS : 0;
+		const scale = Math.min((width - 52) / (x1 - x0 || 1), (height - 52 - bar) / (y1 - y0 || 1));
+		const px = (x) => width / 2 + (x - (x0 + x1) / 2) * scale;
+		const py = (y) => (height - bar) / 2 + (y - (y0 + y1) / 2) * scale;
+		const spots = root.descendants().map((node) => {
+			const [wx, wy] = points.get(node);
+			const x = px(wx), y = py(wy);
+			const spot = {
+				node,
+				x,
+				y,
+				r: node.children ? 0 : TIP
+			};
+			if (!node.children) {
+				const right = wx >= (x0 + x1) / 2;
+				spot.label = {
+					text: TreeStyle.fit(node.data.name, 38, 10),
+					x: x + (right ? 7 : -7),
+					y,
+					dy: ".35em",
+					size: 10,
+					anchor: right ? "start" : "end",
+					halo: true
+				};
+			}
+			return spot;
+		});
+		TreeStyle.declutter(spots);
+		const unit = ticks(0, (max(all, (p) => Math.hypot(p[0], p[1])) ?? 1) / 2, 2)[1] ?? 1;
+		const scaleBar = ctx.marks("scale-bar", "path", ruler ? [unit] : []).attr("fill", "none").attr("stroke", this.theme.axis).attr("stroke-width", 2);
+		ctx.set(scaleBar, { d: (value) => `M4,${height - 6}h${value * scale}` }, {});
+		this.labels(ctx, "scale-note", ruler ? [{
+			key: "unit",
+			text: `${unit}`,
+			x: 4 + unit * scale / 2,
+			y: height - 11,
+			anchor: "middle",
+			size: 10
+		}] : []);
+		this.paintTree(ctx, spots, (from, to) => `M${from.x},${from.y}L${to.x},${to.y}`);
+	}
+	axis(ctx, x, y) {
+		const values = x.ticks(5);
+		const rules = ctx.marks("axis", "path", values, (value) => value).attr("fill", "none").attr("stroke", this.theme.axis).attr("stroke-width", 1);
+		ctx.set(rules, { d: (value) => `M${x(value)},${y}v5` }, {});
+		this.labels(ctx, "ticks", values.map((value) => ({
+			key: `${value}`,
+			text: `${value}`,
+			x: x(value),
+			y: y + 16,
+			anchor: "middle",
+			size: 10,
+			fill: this.theme.inkMuted
+		})));
+	}
+};
+export { PhylogeneticTree };

package/dist/charts/hierarchy/PolarFrame.js

@@ -0,0 +1,35 @@
+import { PolarSweep } from "./hierarchyEnums.js";
+// src/charts/hierarchy/PolarFrame.ts
+var CORNER = Math.SQRT1_2;
+/** Fits a polar sweep into a plot, returning its centre, radius and angle range (radians clockwise from twelve o'clock). */
+function polarFrame(sweep, width, height, pad = 0) {
+	if (sweep === PolarSweep.Half) {
+		const radius = Math.max(8, Math.min(width / 2 - pad, height - 2 * pad));
+		return {
+			cx: width / 2,
+			cy: (height + radius) / 2 + pad / 2,
+			radius,
+			start: -Math.PI / 2,
+			end: Math.PI / 2
+		};
+	}
+	if (sweep === PolarSweep.ThreeQuarter) {
+		const radius = Math.max(8, Math.min(width / 2 - pad, (height - 2 * pad) / (1 + CORNER)));
+		return {
+			cx: width / 2,
+			cy: (height - radius * (1 + CORNER)) / 2 + radius,
+			radius,
+			start: -3 * Math.PI / 4,
+			end: 3 * Math.PI / 4
+		};
+	}
+	const radius = Math.max(8, Math.min(width, height) / 2 - pad);
+	return {
+		cx: width / 2,
+		cy: height / 2,
+		radius,
+		start: 0,
+		end: 2 * Math.PI
+	};
+}
+export { polarFrame };

package/dist/charts/hierarchy/RadialDendrogram.js

@@ -0,0 +1,64 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { DendrogramTip, PolarSweep, TreeLinkShape, TreeSpacing } from "./hierarchyEnums.js";
+import { RadialTreeBase } from "./RadialTreeBase.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { arc, cluster, max } from "d3";
+// src/charts/hierarchy/RadialDendrogram.ts
+var BAND = 26;
+/** Dendrogram wrapped around a circle: every leaf on the rim, which suits long lists of leaves. */
+var RadialDendrogram = class extends RadialTreeBase {
+	static meta = {
+		id: "radial-dendrogram",
+		name: "Radial dendrogram",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Wraps a dendrogram around a circle so every leaf sits on the rim, with room for long leaf lists and tip values.",
+		tags: [
+			"circular dendrogram",
+			"cluster",
+			"polar"
+		],
+		sample: (seed) => TreeSamples.uneven(seed),
+		variants: {
+			sweep: Object.values(PolarSweep),
+			link: [
+				TreeLinkShape.Elbow,
+				TreeLinkShape.Bump,
+				TreeLinkShape.Straight
+			],
+			tip: Object.values(DendrogramTip),
+			rings: [false, true],
+			spacing: [TreeSpacing.Tidy, TreeSpacing.Uniform]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			link: TreeLinkShape.Elbow,
+			tip: DendrogramTip.None
+		};
+	}
+	layout() {
+		return cluster();
+	}
+	radius() {
+		return (node) => node.children || this.options.tip !== DendrogramTip.None ? 0 : 4;
+	}
+	tipBand() {
+		return this.options.tip === DendrogramTip.None ? 0 : BAND;
+	}
+	paintTips(stage, tips, outer, band, step) {
+		const peak = max(tips, (spot) => spot.node.value) || 1;
+		const heat = this.options.tip === DendrogramTip.Heat;
+		const half = Math.min(step, .5 * band) / (2 * outer) * .8;
+		const wedge = arc().startAngle((spot) => spot.angle - half).endAngle((spot) => spot.angle + half).innerRadius(outer + 3).outerRadius((spot) => outer + 3 + (heat ? band - 6 : Math.max(1, (band - 6) * (spot.node.value ?? 0) / peak)));
+		const marks = stage.marks("tips", "path", tips, (spot) => spot.node.data.id).attr("fill", (spot) => heat ? this.palette.sequential((spot.node.value ?? 0) / peak) : this.style.branch(spot.node));
+		stage.set(marks, {
+			d: wedge,
+			opacity: 1
+		}, { opacity: 0 }, this.stagger(marks, 4));
+		this.interact(stage, marks, (spot) => spot.node);
+	}
+};
+export { RadialDendrogram };

package/dist/charts/hierarchy/RadialTreeBase.js

@@ -0,0 +1,95 @@
+import { PolarSweep, TreeLinkShape, TreeSpacing } from "./hierarchyEnums.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { polarFrame } from "./PolarFrame.js";
+import { TreeLinks } from "./TreeLinks.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { max } from "d3";
+// src/charts/hierarchy/RadialTreeBase.ts
+var LABEL = 10;
+/** Trees grown outward from a centre, with leaf labels following their spoke. */
+var RadialTreeBase = class extends TreeNodeLinkChart {
+	/** Radial room outside the tips, in px, for `paintTips`. */
+	tipBand() {
+		return 0;
+	}
+	paintTips(_stage, _tips, _outer, _band, _step) {}
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: PolarSweep.Full,
+			link: TreeLinkShape.Bump,
+			spacing: TreeSpacing.Tidy,
+			rings: false
+		};
+	}
+	drawTree(ctx) {
+		const { sweep, link, spacing, rings } = this.options;
+		const root = this.tree();
+		const leaves = root.leaves();
+		const probe = polarFrame(sweep, ctx.plot.width, ctx.plot.height, 2);
+		const span = probe.end - probe.start;
+		const labelled = probe.radius * .72 * span / Math.max(1, leaves.length) >= LABEL;
+		const pad = labelled ? Math.min((max(leaves, (leaf) => TreeStyle.width(leaf.data.name, LABEL)) ?? 0) + 10, probe.radius * .42) : 6;
+		const band = this.tipBand();
+		const frame = polarFrame(sweep, ctx.plot.width, ctx.plot.height, pad + band);
+		const reach = frame.radius;
+		const open = sweep === PolarSweep.Full ? 1 - 1 / Math.max(1, leaves.length) : 1;
+		const placed = this.layout().size([span * open, reach]).separation(TreeLinks.separation(spacing, true))(root);
+		const stage = ctx.nest(`translate(${frame.cx},${frame.cy})`, "stage");
+		const radius = this.radius(root);
+		this.paintRings(stage, frame, rings ? placed : null);
+		const spots = placed.descendants().map((node) => this.spot(node, frame, radius, labelled ? pad - 8 : 0, band));
+		let last = -Infinity;
+		for (const spot of spots.filter((item) => item.label).sort((a, b) => a.angle - b.angle)) if ((spot.angle - last) * (spot.radius + 8) < 12) spot.label = void 0;
+		else last = spot.angle;
+		this.paintTree(stage, spots, (from, to) => TreeLinks.radial(link, from, to));
+		this.paintTips(stage, band ? spots.filter((spot) => !spot.node.children) : [], reach, band, frame.radius * span / Math.max(1, leaves.length));
+	}
+	spot(node, frame, radius, room, band) {
+		const polar = {
+			angle: frame.start + node.x,
+			radius: node.y
+		};
+		const [x, y] = TreeLinks.polar(polar);
+		const spot = {
+			node,
+			x,
+			y,
+			r: radius(node),
+			...polar
+		};
+		const text = room && !node.children ? TreeStyle.fit(node.data.name, room, LABEL) : "";
+		if (text) {
+			const left = Math.sin(polar.angle) < 0;
+			const turn = polar.angle * 180 / Math.PI - 90;
+			const out = polar.radius + Math.max(spot.r, 2) + 5 + band;
+			spot.label = {
+				text,
+				x: 0,
+				y: 0,
+				dy: ".35em",
+				size: LABEL,
+				anchor: left ? "end" : "start",
+				transform: `rotate(${turn}) translate(${out},0)${left ? " rotate(180)" : ""}`
+			};
+		}
+		return spot;
+	}
+	paintRings(stage, frame, root) {
+		const steps = [...new Set(root?.descendants().filter((node) => node.depth > 0).map((node) => node.y))];
+		const ring = (radius) => {
+			if (frame.end - frame.start >= 2 * Math.PI) return `M0,${-radius}A${radius},${radius} 0 1 1 0,${radius}A${radius},${radius} 0 1 1 0,${-radius}`;
+			const large = frame.end - frame.start > Math.PI ? 1 : 0;
+			return `M${TreeLinks.polar({
+				angle: frame.start,
+				radius
+			})}A${radius},${radius} 0 ${large} 1 ${TreeLinks.polar({
+				angle: frame.end,
+				radius
+			})}`;
+		};
+		const guides = stage.marks("rings", "path", steps, (step) => step).attr("fill", "none").attr("stroke", this.theme.grid);
+		stage.set(guides, { d: ring }, {});
+	}
+};
+export { RadialTreeBase };

package/dist/charts/hierarchy/RadialTreeChart.js

@@ -0,0 +1,43 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { PolarSweep, TreeLinkShape, TreeNodeMark, TreeSpacing } from "./hierarchyEnums.js";
+import { RadialTreeBase } from "./RadialTreeBase.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { tree } from "d3";
+// src/charts/hierarchy/RadialTreeChart.ts
+/** Tidy tree in polar space: level sits on radius, using a square area well for wide trees. */
+var RadialTreeChart = class extends RadialTreeBase {
+	static meta = {
+		id: "radial-tree",
+		name: "Radial tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Grows a tidy tree outward from its root, with depth on radius, to fit wide hierarchies into a compact area.",
+		tags: [
+			"polar tree",
+			"node link",
+			"circular tree"
+		],
+		sample: (seed) => TreeSamples.uneven(seed),
+		variants: {
+			sweep: Object.values(PolarSweep),
+			link: Object.values(TreeLinkShape),
+			mark: Object.values(TreeNodeMark),
+			rings: [false, true],
+			spacing: [TreeSpacing.Tidy, TreeSpacing.Clustered]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mark: TreeNodeMark.Dot
+		};
+	}
+	layout() {
+		return tree();
+	}
+	radius(root) {
+		return this.dotRadius(root, this.options.mark);
+	}
+};
+export { RadialTreeChart };

package/dist/charts/hierarchy/SunburstChart.js

@@ -0,0 +1,133 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { HierarchyMeasure, HierarchySort, PolarSweep, SunburstRings, countsKeepDefaultSort } from "./hierarchyEnums.js";
+import { polarFrame } from "./PolarFrame.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { arc, easeCubicOut, interpolateNumber, partition } from "d3";
+// src/charts/hierarchy/SunburstChart.ts
+var degrees = (radians) => radians * 180 / Math.PI;
+/** Concentric rings of arcs: for following shares outward through a few levels of a hierarchy. */
+var SunburstChart = class extends HierarchyChart {
+	static meta = {
+		id: "sunburst",
+		name: "Sunburst",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Shows a hierarchy as concentric rings of arcs, so shares can be followed outward from the centre level by level.",
+		tags: [
+			"ring chart",
+			"multi-level pie",
+			"radial partition",
+			"fan chart"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			sweep: Object.values(PolarSweep),
+			rings: Object.values(SunburstRings),
+			hole: [
+				.3,
+				0,
+				.55
+			],
+			sort: [HierarchySort.ValueDescending, HierarchySort.Input],
+			measure: [HierarchyMeasure.Value, HierarchyMeasure.LeafCount]
+		},
+		valid: countsKeepDefaultSort
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: PolarSweep.Full,
+			rings: SunburstRings.Even,
+			hole: .3
+		};
+	}
+	ring(depth, levels, radius) {
+		const inner = this.options.hole * radius, t = depth / levels;
+		if (this.options.rings === SunburstRings.EqualArea) return Math.sqrt(inner ** 2 + (radius ** 2 - inner ** 2) * t);
+		if (this.options.rings === SunburstRings.Tapered) return inner + (radius - inner) * t ** .62;
+		return inner + (radius - inner) * t;
+	}
+	drawTree(ctx) {
+		const frame = polarFrame(this.options.sweep, ctx.plot.width, ctx.plot.height, 2);
+		const stage = ctx.nest(`translate(${frame.cx},${frame.cy})`, "stage");
+		const root = partition().size([frame.end - frame.start, 1])(this.tree());
+		const levels = Math.max(1, root.height);
+		const inner = (node) => this.ring(node.depth - 1, levels, frame.radius) + (node.depth > 1 || this.options.hole > 0 ? 1 : 0);
+		const outer = (node) => this.ring(node.depth, levels, frame.radius) - 1;
+		const start = (node) => node.x0 + frame.start;
+		const end = (node) => node.x1 + frame.start;
+		const shape = (node, from, to) => arc().startAngle(from).endAngle(to).innerRadius(inner).outerRadius(outer).padAngle(4 / frame.radius).padRadius(frame.radius / 2).cornerRadius(3)(node) ?? "";
+		const nodes = root.descendants().filter((node) => node.depth > 0 && node.x1 > node.x0);
+		const arcs = stage.marks("arcs", "path", nodes, (node) => node.data.id).attr("fill", (node) => this.style.fill(node));
+		this.sweep(arcs, shape, start, end, frame.start);
+		this.interact(stage, arcs, (node) => node);
+		const notes = nodes.flatMap((node) => this.arcLabel(node, start(node), end(node), inner(node), outer(node)));
+		if (this.options.hole >= .3 && frame.radius * this.options.hole > 24 && this.options.sweep !== PolarSweep.Half) notes.push({
+			key: "total",
+			text: TreeStyle.fit(this.style.format(root.value ?? 0), 2 * this.options.hole * frame.radius - 8, 14),
+			x: 0,
+			y: 0,
+			anchor: "middle",
+			dy: ".35em",
+			size: 14,
+			weight: 600,
+			fill: this.theme.ink
+		});
+		this.labels(stage, "names", notes);
+	}
+	/** Path text cannot tween through arc flags, so every arc opens by angle from `rest`, the whole ring as one fan; later paints move on from the angles held. */
+	sweep(arcs, shape, start, end, rest) {
+		if (!this.animated) {
+			arcs.interrupt().attr("d", (node) => shape(node, start(node), end(node))).property("__angles", (node) => [start(node), end(node)]);
+			return;
+		}
+		arcs.transition().duration(650).ease(easeCubicOut).attrTween("d", function(node) {
+			const held = this;
+			const [from, to] = held.__angles ?? [rest, rest];
+			const a0 = interpolateNumber(from, start(node)), a1 = interpolateNumber(to, end(node));
+			held.__angles = [start(node), end(node)];
+			return (t) => shape(node, a0(t), a1(t));
+		});
+	}
+	arcLabel(node, start, end, inner, outer) {
+		const middle = (start + end) / 2, radius = (inner + outer) / 2;
+		const chord = (end - start) * radius, thick = outer - inner;
+		if (chord < 12 || thick < 12) return [];
+		const fill = this.style.ink(this.style.fill(node)), key = node.data.id;
+		const name = node.data.name;
+		const [x, y] = [radius * Math.sin(middle), -radius * Math.cos(middle)];
+		if (TreeStyle.width(name, 10) <= thick - 6) {
+			const flip = Math.sin(middle) < 0;
+			return [{
+				key,
+				text: name,
+				x,
+				y,
+				anchor: "middle",
+				dy: ".35em",
+				size: 10,
+				fill,
+				transform: `rotate(${degrees(middle) - 90 + (flip ? 180 : 0)} ${x} ${y})`
+			}];
+		}
+		if (chord > 34 && thick >= 15) {
+			const flip = Math.cos(middle) < 0;
+			return [{
+				key,
+				text: TreeStyle.fit(name, chord - 8, 10),
+				x,
+				y,
+				anchor: "middle",
+				dy: ".35em",
+				size: 10,
+				fill,
+				transform: `rotate(${degrees(middle) + (flip ? 180 : 0)} ${x} ${y})`
+			}];
+		}
+		return [];
+	}
+};
+export { SunburstChart };

package/dist/charts/hierarchy/TidyTreeChart.js

@@ -0,0 +1,42 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { CartesianTreeChart } from "./CartesianTreeChart.js";
+import { TreeDirection, TreeLinkShape, TreeNodeMark, TreeSpacing } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { tree } from "d3";
+// src/charts/hierarchy/TidyTreeChart.ts
+/** Reingold-Tilford tree: for showing structure and depth, with each level on one line. */
+var TidyTreeChart = class extends CartesianTreeChart {
+	static meta = {
+		id: "tidy-tree",
+		name: "Tidy tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Lays out a tree compactly with every level on one line, for showing structure and depth over size.",
+		tags: [
+			"node link",
+			"reingold tilford",
+			"tree diagram"
+		],
+		sample: (seed) => TreeSamples.uneven(seed),
+		variants: {
+			direction: Object.values(TreeDirection),
+			link: Object.values(TreeLinkShape),
+			mark: Object.values(TreeNodeMark),
+			spacing: Object.values(TreeSpacing)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mark: TreeNodeMark.Dot
+		};
+	}
+	layout() {
+		return tree();
+	}
+	radius(root) {
+		return this.dotRadius(root, this.options.mark);
+	}
+};
+export { TidyTreeChart };