@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/hierarchy/MindMap.js

@@ -0,0 +1,143 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MindMapNode, MindMapSides, TreeLinkShape } from "./hierarchyEnums.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { TreeLinks } from "./TreeLinks.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { sum } from "d3";
+// src/charts/hierarchy/MindMap.ts
+var PILL = 18;
+/** Central topic with branches radiating to both sides: for brainstorms, outlines and concept breakdowns. */
+var MindMap = class extends TreeNodeLinkChart {
+	static meta = {
+		id: "mind-map",
+		name: "Mind map",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Branches topics out from a central idea to both sides, for outlines, brainstorms and concept breakdowns.",
+		tags: [
+			"concept map",
+			"outline",
+			"brainstorm"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 2, 4),
+		variants: {
+			sides: Object.values(MindMapSides),
+			link: Object.values(TreeLinkShape),
+			node: Object.values(MindMapNode)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sides: MindMapSides.Both,
+			link: TreeLinkShape.Bump,
+			node: MindMapNode.Underline
+		};
+	}
+	/** Balances first-level branches between sides by leaf count. */
+	split(root) {
+		const branches = root.children ?? [];
+		if (this.options.sides === MindMapSides.Right) return [{
+			side: 1,
+			branches
+		}];
+		const right = [], left = [];
+		const size = (list) => sum(list, (node) => node.leaves().length);
+		for (const branch of branches) (size(right) <= size(left) ? right : left).push(branch);
+		return [{
+			side: 1,
+			branches: right
+		}, {
+			side: -1,
+			branches: left
+		}];
+	}
+	drawTree(ctx) {
+		const { width, height } = ctx.plot;
+		const { sides, link, node: style } = this.options;
+		const root = this.tree();
+		const both = sides === MindMapSides.Both;
+		const levels = Math.max(1, root.height);
+		const centerX = both ? width / 2 : 34;
+		const lane = ((both ? width / 2 : width - centerX) - 4) / levels;
+		const topics = [];
+		const measure = (name, room) => {
+			const text = TreeStyle.fit(name, room - 6);
+			return {
+				text,
+				width: TreeStyle.width(text) + (style === MindMapNode.Pill ? 12 : 0)
+			};
+		};
+		topics.push({
+			node: root,
+			x: centerX,
+			y: height / 2,
+			side: 0,
+			...measure(root.data.name, 60)
+		});
+		for (const { side, branches } of this.split(root)) {
+			const total = sum(branches, (branch) => branch.leaves().length);
+			const row = height / Math.max(1, total);
+			let slot = 0;
+			const place = (node) => {
+				const y = node.children ? node.children.map(place).reduce((all, at, _, list) => all + at / list.length, 0) : row * (slot++ + .5);
+				const near = lane * (node.depth - 1) + 30;
+				topics.push({
+					node,
+					x: centerX + side * near,
+					y,
+					side,
+					...measure(node.data.name, lane - 34)
+				});
+				return y;
+			};
+			branches.forEach(place);
+		}
+		const byNode = new Map(topics.map((topic) => [topic.node, topic]));
+		const spot = (topic) => ({
+			node: topic.node,
+			x: topic.x,
+			y: topic.y,
+			r: style === MindMapNode.Dot && topic.node.depth > 0 ? 4 : 0
+		});
+		const spots = topics.map(spot);
+		const edge = (from, to) => {
+			const a = byNode.get(from.node), b = byNode.get(to.node);
+			if (a === b) return `M${a.x},${a.y}L${a.x},${a.y}`;
+			const exit = a.side === 0 ? a.x + b.side * (a.width / 2 + 7) : a.x + a.side * (a.width + 6);
+			return TreeLinks.cartesian(link, [exit, a.y + this.rise(a)], [b.x - b.side * (style === MindMapNode.Dot ? 0 : 2), b.y + this.rise(b)], true);
+		};
+		this.paintTree(ctx, spots, edge);
+		const pills = ctx.marks("pills", "rect", topics.filter((t) => style === MindMapNode.Pill || t.side === 0), (t) => t.node.data.id).attr("rx", PILL / 2).attr("fill", (t) => t.side === 0 ? this.style.fill(t.node) : this.style.tint(this.style.branch(t.node), .8)).style("pointer-events", "none");
+		const pillLeft = (t) => t.side === 0 ? t.x - t.width / 2 - 6 : t.side > 0 ? t.x : t.x - t.width;
+		ctx.set(pills, {
+			x: pillLeft,
+			y: (t) => t.y - PILL / 2,
+			width: (t) => t.width + (t.side === 0 ? 12 : 0),
+			height: PILL
+		}, {});
+		const rules = ctx.marks("rules", "path", style === MindMapNode.Underline ? topics.filter((t) => t.side !== 0) : [], (t) => t.node.data.id).attr("fill", "none").attr("stroke", (t) => this.style.branch(t.node)).attr("stroke-width", 2).attr("stroke-linecap", "round").style("pointer-events", "none");
+		ctx.set(rules, { d: (t) => `M${t.x},${t.y + 3}h${t.side * (t.width + 4)}` }, {});
+		this.labels(ctx, "topics", topics.map((t) => {
+			const pad = style === MindMapNode.Pill ? 6 : style === MindMapNode.Dot ? 7 : 2;
+			const onPill = t.side === 0 || style === MindMapNode.Pill;
+			const fill = t.side === 0 ? this.style.ink(this.style.fill(t.node)) : onPill ? this.style.ink(this.style.tint(this.style.branch(t.node), .8)) : void 0;
+			return {
+				key: t.node.data.id,
+				text: t.text,
+				x: t.side === 0 ? t.x : t.x + t.side * pad,
+				y: t.y + (style === MindMapNode.Underline && t.side !== 0 ? -2 : 0),
+				dy: style === MindMapNode.Underline && t.side !== 0 ? void 0 : ".35em",
+				anchor: t.side === 0 ? "middle" : t.side > 0 ? "start" : "end",
+				fill,
+				weight: t.node.depth <= 1 ? 600 : void 0
+			};
+		}));
+	}
+	rise(topic) {
+		return this.options.node === MindMapNode.Underline && topic.side !== 0 ? 3 : 0;
+	}
+};
+export { MindMap };

package/dist/charts/hierarchy/NestedTreemap.js

@@ -0,0 +1,121 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { HierarchySort, TreemapHeader, TreemapTile } from "./hierarchyEnums.js";
+import { treemapTiling } from "./TreemapTiling.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+import { treemap } from "d3";
+// src/charts/hierarchy/NestedTreemap.ts
+var HEAD = 17;
+/** Treemap that keeps every parent visible as a labelled container: for reading group totals and members together. */
+var NestedTreemap = class extends HierarchyChart {
+	static meta = {
+		id: "nested-treemap",
+		name: "Nested treemap",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Draws every level of a hierarchy as a labelled container around its children, so group totals stay readable beside their members.",
+		tags: [
+			"cushion",
+			"grouped treemap",
+			"containers"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			tile: [
+				TreemapTile.Squarify,
+				TreemapTile.Binary,
+				TreemapTile.SliceDice,
+				TreemapTile.Slice
+			],
+			header: Object.values(TreemapHeader),
+			maxDepth: [3, 2],
+			inset: [
+				2,
+				4,
+				8
+			],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		},
+		valid: ({ tile, maxDepth }) => maxDepth === 3 || tile !== TreemapTile.Binary
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			tile: TreemapTile.Squarify,
+			header: TreemapHeader.Top,
+			inset: 2,
+			maxDepth: 3
+		};
+	}
+	drawTree(ctx) {
+		const { tile, header, inset } = this.options;
+		const band = (side) => (node) => node.depth > 0 && node.children ? header === side ? HEAD : inset : inset;
+		const root = this.tree();
+		const nodes = treemap().size([ctx.plot.width, ctx.plot.height]).round(true).tile(treemapTiling(tile)).paddingInner(inset).paddingRight(inset).paddingBottom(inset).paddingTop(band(TreemapHeader.Top)).paddingLeft(band(TreemapHeader.Left))(root).descendants().filter((node) => node.depth > 0 && node.x1 - node.x0 > 1 && node.y1 - node.y0 > 1);
+		const fill = (node) => node.children ? this.style.tint(this.style.branch(node), .86 - .16 * (node.depth - 1)) : this.style.fill(node);
+		const rects = ctx.marks("cells", "rect", nodes, (node) => node.data.id).attr("fill", fill).attr("rx", (node) => node.children ? 4 : Math.min(3, (node.x1 - node.x0) / 2, (node.y1 - node.y0) / 2));
+		ctx.set(rects, {
+			x: (node) => node.x0,
+			y: (node) => node.y0,
+			width: (node) => node.x1 - node.x0,
+			height: (node) => node.y1 - node.y0
+		}, {
+			x: (node) => node.x0,
+			y: (node) => node.y0,
+			width: (node) => node.x1 - node.x0,
+			height: 0
+		}, this.stagger(rects, 3));
+		this.interact(ctx, rects, (node) => node);
+		this.labels(ctx, "names", nodes.flatMap((node) => this.cellLabel(node, fill(node))));
+	}
+	cellLabel(node, fill) {
+		const width = node.x1 - node.x0, height = node.y1 - node.y0;
+		const key = node.data.id, ink = this.style.ink(fill);
+		if (!node.children) return height < 16 ? [] : [{
+			key,
+			text: TreeStyle.fit(node.data.name, width - 8, 10),
+			x: node.x0 + 4,
+			y: node.y0 + 12,
+			fill: ink,
+			size: 10
+		}];
+		if (this.options.header === TreemapHeader.Top && height > HEAD) {
+			const value = this.style.format(node.value ?? 0);
+			const room = width - 10 - TreeStyle.width(value, 10) - 8;
+			const name = TreeStyle.fit(node.data.name, room);
+			return [{
+				key,
+				text: name || TreeStyle.fit(node.data.name, width - 10),
+				x: node.x0 + 5,
+				y: node.y0 + 12.5,
+				fill: ink,
+				weight: 600
+			}, {
+				key: `${key}/value`,
+				text: name ? value : "",
+				x: node.x1 - 5,
+				y: node.y0 + 12.5,
+				anchor: "end",
+				fill: ink,
+				size: 10
+			}];
+		}
+		if (this.options.header === TreemapHeader.Left && width > HEAD) {
+			const x = node.x0 + 12.5, y = node.y0 + height / 2;
+			return [{
+				key,
+				text: TreeStyle.fit(node.data.name, height - 8),
+				x,
+				y,
+				anchor: "middle",
+				fill: ink,
+				weight: 600,
+				transform: `rotate(-90 ${x} ${y})`
+			}];
+		}
+		return [];
+	}
+};
+export { NestedTreemap };

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