@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/hierarchy/BalloonTree.js

@@ -0,0 +1,136 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { BalloonAngles, BalloonSpread, HierarchySort, TreeLinkShape, TreeNodeMark } from "./hierarchyEnums.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { extent, max, sum } from "d3";
+// src/charts/hierarchy/BalloonTree.ts
+var LEAF = 1;
+var FAN = Math.PI * 1.25;
+/** Each subtree orbits its parent, so branches read as separate clusters with no shared levels. */
+var BalloonTree = class extends TreeNodeLinkChart {
+	static meta = {
+		id: "balloon-tree",
+		name: "Balloon tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Places each subtree on a circle around its parent, so branches read as separate clusters instead of shared levels.",
+		tags: [
+			"bubble tree",
+			"radial cluster",
+			"node link"
+		],
+		sample: (seed) => TreeSamples.uneven(seed, 3, 4),
+		variants: {
+			spread: Object.values(BalloonSpread),
+			angles: Object.values(BalloonAngles),
+			link: [TreeLinkShape.Straight, TreeLinkShape.Bump],
+			mark: [TreeNodeMark.Dot, TreeNodeMark.Area],
+			orbits: [true, false],
+			sort: [HierarchySort.ValueDescending, HierarchySort.Input]
+		},
+		valid: ({ link, orbits }) => link === TreeLinkShape.Straight || orbits === true
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			spread: BalloonSpread.Orbit,
+			angles: BalloonAngles.Weighted,
+			link: TreeLinkShape.Straight,
+			mark: TreeNodeMark.Dot,
+			orbits: true
+		};
+	}
+	wedges(node, bubbles) {
+		const kids = node.children ?? [];
+		const whole = node.parent && this.options.spread === BalloonSpread.Fan ? FAN : 2 * Math.PI;
+		const weights = kids.map((kid) => this.options.angles === BalloonAngles.Weighted ? bubbles.get(kid).reach : 1);
+		const total = sum(weights) || 1;
+		return weights.map((weight) => weight / total * whole);
+	}
+	layout(root) {
+		const bubbles = /* @__PURE__ */ new Map();
+		root.eachAfter((node) => {
+			const bubble = {
+				reach: LEAF,
+				orbit: 0,
+				x: 0,
+				y: 0
+			};
+			bubbles.set(node, bubble);
+			if (!node.children) return;
+			const shares = this.wedges(node, bubbles);
+			bubble.orbit = max(node.children, (kid, i) => {
+				const half = Math.min(shares[i] / 2, Math.PI / 2);
+				return bubbles.get(kid).reach / Math.max(.05, Math.sin(half));
+			}) + LEAF;
+			bubble.reach = bubble.orbit + max(node.children, (kid) => bubbles.get(kid).reach);
+		});
+		const place = (node, heading) => {
+			const bubble = bubbles.get(node);
+			const shares = this.wedges(node, bubbles);
+			let angle = heading - sum(shares) / 2;
+			node.children?.forEach((kid, i) => {
+				const direction = angle + shares[i] / 2;
+				angle += shares[i];
+				const child = bubbles.get(kid);
+				child.x = bubble.x + bubble.orbit * Math.cos(direction);
+				child.y = bubble.y + bubble.orbit * Math.sin(direction);
+				place(kid, direction);
+			});
+		};
+		place(root, -Math.PI / 2);
+		return bubbles;
+	}
+	drawTree(ctx) {
+		const { width, height } = ctx.plot;
+		const { link, mark, orbits } = this.options;
+		const root = this.tree();
+		const bubbles = this.layout(root);
+		const all = [...bubbles.values()];
+		const [x0, x1] = extent(all, (b) => b.x - b.orbit), [x2, x3] = extent(all, (b) => b.x + b.orbit);
+		const [y0, y1] = extent(all, (b) => b.y - b.orbit), [y2, y3] = extent(all, (b) => b.y + b.orbit);
+		const left = Math.min(x0, x1), right = Math.max(x2, x3), top = Math.min(y0, y1), bottom = Math.max(y2, y3);
+		const scale = Math.min((width - 28) / Math.max(1, right - left), (height - 28) / Math.max(1, bottom - top));
+		const px = (x) => width / 2 + (x - (left + right) / 2) * scale;
+		const py = (y) => height / 2 + (y - (top + bottom) / 2) * scale;
+		const rings = ctx.marks("orbits", "circle", orbits ? root.descendants().filter((node) => node.children) : [], (node) => node.data.id).attr("fill", "none").attr("stroke", this.theme.grid).attr("stroke-width", 1.5);
+		ctx.set(rings, {
+			cx: (node) => px(bubbles.get(node).x),
+			cy: (node) => py(bubbles.get(node).y),
+			r: (node) => bubbles.get(node).orbit * scale
+		}, {
+			cx: (node) => px(bubbles.get(node).x),
+			cy: (node) => py(bubbles.get(node).y),
+			r: 0
+		});
+		const radius = this.dotRadius(root, mark);
+		const spots = root.descendants().map((node) => {
+			const bubble = bubbles.get(node);
+			const x = px(bubble.x), y = py(bubble.y), r = radius(node);
+			const spot = {
+				node,
+				x,
+				y,
+				r
+			};
+			if (node.depth === 1) spot.label = {
+				text: TreeStyle.fit(node.data.name, 70),
+				x,
+				y: y - r - 5,
+				anchor: "middle",
+				halo: true,
+				fill: this.theme.ink,
+				weight: 500
+			};
+			return spot;
+		});
+		this.paintTree(ctx, spots, (from, to) => {
+			if (link === TreeLinkShape.Straight) return `M${from.x},${from.y}L${to.x},${to.y}`;
+			const midX = (from.x + to.x) / 2 + (to.y - from.y) * .18, midY = (from.y + to.y) / 2 - (to.x - from.x) * .18;
+			return `M${from.x},${from.y}Q${midX},${midY} ${to.x},${to.y}`;
+		});
+	}
+};
+export { BalloonTree };

package/dist/charts/hierarchy/CartesianTreeChart.js

@@ -0,0 +1,125 @@
+import { TreeDirection, TreeLinkShape, TreeSpacing } from "./hierarchyEnums.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { TreeLinks } from "./TreeLinks.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { max } from "d3";
+// src/charts/hierarchy/CartesianTreeChart.ts
+var INSET = 10;
+var LEAD = 16;
+var LABEL_GAP = 10.5;
+/** Tidy trees and dendrograms in any of four directions, reserving room for tip labels. */
+var CartesianTreeChart = class extends TreeNodeLinkChart {
+	/** Depth reserved after the tips, in px, for decorations drawn by `paintTips`. */
+	tipBand() {
+		return 0;
+	}
+	paintTips(_ctx, _tips, _frame) {}
+	badge(_node) {}
+	act(_node) {}
+	prepare() {}
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.LeftRight,
+			link: TreeLinkShape.Bump,
+			spacing: TreeSpacing.Tidy
+		};
+	}
+	drawTree(ctx) {
+		this.prepare();
+		const { direction, link, spacing } = this.options;
+		const { width, height } = ctx.plot;
+		const root = this.tree();
+		const horizontal = direction === TreeDirection.LeftRight || direction === TreeDirection.RightLeft;
+		const sign = direction === TreeDirection.RightLeft || direction === TreeDirection.BottomUp ? -1 : 1;
+		const breadth = (horizontal ? height : width) - 20, depth = horizontal ? width : height;
+		const leaves = root.leaves();
+		const gap = breadth / Math.max(1, leaves.length);
+		const longest = max(leaves, (leaf) => TreeStyle.width(leaf.data.name)) ?? 0;
+		const beside = horizontal ? gap >= 11 : false;
+		const level = !horizontal && gap >= longest + 6;
+		const turned = !horizontal && !level && gap >= 11;
+		const room = beside || turned ? Math.min(longest + 10, depth * .3) : level ? 20 : 8;
+		const band = this.tipBand();
+		const placed = this.layout().size([breadth, depth - LEAD - room - band]).separation(TreeLinks.separation(spacing))(root);
+		const radius = this.radius(root);
+		const at = (node) => {
+			const along = sign > 0 ? LEAD + node.y : depth - LEAD - node.y;
+			return horizontal ? [along, INSET + node.x] : [INSET + node.x, along];
+		};
+		const peers = (placed.children?.length ?? 1) * 16;
+		const spots = placed.descendants().map((node) => {
+			const [x, y] = at(node);
+			const badge = this.badge(node), r = badge ? 9 : radius(node);
+			const spot = {
+				node,
+				x,
+				y,
+				r,
+				badge
+			};
+			if (node.children && node.depth <= 1) {
+				if (breadth >= peers && (horizontal || breadth / (placed.children?.length ?? 1) >= TreeStyle.width(node.data.name))) spot.label = horizontal ? {
+					text: node.data.name,
+					x,
+					y: y - Math.max(r, 3) - 5,
+					anchor: "middle",
+					halo: true,
+					fill: this.theme.ink,
+					weight: 500
+				} : {
+					text: node.data.name,
+					x: x + Math.max(r, 3) + 5,
+					y,
+					dy: ".35em",
+					halo: true,
+					fill: this.theme.ink,
+					weight: 500
+				};
+				return spot;
+			}
+			const off = Math.max(r, 2) + 6 + (node.children ? 0 : band);
+			const text = level ? node.data.name : TreeStyle.fit(node.data.name, room - 8);
+			if (node.children) return spot;
+			if (beside) spot.label = {
+				text,
+				x: x + sign * off,
+				y,
+				dy: ".35em",
+				anchor: sign > 0 ? "start" : "end",
+				halo: true
+			};
+			if (level) spot.label = {
+				text,
+				x,
+				y: y + sign * off,
+				dy: sign > 0 ? ".7em" : void 0,
+				anchor: "middle",
+				halo: true
+			};
+			if (turned) spot.label = {
+				text,
+				x,
+				y: y + sign * off,
+				dy: ".35em",
+				anchor: sign > 0 ? "end" : "start",
+				halo: true,
+				transform: `rotate(-90 ${x} ${y + sign * off})`
+			};
+			return spot;
+		});
+		let last = -Infinity;
+		const along = (spot) => horizontal ? spot.y : spot.x;
+		for (const spot of spots.filter((item) => item.label && !item.node.children).sort((a, b) => along(a) - along(b))) if (along(spot) - last < (level ? longest + 2 : LABEL_GAP)) spot.label = void 0;
+		else last = along(spot);
+		const elbowed = (from, to) => TreeLinks.cartesian(link, [from.x, from.y], [to.x, to.y], horizontal);
+		this.paintTree(ctx, spots, elbowed, (node) => this.act(node));
+		this.paintTips(ctx, band ? spots.filter((spot) => !spot.node.children) : [], {
+			horizontal,
+			sign,
+			band,
+			thickness: Math.max(2, gap - 2)
+		});
+	}
+};
+export { CartesianTreeChart };

package/dist/charts/hierarchy/CirclePackChart.js

@@ -0,0 +1,92 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { CirclePackLayout, HierarchyMeasure, HierarchySort, countsKeepDefaultSort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { pack } from "d3";
+// src/charts/hierarchy/CirclePackChart.ts
+/** Nested or flat bubbles, with leaf area showing value: for an organic overview where exact comparison matters less. */
+var CirclePackChart = class extends HierarchyChart {
+	static meta = {
+		id: "circle-pack",
+		name: "Circle packing",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Packs leaves as circles sized by area inside circles for each parent, giving an organic overview of nested groups.",
+		tags: [
+			"bubble",
+			"nested circles",
+			"enclosure"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			layout: Object.values(CirclePackLayout),
+			padding: [
+				2,
+				6,
+				12
+			],
+			sort: [
+				HierarchySort.ValueDescending,
+				HierarchySort.ValueAscending,
+				HierarchySort.Input
+			],
+			measure: [HierarchyMeasure.Value, HierarchyMeasure.LeafCount]
+		},
+		valid: countsKeepDefaultSort
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layout: CirclePackLayout.Nested,
+			padding: 2
+		};
+	}
+	drawTree(ctx) {
+		const { layout, padding } = this.options;
+		const { width, height } = ctx.plot;
+		const full = this.tree({ limit: layout === CirclePackLayout.TopLevels ? 2 : void 0 });
+		const root = layout === CirclePackLayout.Bubble ? this.model.flat(full) : full;
+		const side = Math.min(width, height);
+		const nodes = pack().size([side, side]).padding(padding)(root).descendants();
+		const dx = (width - side) / 2, dy = (height - side) / 2;
+		const drawn = nodes.filter((node) => node.depth > 0);
+		const fill = (node) => node.children ? this.style.tint(this.style.branch(node), .84 - .2 * (node.depth - 1)) : this.style.fill(node);
+		const circles = ctx.marks("circles", "circle", drawn, (node) => node.data.id).attr("fill", fill);
+		ctx.set(circles, {
+			cx: (node) => node.x + dx,
+			cy: (node) => node.y + dy,
+			r: (node) => node.r
+		}, {
+			cx: (node) => node.x + dx,
+			cy: (node) => node.y + dy,
+			r: 0
+		}, this.stagger(circles, 5));
+		this.interact(ctx, circles, (node) => node);
+		this.labels(ctx, "names", drawn.flatMap((node) => {
+			const key = node.data.id, x = node.x + dx, y = node.y + dy;
+			if (!node.children) return node.r < 12 ? [] : [{
+				key,
+				text: TreeStyle.fit(node.data.name, 2 * node.r - 6),
+				x,
+				y,
+				anchor: "middle",
+				dy: ".35em",
+				fill: this.style.ink(fill(node))
+			}];
+			return node.depth === 1 && node.r > 34 ? [{
+				key,
+				text: TreeStyle.fit(node.data.name, 1.2 * node.r),
+				x,
+				y: y - node.r + 13,
+				anchor: "middle",
+				weight: 600,
+				fill: this.theme.ink,
+				halo: true,
+				size: 10.5
+			}] : [];
+		}));
+	}
+};
+export { CirclePackChart };

package/dist/charts/hierarchy/CollapsibleTree.js

@@ -0,0 +1,70 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { CartesianTreeChart } from "./CartesianTreeChart.js";
+import { TreeDirection, TreeLinkShape, TreeSpacing } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { tree } from "d3";
+// src/charts/hierarchy/CollapsibleTree.ts
+/** Click any branch to fold or unfold it: for exploring a large tree one path at a time. */
+var CollapsibleTree = class extends CartesianTreeChart {
+	static meta = {
+		id: "collapsible-tree",
+		name: "Collapsible tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Lets the reader fold and unfold branches by clicking, for exploring a large tree one path at a time.",
+		tags: [
+			"expandable",
+			"interactive tree",
+			"explorer"
+		],
+		sample: (seed) => TreeSamples.uneven(seed, 4, 3),
+		variants: {
+			direction: [
+				TreeDirection.LeftRight,
+				TreeDirection.TopDown,
+				TreeDirection.RightLeft
+			],
+			link: Object.values(TreeLinkShape),
+			open: [
+				2,
+				1,
+				3
+			],
+			badges: [true, false]
+		}
+	};
+	seeded = null;
+	defaults() {
+		return {
+			...super.defaults(),
+			open: 2,
+			badges: true,
+			spacing: TreeSpacing.Uniform
+		};
+	}
+	layout() {
+		return tree();
+	}
+	radius(root) {
+		return this.dotRadius(root);
+	}
+	badge(node) {
+		return this.options.badges && this.folded.has(node.data.id) ? String(node.data.leaves) : void 0;
+	}
+	prepare() {
+		const key = `${this.options.open}`;
+		if (this.seeded === this.options.data && this.key === key) return;
+		this.seeded = this.options.data;
+		this.key = key;
+		this.folded.clear();
+		for (const node of this.model.root({ limit: Infinity }).descendants()) if (node.children && node.depth >= this.options.open) this.folded.add(node.data.id);
+	}
+	key = "";
+	act(node) {
+		if (!node.children && !this.folded.has(node.data.id)) return;
+		if (!this.folded.delete(node.data.id)) this.folded.add(node.data.id);
+		this.render();
+	}
+};
+export { CollapsibleTree };

package/dist/charts/hierarchy/DecompositionTree.js

@@ -0,0 +1,175 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { DecompositionDrill, DecompositionScale, HierarchySort, TreeDirection, TreeLinkShape } from "./hierarchyEnums.js";
+import { TreeLinks } from "./TreeLinks.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { max } from "d3";
+// src/charts/hierarchy/DecompositionTree.ts
+var BAR = 9;
+var ROW = 26;
+/** Drill-down by the biggest driver, one level at a time: for explaining why a total is what it is. */
+var DecompositionTree = class extends HierarchyChart {
+	static meta = {
+		id: "decomposition-tree",
+		name: "Decomposition tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Breaks a total into its drivers one level at a time along the path the reader opens, to explain what makes up a number.",
+		tags: [
+			"drill down",
+			"root cause",
+			"key drivers",
+			"ai split"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 4),
+		variants: {
+			direction: [TreeDirection.LeftRight, TreeDirection.TopDown],
+			drill: Object.values(DecompositionDrill),
+			barScale: Object.values(DecompositionScale),
+			connector: Object.values(TreeLinkShape),
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		}
+	};
+	/** Node ids the reader opened, by level. */
+	chosen = /* @__PURE__ */ new Map();
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.LeftRight,
+			drill: DecompositionDrill.Highest,
+			barScale: DecompositionScale.Parent,
+			connector: TreeLinkShape.Bump
+		};
+	}
+	columns(root) {
+		const bars = [{
+			node: root,
+			level: 0,
+			slot: 0,
+			slots: 1,
+			open: true
+		}];
+		let parent = root, level = 1;
+		while (parent.children) {
+			const kids = parent.children;
+			const pick = this.chosen.get(level);
+			const next = kids.find((kid) => kid.data.id === pick) ?? kids.reduce((best, kid) => {
+				const larger = (kid.value ?? 0) > (best.value ?? 0);
+				return this.options.drill === DecompositionDrill.Highest === larger ? kid : best;
+			});
+			kids.forEach((node, slot) => bars.push({
+				node,
+				level,
+				slot,
+				slots: kids.length,
+				open: node === next && !!next.children
+			}));
+			parent = next;
+			level += 1;
+		}
+		return bars;
+	}
+	drawTree(ctx) {
+		const { direction, barScale, connector } = this.options;
+		const root = this.tree();
+		const bars = this.columns(root);
+		const across = direction === TreeDirection.LeftRight;
+		const { width, height } = ctx.plot;
+		const depth = across ? width : height, breadth = across ? height : width;
+		const levels = (max(bars, (bar) => bar.level) ?? 0) + 1;
+		const lane = levels > 1 ? (depth - (across ? 0 : ROW)) / (levels - 1 + (across ? 1 : 0)) : depth;
+		const pitch = (bar) => breadth / bar.slots;
+		const stem = (bar) => across ? Math.max(36, lane - 30) : Math.min(120, pitch(bar) - 10);
+		const peak = (bar) => barScale === DecompositionScale.Total || !bar.node.parent ? root.value || 1 : bar.node.parent.value || 1;
+		const length = (bar) => Math.max(2, stem(bar) * (bar.node.value ?? 0) / peak(bar));
+		const middle = (bar) => (bar.slot + .5) * pitch(bar);
+		const left = (bar) => across ? bar.level * lane : middle(bar) - stem(bar) / 2;
+		const top = (bar) => across ? middle(bar) - BAR / 2 : bar.level * lane + 13;
+		const opener = (bar) => bars.find((other) => other.open && other.level === bar.level - 1);
+		const lines = ctx.marks("links", "path", bars.filter((bar) => opener(bar)), (bar) => bar.node.data.id).attr("fill", "none").attr("stroke", (bar) => this.style.branch(bar.node)).attr("stroke-opacity", .45).attr("stroke-width", 2).style("pointer-events", "none");
+		const wire = (bar) => {
+			const up = opener(bar);
+			return across ? TreeLinks.cartesian(connector, [left(up) + stem(up), middle(up)], [left(bar), middle(bar)], true) : TreeLinks.cartesian(connector, [middle(up), top(up) + BAR + 2], [middle(bar), top(bar) - 13], false);
+		};
+		ctx.set(lines, {
+			d: wire,
+			opacity: 1
+		}, { opacity: 0 }, this.stagger(lines, 6));
+		const rails = ctx.marks("rails", "rect", bars, (bar) => bar.node.data.id).attr("rx", 3).attr("fill", this.theme.grid).style("pointer-events", "none");
+		ctx.set(rails, {
+			x: left,
+			y: top,
+			width: stem,
+			height: BAR
+		}, {});
+		const rects = ctx.marks("bars", "rect", bars, (bar) => bar.node.data.id).attr("rx", 3).attr("fill", (bar) => this.style.fill(bar.node));
+		ctx.set(rects, {
+			x: left,
+			y: top,
+			width: length,
+			height: BAR
+		}, {
+			x: left,
+			y: top,
+			width: 0,
+			height: BAR
+		}, this.stagger(rects, 8));
+		this.interact(ctx, rects, (bar) => bar.node, this.open);
+		this.labels(ctx, "names", bars.flatMap((bar) => {
+			if (across && pitch(bar) < 20) return [];
+			const key = bar.node.data.id;
+			const name = TreeStyle.fit(bar.node.data.name, stem(bar), 10);
+			const value = this.style.format(bar.node.value ?? 0);
+			if (!across) {
+				const room = stem(bar) - TreeStyle.width(value, 10) - 6;
+				const fits = TreeStyle.width(name, 10) <= room;
+				return [{
+					key,
+					text: name,
+					x: left(bar),
+					y: top(bar) - 3,
+					size: 10,
+					halo: true,
+					fill: bar.open ? this.theme.ink : this.theme.inkSecondary,
+					weight: bar.open ? 600 : void 0
+				}, {
+					key: `${key}/value`,
+					text: fits ? value : "",
+					x: left(bar) + stem(bar),
+					y: top(bar) - 3,
+					anchor: "end",
+					size: 10,
+					halo: true,
+					fill: this.theme.inkMuted
+				}];
+			}
+			return [{
+				key,
+				text: name,
+				x: left(bar),
+				y: top(bar) - 3,
+				size: 10,
+				halo: true,
+				fill: bar.open ? this.theme.ink : this.theme.inkSecondary,
+				weight: bar.open ? 600 : void 0
+			}, {
+				key: `${key}/value`,
+				text: name && pitch(bar) >= 34 ? value : "",
+				x: left(bar),
+				y: top(bar) + BAR + 10,
+				size: 10,
+				halo: true,
+				fill: this.theme.inkMuted
+			}];
+		}));
+	}
+	open = (node) => {
+		if (!node.children) return;
+		this.chosen.set(node.depth, node.data.id);
+		for (const level of this.chosen.keys()) if (level > node.depth) this.chosen.delete(level);
+		this.render();
+	};
+};
+export { DecompositionTree };

package/dist/charts/hierarchy/DendrogramChart.js

@@ -0,0 +1,71 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { CartesianTreeChart } from "./CartesianTreeChart.js";
+import { DendrogramTip, TreeDirection, TreeLinkShape, TreeSpacing } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { cluster, max } from "d3";
+// src/charts/hierarchy/DendrogramChart.ts
+var BAND = 46;
+/** All leaves on one baseline: for comparing tips, with optional bars or a heat strip of leaf values. */
+var DendrogramChart = class extends CartesianTreeChart {
+	static meta = {
+		id: "dendrogram",
+		name: "Dendrogram",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Aligns every leaf on one baseline, as in clustering results, with optional bars or a heat strip for leaf values.",
+		tags: [
+			"cluster",
+			"hierarchical clustering",
+			"tree diagram"
+		],
+		sample: (seed) => TreeSamples.uneven(seed),
+		variants: {
+			direction: Object.values(TreeDirection),
+			link: [
+				TreeLinkShape.Elbow,
+				TreeLinkShape.Bump,
+				TreeLinkShape.Straight
+			],
+			tip: Object.values(DendrogramTip),
+			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(ctx, tips, { horizontal, sign, band, thickness }) {
+		const peak = max(tips, (spot) => spot.node.value) || 1;
+		const heat = this.options.tip === DendrogramTip.Heat;
+		const span = band - 8, across = Math.min(thickness, 14);
+		const length = (spot) => heat ? span : Math.max(1, span * (spot.node.value ?? 0) / peak);
+		const start = (spot) => (horizontal ? spot.x : spot.y) + (sign > 0 ? 4 : -4 - length(spot));
+		const bars = ctx.marks("tips", "rect", tips, (spot) => spot.node.data.id).attr("rx", Math.min(2, across / 2)).attr("fill", (spot) => heat ? this.palette.sequential((spot.node.value ?? 0) / peak) : this.style.branch(spot.node));
+		ctx.set(bars, horizontal ? {
+			x: start,
+			y: (spot) => spot.y - across / 2,
+			width: length,
+			height: across
+		} : {
+			x: (spot) => spot.x - across / 2,
+			y: start,
+			width: across,
+			height: length
+		}, {}, 4);
+		this.interact(ctx, bars, (spot) => spot.node);
+	}
+};
+export { DendrogramChart };