@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/hierarchy/AdjacencyChart.js

@@ -0,0 +1,87 @@
+import { HierarchyChart } from "./HierarchyChart.js";
+import { TreeDirection } from "./hierarchyEnums.js";
+import { TreeStyle } from "./TreeStyle.js";
+// src/charts/hierarchy/AdjacencyChart.ts
+var GAP = 2;
+/** Space-filling charts where a child sits next to its parent. Subclasses compute blocks; this paints them. */
+var AdjacencyChart = class extends HierarchyChart {
+	/** Maps unit breadth and depth ranges to a block in the plot. */
+	block(direction, plot, node, b0, b1, d0, d1) {
+		const { width, height } = plot;
+		if (direction === TreeDirection.LeftRight) return {
+			node,
+			x: d0 * width,
+			y: b0 * height,
+			width: (d1 - d0) * width,
+			height: (b1 - b0) * height
+		};
+		if (direction === TreeDirection.RightLeft) return {
+			node,
+			x: (1 - d1) * width,
+			y: b0 * height,
+			width: (d1 - d0) * width,
+			height: (b1 - b0) * height
+		};
+		if (direction === TreeDirection.TopDown) return {
+			node,
+			x: b0 * width,
+			y: d0 * height,
+			width: (b1 - b0) * width,
+			height: (d1 - d0) * height
+		};
+		return {
+			node,
+			x: b0 * width,
+			y: (1 - d1) * height,
+			width: (b1 - b0) * width,
+			height: (d1 - d0) * height
+		};
+	}
+	paintBlocks(ctx, blocks, act, grow = "height") {
+		const size = (extent) => Math.max(0, extent - GAP);
+		const rects = ctx.marks("blocks", "rect", blocks, (block) => block.node.data.id).attr("fill", (block) => this.style.fill(block.node)).attr("rx", (block) => Math.min(3, size(block.width) / 2, size(block.height) / 2));
+		ctx.set(rects, {
+			x: (b) => b.x + GAP / 2,
+			y: (b) => b.y + GAP / 2,
+			width: (b) => size(b.width),
+			height: (b) => size(b.height)
+		}, grow === "height" ? {
+			x: (b) => b.x + GAP / 2,
+			y: (b) => b.y + GAP / 2,
+			width: (b) => size(b.width),
+			height: 0
+		} : {
+			x: (b) => b.x + GAP / 2,
+			y: (b) => b.y + GAP / 2,
+			width: 0,
+			height: (b) => size(b.height)
+		}, this.stagger(rects, 4));
+		this.interact(ctx, rects, (block) => block.node, act);
+		this.labels(ctx, "names", blocks.flatMap((block) => this.blockLabel(block)));
+		return rects;
+	}
+	blockLabel({ node, x, y, width, height }) {
+		if (height < 15) return [];
+		const fill = this.style.ink(this.style.fill(node)), key = node.data.id;
+		const text = TreeStyle.fit(node.data.name, width - 10);
+		const value = height >= 32 ? TreeStyle.fit(this.style.format(node.value ?? 0), width - 10, 10) : "";
+		const line = height >= 32 ? y + 15 : y + height / 2;
+		return [{
+			key,
+			text,
+			x: x + 6,
+			y: line,
+			dy: height >= 32 ? void 0 : ".35em",
+			fill,
+			weight: 500
+		}, {
+			key: `${key}/value`,
+			text: text ? value : "",
+			x: x + 6,
+			y: y + 28,
+			fill,
+			size: 10
+		}];
+	}
+};
+export { AdjacencyChart };

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/ConeTree3D.js

@@ -0,0 +1,135 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Hierarchy3DChart } from "./Hierarchy3DChart.js";
+import { BalloonAngles, ConeAxis, HierarchySort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { max, sum } from "d3";
+import { BufferGeometry, ConeGeometry, DoubleSide, Float32BufferAttribute, Group, InstancedMesh, LineBasicMaterial, LineSegments, Mesh, MeshStandardMaterial, Object3D, SphereGeometry } from "three";
+// src/charts/hierarchy/ConeTree3D.ts
+var LEAF = .05;
+var EXTENT = 1.75;
+var WIDTH = 1.3;
+/** Robertson's cone tree: each family hangs on a cone, so a big tree stays visible as it turns. */
+var ConeTree3D = class extends Hierarchy3DChart {
+	static meta = {
+		id: "cone-tree-3d",
+		name: "3D cone tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Three,
+		shape: DataShape.Hierarchy,
+		description: "Hangs each family of children on a cone below its parent, keeping large trees visible as the view turns.",
+		tags: [
+			"robertson",
+			"three dimensional tree",
+			"cam tree"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 4),
+		variants: {
+			axis: Object.values(ConeAxis),
+			angles: Object.values(BalloonAngles),
+			cones: [true, false],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			axis: ConeAxis.Vertical,
+			angles: BalloonAngles.Weighted,
+			cones: true,
+			autoRotate: true
+		};
+	}
+	layout(root) {
+		const spots = /* @__PURE__ */ new Map();
+		const weighted = this.options.angles === BalloonAngles.Weighted;
+		root.eachAfter((node) => {
+			const reaches = (node.children ?? []).map((kid) => spots.get(kid).reach);
+			const ring = reaches.length ? Math.max(sum(reaches) / Math.PI, reaches.length > 1 ? max(reaches) : 0) : 0;
+			spots.set(node, {
+				reach: ring + (max(reaches) ?? LEAF),
+				ring,
+				x: 0,
+				y: 0,
+				z: 0
+			});
+		});
+		const rung = EXTENT / Math.max(1, root.height);
+		root.eachBefore((node) => {
+			const spot = spots.get(node);
+			const kids = node.children ?? [];
+			const weights = kids.map((kid) => weighted ? spots.get(kid).reach : 1);
+			const total = sum(weights) || 1;
+			let angle = 0;
+			kids.forEach((kid, i) => {
+				const share = weights[i] / total * 2 * Math.PI, heading = angle + share / 2;
+				angle += share;
+				const child = spots.get(kid);
+				child.x = spot.x + spot.ring * Math.cos(heading);
+				child.z = spot.z + spot.ring * Math.sin(heading);
+				child.y = spot.y - rung;
+			});
+		});
+		const widest = max([...spots.values()], (spot) => Math.hypot(spot.x, spot.z)) || 1;
+		for (const spot of spots.values()) {
+			spot.x *= WIDTH / widest;
+			spot.z *= WIDTH / widest;
+			spot.ring *= WIDTH / widest;
+		}
+		return spots;
+	}
+	buildTree(ctx) {
+		const { axis, cones } = this.options;
+		const root = this.tree();
+		const spots = this.layout(root);
+		const nodes = root.descendants();
+		const stage = new Group();
+		stage.position.y = EXTENT / 2 - .05;
+		if (axis === ConeAxis.Horizontal) {
+			stage.rotation.z = Math.PI / 2;
+			stage.position.set(-1.75 / 2, -.05, 0);
+		}
+		ctx.root.add(stage);
+		const ball = new InstancedMesh(new SphereGeometry(1, 16, 12), new MeshStandardMaterial({ roughness: .4 }), nodes.length);
+		ball.castShadow = true;
+		const dummy = new Object3D();
+		nodes.forEach((node, i) => {
+			const spot = spots.get(node);
+			dummy.position.set(spot.x, spot.y, spot.z);
+			dummy.scale.setScalar(node.children ? .05 : .036);
+			dummy.updateMatrix();
+			ball.setMatrixAt(i, dummy.matrix);
+			ball.setColorAt(i, ctx.color(node.depth ? this.style.branch(node) : ctx.theme.inkMuted));
+		});
+		stage.add(ball);
+		ctx.pick(ball, (i) => this.style.tooltip(nodes[i]));
+		const points = nodes.filter((node) => node.parent).flatMap((node) => {
+			const a = spots.get(node.parent), b = spots.get(node);
+			return [
+				a.x,
+				a.y,
+				a.z,
+				b.x,
+				b.y,
+				b.z
+			];
+		});
+		stage.add(new LineSegments(new BufferGeometry().setAttribute("position", new Float32BufferAttribute(points, 3)), new LineBasicMaterial({ color: ctx.theme.axis })));
+		for (const node of cones ? nodes.filter((item) => item.children) : []) {
+			const spot = spots.get(node);
+			const rung = spot.y - spots.get(node.children[0]).y;
+			const cone = new Mesh(new ConeGeometry(Math.max(.01, spot.ring), rung, 40, 1, true), new MeshStandardMaterial({
+				color: node.depth ? this.style.branch(node) : ctx.theme.inkMuted,
+				transparent: true,
+				opacity: .14,
+				side: DoubleSide,
+				depthWrite: false
+			}));
+			cone.position.set(spot.x, spot.y - rung / 2, spot.z);
+			stage.add(cone);
+		}
+		ctx.reveal((progress) => {
+			stage.scale.setScalar(Math.max(.001, .7 + .3 * progress));
+		});
+	}
+};
+export { ConeTree3D };