@mstone6969/graph 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,81 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Hierarchy3DChart } from "./Hierarchy3DChart.js";
+import { HierarchyMeasure, SpherePackShell, SpherePackStack } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { pack } from "d3";
+import { CylinderGeometry, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, SphereGeometry } from "three";
+// src/charts/hierarchy/SpherePack3D.ts
+var FLOOR = -.7;
+var RISE = .14;
+/** Circle packing as balls in glass domes: each ball's footprint keeps the 2D area encoding, with levels on height. */
+var SpherePack3D = class extends Hierarchy3DChart {
+	static meta = {
+		id: "sphere-pack-3d",
+		name: "3D sphere packing",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Three,
+		shape: DataShape.Hierarchy,
+		description: "Places leaves as spheres inside translucent shells or on discs for each parent, lifting levels on height.",
+		tags: [
+			"bubble",
+			"nested spheres",
+			"circle packing"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			stack: Object.values(SpherePackStack),
+			shell: Object.values(SpherePackShell),
+			measure: [HierarchyMeasure.Value, HierarchyMeasure.LeafCount]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			stack: SpherePackStack.Terraced,
+			shell: SpherePackShell.Dome
+		};
+	}
+	buildTree(ctx) {
+		const { stack, shell } = this.options;
+		const root = pack().size([2.1, 2.1]).padding(.02)(this.tree());
+		const leaves = root.leaves();
+		const parents = root.descendants().filter((node) => node.depth > 0 && node.children);
+		const lift = (node) => stack === SpherePackStack.Terraced ? (root.height - node.height - 1) * RISE : 0;
+		const x = (node) => node.x - 1.05, z = (node) => node.y - 1.05;
+		const floor = new Mesh(new PlaneGeometry(2.3, 2.3), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = -.701;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		for (const node of shell === SpherePackShell.None ? [] : parents) {
+			const color = this.style.tint(this.style.branch(node), .3);
+			const geometry = shell === SpherePackShell.Dome ? new SphereGeometry(node.r, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2) : new CylinderGeometry(node.r, node.r, .02, 48);
+			const mesh = new Mesh(geometry, new MeshStandardMaterial({
+				color,
+				transparent: true,
+				opacity: shell === SpherePackShell.Dome ? .16 : .5,
+				depthWrite: false
+			}));
+			mesh.position.set(x(node), FLOOR + lift(node), z(node));
+			ctx.root.add(mesh);
+			ctx.pick(mesh, () => this.style.tooltip(node));
+		}
+		const balls = new InstancedMesh(new SphereGeometry(1, 24, 16), new MeshStandardMaterial({ roughness: .35 }), leaves.length);
+		balls.castShadow = true;
+		const dummy = new Object3D();
+		leaves.forEach((leaf, i) => balls.setColorAt(i, ctx.color(this.style.fill(leaf))));
+		ctx.reveal((progress) => {
+			leaves.forEach((leaf, i) => {
+				const r = Math.max(.001, leaf.r * progress);
+				dummy.position.set(x(leaf), FLOOR + lift(leaf) + r, z(leaf));
+				dummy.scale.setScalar(r);
+				dummy.updateMatrix();
+				balls.setMatrixAt(i, dummy.matrix);
+			});
+			balls.instanceMatrix.needsUpdate = true;
+		});
+		ctx.root.add(balls);
+		ctx.pick(balls, (i) => this.style.tooltip(leaves[i]));
+	}
+};
+export { SpherePack3D };

package/dist/charts/hierarchy/SunburstChart.js

@@ -0,0 +1,126 @@
+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, 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 = arc().startAngle(start).endAngle(end).innerRadius(inner).outerRadius(outer).padAngle(4 / frame.radius).padRadius(frame.radius / 2).cornerRadius(3);
+		const closed = arc().startAngle(start).endAngle((node) => start(node) + .001).innerRadius(inner).outerRadius(outer);
+		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));
+		stage.set(arcs, {
+			d: shape,
+			opacity: 1
+		}, {
+			d: closed,
+			opacity: 0
+		}, this.stagger(arcs, 5));
+		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);
+	}
+	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/SunburstTower3D.js

@@ -0,0 +1,93 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Hierarchy3DChart } from "./Hierarchy3DChart.js";
+import { HierarchySort, PolarSweep, TowerProfile } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { max, partition } from "d3";
+import { ExtrudeGeometry, Mesh, MeshStandardMaterial, Shape } from "three";
+// src/charts/hierarchy/SunburstTower3D.ts
+var FLOOR = -.65;
+var RADIUS = 1.1;
+var GAP = .012;
+/** Sunburst with height: each ring is a solid segment, for presentations where the level structure should feel physical. */
+var SunburstTower3D = class extends Hierarchy3DChart {
+	static meta = {
+		id: "sunburst-tower-3d",
+		name: "3D sunburst tower",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Three,
+		shape: DataShape.Hierarchy,
+		description: "Extrudes the rings of a sunburst into solid segments, stepping by depth or rising with value.",
+		tags: [
+			"extruded sunburst",
+			"radial partition",
+			"ring tower"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			sweep: [
+				PolarSweep.Full,
+				PolarSweep.ThreeQuarter,
+				PolarSweep.Half
+			],
+			profile: [
+				TowerProfile.Dome,
+				TowerProfile.Stairs,
+				TowerProfile.Value
+			],
+			hole: [.25, .5],
+			sort: [HierarchySort.ValueDescending, HierarchySort.Input]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sweep: PolarSweep.Full,
+			profile: TowerProfile.Dome,
+			hole: .25
+		};
+	}
+	buildTree(ctx) {
+		const { sweep, profile, hole } = this.options;
+		const whole = sweep === PolarSweep.Full ? 2 * Math.PI : sweep === PolarSweep.ThreeQuarter ? 1.5 * Math.PI : Math.PI;
+		const root = partition().size([whole, 1])(this.tree());
+		const levels = Math.max(1, root.height);
+		const inner = hole * RADIUS, band = (RADIUS - inner) / levels;
+		const peak = (node) => max(root.descendants().filter((other) => other.depth === node.depth), (other) => other.value) || 1;
+		const tall = (node) => {
+			if (profile === TowerProfile.Stairs) return .18 + .9 * node.depth / levels;
+			if (profile === TowerProfile.Dome) return .18 + .9 * (levels - node.depth + 1) / levels;
+			return .08 + (node.value ?? 0) / peak(node) * 1.1;
+		};
+		const segments = [];
+		const nodes = root.descendants().filter((node) => node.depth > 0 && node.x1 - node.x0 > .002);
+		for (const node of nodes) {
+			const r0 = inner + band * (node.depth - 1) + GAP / 2, r1 = inner + band * node.depth - GAP / 2;
+			const trim = Math.min((node.x1 - node.x0) / 4, GAP / r1);
+			const a0 = node.x0 + trim, a1 = node.x1 - trim;
+			const shape = new Shape();
+			shape.moveTo(r1 * Math.cos(a0), r1 * Math.sin(a0));
+			shape.absarc(0, 0, r1, a0, a1, false);
+			shape.lineTo(r0 * Math.cos(a1), r0 * Math.sin(a1));
+			shape.absarc(0, 0, r0, a1, a0, true);
+			const geometry = new ExtrudeGeometry(shape, {
+				depth: tall(node),
+				bevelEnabled: false,
+				curveSegments: 18
+			});
+			geometry.rotateX(-Math.PI / 2);
+			const segment = new Mesh(geometry, new MeshStandardMaterial({
+				color: this.style.fill(node),
+				roughness: .6
+			}));
+			segment.position.y = FLOOR;
+			segment.castShadow = segment.receiveShadow = true;
+			ctx.root.add(segment);
+			ctx.pick(segment, () => this.style.tooltip(node));
+			segments.push(segment);
+		}
+		ctx.reveal((progress) => {
+			for (const segment of segments) segment.scale.y = Math.max(.001, progress);
+		});
+	}
+};
+export { SunburstTower3D };

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 };

package/dist/charts/hierarchy/TreeLinks.js

@@ -0,0 +1,57 @@
+import { TreeLinkShape, TreeSpacing } from "./hierarchyEnums.js";
+import { linkHorizontal, linkRadial, linkVertical } from "d3";
+// src/charts/hierarchy/TreeLinks.ts
+var across = linkHorizontal();
+var down = linkVertical();
+var round = (value) => Math.round(value * 100) / 100;
+/** Path strings for tree edges, in cartesian and polar space. */
+var TreeLinks = class TreeLinks {
+	/** Separation for d3 tree and cluster layouts: 1 between siblings, more between cousins. `radial` narrows outer levels. */
+	static separation(spacing = TreeSpacing.Tidy, radial = false) {
+		const cousins = {
+			[TreeSpacing.Uniform]: 1,
+			[TreeSpacing.Tidy]: 2,
+			[TreeSpacing.Clustered]: 4
+		}[spacing];
+		return (a, b) => (a.parent === b.parent ? 1 : cousins) / (radial ? Math.max(1, a.depth) : 1);
+	}
+	static polar({ angle, radius }) {
+		return [radius * Math.sin(angle), -radius * Math.cos(angle)];
+	}
+	/** `horizontal` means the tree grows along x. */
+	static cartesian(shape, source, target, horizontal) {
+		if (shape === TreeLinkShape.Bump) return (horizontal ? across : down)({
+			source,
+			target
+		});
+		if (shape === TreeLinkShape.Straight) return `M${source}L${target}`;
+		return TreeLinks.elbow(source, target, horizontal);
+	}
+	/** Right-angle connector with softened corners. */
+	static elbow(source, target, horizontal, corner = 6) {
+		const at = (along, side) => horizontal ? `${round(along)},${round(side)}` : `${round(side)},${round(along)}`;
+		const [a0, s0] = horizontal ? source : [source[1], source[0]];
+		const [a1, s1] = horizontal ? target : [target[1], target[0]];
+		const mid = (a0 + a1) / 2;
+		const go = Math.sign(a1 - a0) || 1, turn = Math.sign(s1 - s0);
+		const r = Math.min(corner, Math.abs(s1 - s0) / 2, Math.abs(mid - a0));
+		if (!turn) return `M${at(a0, s0)}L${at(a1, s1)}`;
+		return `M${at(a0, s0)}L${at(mid - go * r, s0)}Q${at(mid, s0)} ${at(mid, s0 + turn * r)}L${at(mid, s1 - turn * r)}Q${at(mid, s1)} ${at(mid + go * r, s1)}L${at(a1, s1)}`;
+	}
+	static radial(shape, source, target) {
+		if (shape === TreeLinkShape.Bump) return linkRadial().angle((d) => d.angle).radius((d) => d.radius)({
+			source,
+			target
+		});
+		const start = TreeLinks.polar(source), end = TreeLinks.polar(target);
+		if (shape === TreeLinkShape.Straight) return `M${start}L${end}`;
+		const swing = TreeLinks.polar({
+			angle: target.angle,
+			radius: source.radius
+		});
+		const sweep = target.angle > source.angle ? 1 : 0;
+		const large = Math.abs(target.angle - source.angle) > Math.PI ? 1 : 0;
+		return `M${start}A${source.radius},${source.radius} 0 ${large} ${sweep} ${swing}L${end}`;
+	}
+};
+export { TreeLinks };