@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/hierarchy/OrgChart.js

@@ -0,0 +1,240 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { HierarchySort, OrgCard, 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/OrgChart.ts
+var STACK_GAP = 5;
+var TIER_GAP = 16;
+/** Reporting lines as cards with connectors: for people and responsibility structures. */
+var OrgChart = class extends HierarchyChart {
+	static meta = {
+		id: "org-chart",
+		name: "Org chart",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Draws reporting lines as cards joined by connectors, for people, teams and responsibility structures.",
+		tags: [
+			"organisation",
+			"organization chart",
+			"reporting lines",
+			"team"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 2, 3),
+		variants: {
+			direction: [
+				TreeDirection.TopDown,
+				TreeDirection.LeftRight,
+				TreeDirection.RightLeft
+			],
+			connector: [
+				TreeLinkShape.Elbow,
+				TreeLinkShape.Bump,
+				TreeLinkShape.Straight
+			],
+			card: Object.values(OrgCard),
+			stackLeaves: [false, true],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		},
+		valid: ({ direction, stackLeaves, card, sort }) => (direction === TreeDirection.TopDown || !stackLeaves) && (card === OrgCard.Metric || sort === HierarchySort.ValueDescending)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.TopDown,
+			connector: TreeLinkShape.Elbow,
+			card: OrgCard.Plain,
+			stackLeaves: false
+		};
+	}
+	hangs(node) {
+		return !!this.options.stackLeaves && !!node.children?.every((kid) => !kid.children);
+	}
+	units(node) {
+		if (!node.children || this.hangs(node)) return 1;
+		return node.children.reduce((all, kid) => all + this.units(kid), 0);
+	}
+	arrange(root, breadth, depth) {
+		const tall = this.options.card === OrgCard.Plain ? 28 : 38;
+		const tiers = root.height + (this.options.stackLeaves ? 0 : 1);
+		const stack = this.options.stackLeaves ? max(root.descendants().filter((node) => this.hangs(node)), (node) => node.children.length) ?? 0 : 0;
+		const across = this.options.direction === TreeDirection.TopDown;
+		const unit = breadth / Math.max(1, this.units(root));
+		const top = across ? depth : breadth;
+		const cardWide = across ? Math.min(132, unit - 8) : Math.min(132, (depth - TIER_GAP * (tiers - 1)) / tiers);
+		const height = across ? Math.min(tall, Math.max(16, (top - TIER_GAP * Math.max(0, tiers - 1) - STACK_GAP * stack) / (tiers + stack))) : Math.min(tall, unit - 6);
+		const gap = across ? Math.min(46, tiers > 1 ? (depth - tiers * height - stack * (height + STACK_GAP)) / (tiers - 1 + (stack ? 1 : 0)) : 0) : (depth - tiers * cardWide) / Math.max(1, tiers - 1);
+		const spots = [];
+		const tier = (node) => node.depth * ((across ? height : cardWide) + gap) + (across ? height : cardWide) / 2;
+		const place = (node, start) => {
+			const span = this.units(node) * unit;
+			let middle = start + span / 2;
+			if (node.children && !this.hangs(node)) {
+				let run = start;
+				const centers = node.children.map((kid) => {
+					const at = place(kid, run);
+					run += this.units(kid) * unit;
+					return at;
+				});
+				middle = (centers[0] + centers.at(-1)) / 2;
+			}
+			const wide = across ? Math.min(132, span - 8) : cardWide;
+			spots.push({
+				node,
+				x: across ? middle : tier(node),
+				y: across ? tier(node) : middle,
+				width: wide,
+				height,
+				stacked: false
+			});
+			if (this.hangs(node)) node.children.forEach((kid, i) => {
+				spots.push({
+					node: kid,
+					x: middle + 6,
+					y: tier(node) + gap + (height + STACK_GAP) * i + height,
+					width: cardWide - 12,
+					height,
+					stacked: true
+				});
+			});
+			return middle;
+		};
+		place(root, 0);
+		return spots;
+	}
+	drawTree(ctx) {
+		const { direction, connector, card } = this.options;
+		const { width, height } = ctx.plot;
+		const across = direction === TreeDirection.TopDown;
+		const root = this.tree();
+		const spots = this.arrange(root, across ? width : height, across ? height : width);
+		if (direction === TreeDirection.RightLeft) for (const spot of spots) spot.x = width - spot.x;
+		const byNode = new Map(spots.map((spot) => [spot.node, spot]));
+		const sign = direction === TreeDirection.RightLeft ? -1 : 1;
+		const wire = (spot) => {
+			const up = byNode.get(spot.node.parent);
+			if (spot.stacked) return `M${up.x - up.width / 2 + 6},${up.y + up.height / 2}V${spot.y}H${spot.x - spot.width / 2}`;
+			if (across) return TreeLinks.cartesian(connector, [up.x, up.y + up.height / 2], [spot.x, spot.y - spot.height / 2], false);
+			return TreeLinks.cartesian(connector, [up.x + sign * up.width / 2, up.y], [spot.x - sign * spot.width / 2, spot.y], true);
+		};
+		const wires = ctx.marks("wires", "path", spots.filter((spot) => spot.node.parent), (spot) => spot.node.data.id).attr("fill", "none").attr("stroke", this.theme.axis).attr("stroke-width", 1.5).style("pointer-events", "none");
+		ctx.set(wires, {
+			d: wire,
+			opacity: 1
+		}, { opacity: 0 });
+		const fillOf = (spot) => spot.node.depth === 0 ? this.style.fill(spot.node) : this.style.tint(this.style.branch(spot.node), .8);
+		const cards = ctx.marks("cards", "rect", spots, (spot) => spot.node.data.id).attr("fill", fillOf).attr("rx", (spot) => Math.min(6, spot.height / 2));
+		ctx.set(cards, {
+			x: (spot) => spot.x - spot.width / 2,
+			y: (spot) => spot.y - spot.height / 2,
+			width: (spot) => spot.width,
+			height: (spot) => spot.height
+		}, {
+			x: (spot) => spot.x - spot.width / 2,
+			y: (spot) => spot.y,
+			width: (spot) => spot.width,
+			height: 0
+		}, this.stagger(cards, 12));
+		this.interact(ctx, cards, (spot) => spot.node);
+		this.paintAvatars(ctx, card === OrgCard.Avatar ? spots : []);
+		this.paintMeters(ctx, card === OrgCard.Metric ? spots : []);
+		this.labels(ctx, "names", spots.flatMap((spot) => this.cardText(spot, fillOf(spot))));
+	}
+	avatar(spot) {
+		return Math.min(11, (spot.height - 8) / 2);
+	}
+	paintAvatars(ctx, spots) {
+		const faces = ctx.marks("faces", "circle", spots, (spot) => spot.node.data.id).attr("fill", (spot) => this.style.branch(spot.node)).style("pointer-events", "none");
+		ctx.set(faces, {
+			cx: (spot) => spot.x - spot.width / 2 + 5 + this.avatar(spot),
+			cy: (spot) => spot.y,
+			r: (spot) => this.avatar(spot)
+		}, {});
+	}
+	paintMeters(ctx, spots) {
+		const peak = (spot) => max(spot.node.parent?.children ?? [spot.node], (peer) => peer.value) || 1;
+		const meters = ctx.marks("meters", "rect", spots, (spot) => spot.node.data.id).attr("fill", (spot) => this.style.branch(spot.node)).attr("rx", 1.5).style("pointer-events", "none");
+		ctx.set(meters, {
+			x: (spot) => spot.x - spot.width / 2 + 6,
+			y: (spot) => spot.y + spot.height / 2 - 6,
+			height: 3,
+			width: (spot) => Math.max(2, (spot.width - 12) * (spot.node.value ?? 0) / peak(spot))
+		}, {});
+	}
+	cardText(spot, fill) {
+		const key = spot.node.data.id, ink = this.style.ink(fill);
+		const { card } = this.options;
+		const face = card === OrgCard.Avatar ? 2 * this.avatar(spot) + 9 : 0;
+		const left = spot.x - spot.width / 2 + 6 + face, room = spot.width - (card === OrgCard.Plain ? 6 : 12) - face;
+		const value = TreeStyle.fit(this.style.format(spot.node.value ?? 0), room, 9.5);
+		if (card === OrgCard.Plain) return [{
+			key,
+			text: TreeStyle.fit(spot.node.data.name, room),
+			x: spot.x,
+			y: spot.y,
+			anchor: "middle",
+			dy: ".35em",
+			fill: ink,
+			weight: 500
+		}];
+		if (spot.height < 30) return [{
+			key,
+			text: TreeStyle.fit(spot.node.data.name, room, 10),
+			x: left,
+			y: spot.y,
+			dy: ".35em",
+			fill: ink,
+			size: 10,
+			weight: 500
+		}];
+		const text = TreeStyle.fit(spot.node.data.name, room);
+		if (card === OrgCard.Metric) return [{
+			key,
+			text,
+			x: left,
+			y: spot.y - 5,
+			fill: ink,
+			weight: 500
+		}, {
+			key: `${key}/value`,
+			text: value,
+			x: left,
+			y: spot.y + 7,
+			fill: ink,
+			size: 9.5
+		}];
+		return [
+			{
+				key,
+				text,
+				x: left,
+				y: spot.y - 1,
+				fill: ink,
+				weight: 500
+			},
+			{
+				key: `${key}/value`,
+				text: value,
+				x: left,
+				y: spot.y + 11,
+				fill: ink,
+				size: 9.5
+			},
+			{
+				key: `${key}/initial`,
+				text: spot.node.data.name.slice(0, 2),
+				x: spot.x - spot.width / 2 + 5 + this.avatar(spot),
+				y: spot.y,
+				anchor: "middle",
+				dy: ".35em",
+				size: 8.5,
+				weight: 600,
+				fill: this.style.ink(this.style.branch(spot.node))
+			}
+		];
+	}
+};
+export { OrgChart };

package/dist/charts/hierarchy/PartitionChart.js

@@ -0,0 +1,116 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { AdjacencyChart } from "./AdjacencyChart.js";
+import { HierarchyMeasure, HierarchySort, PartitionAlign, PartitionRibbon, TreeDirection, countsKeepDefaultSort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { sum } from "d3";
+// src/charts/hierarchy/PartitionChart.ts
+/** One column per level, with ribbons carrying each parent's total into its children: shows how a whole splits, step by step. */
+var PartitionChart = class extends AdjacencyChart {
+	static meta = {
+		id: "partition",
+		name: "Partition",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Splits a total level by level across columns, with ribbons carrying each parent into its children, like a one-way sankey.",
+		tags: [
+			"partition layout",
+			"split",
+			"budget breakdown",
+			"tree sankey"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			direction: [
+				TreeDirection.LeftRight,
+				TreeDirection.TopDown,
+				TreeDirection.RightLeft
+			],
+			ribbon: Object.values(PartitionRibbon),
+			align: Object.values(PartitionAlign),
+			gap: [3, 8],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending],
+			measure: [HierarchyMeasure.Value, HierarchyMeasure.LeafCount]
+		},
+		valid: countsKeepDefaultSort
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.LeftRight,
+			ribbon: PartitionRibbon.Curved,
+			align: PartitionAlign.Center,
+			gap: 3
+		};
+	}
+	drawTree(ctx) {
+		const { direction, ribbon, align, gap } = this.options;
+		const { width, height } = ctx.plot;
+		const across = direction !== TreeDirection.TopDown;
+		const breadth = across ? height : width, depth = across ? width : height;
+		const root = this.tree();
+		const levels = Array.from({ length: root.height + 1 }, () => []);
+		for (const node of root.descendants()) levels[node.depth].push(node);
+		const unit = Math.min(...levels.map((level) => (breadth - gap * (level.length - 1)) / (sum(level, (node) => node.value) || 1)));
+		const thick = Math.min(across ? 84 : 26, depth / (levels.length * 1.5));
+		const pitch = levels.length > 1 ? (depth - thick) / (levels.length - 1) : 0;
+		const near = /* @__PURE__ */ new Map();
+		for (const level of levels) {
+			const used = sum(level, (node) => (node.value ?? 0) * unit) + gap * (level.length - 1);
+			let run = align === PartitionAlign.Center ? (breadth - used) / 2 : 0;
+			for (const node of level) {
+				near.set(node, run);
+				run += (node.value ?? 0) * unit + gap;
+			}
+		}
+		const flip = direction === TreeDirection.RightLeft;
+		const lead = (node) => flip ? depth - thick - node.depth * pitch : node.depth * pitch;
+		const ribbons = ribbon === PartitionRibbon.None ? [] : root.descendants().flatMap((parent) => {
+			let run = near.get(parent);
+			return (parent.children ?? []).map((node) => {
+				const size = (node.value ?? 0) * unit, a0 = run, b0 = near.get(node);
+				run += size;
+				return {
+					node,
+					a0,
+					a1: a0 + size,
+					b0,
+					b1: b0 + size,
+					from: lead(parent) + (flip ? 0 : thick),
+					to: lead(node) + (flip ? thick : 0)
+				};
+			});
+		});
+		const point = (along, side) => across ? `${along},${side}` : `${side},${along}`;
+		const curve = (from, to, side0, side1) => {
+			if (ribbon === PartitionRibbon.Straight) return `L${point(to, side1)}`;
+			const mid = (from + to) / 2;
+			return `C${point(mid, side0)} ${point(mid, side1)} ${point(to, side1)}`;
+		};
+		const path = ({ a0, a1, b0, b1, from, to }) => `M${point(from, a0)}${curve(from, to, a0, b0)}L${point(to, b1)}${curve(to, from, b1, a1)}Z`;
+		const flows = ctx.marks("ribbons", "path", ribbons, (item) => item.node.data.id).attr("fill", (item) => this.style.branch(item.node)).attr("fill-opacity", .22);
+		ctx.set(flows, {
+			d: path,
+			opacity: 1
+		}, { opacity: 0 }, this.stagger(flows, 3));
+		this.interact(ctx, flows, (item) => item.node);
+		const blocks = root.descendants().map((node) => {
+			const side = near.get(node), size = Math.max(2, (node.value ?? 0) * unit);
+			return across ? {
+				node,
+				x: lead(node),
+				y: side,
+				width: thick,
+				height: size + 2
+			} : {
+				node,
+				x: side,
+				y: lead(node),
+				width: size + 2,
+				height: thick
+			};
+		});
+		this.paintBlocks(ctx, blocks, void 0, across ? "height" : "width");
+	}
+};
+export { PartitionChart };

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