@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/hierarchy/DecompositionTree.js

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

package/dist/charts/hierarchy/DendrogramChart.js

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

package/dist/charts/hierarchy/FishboneDiagram.js

@@ -0,0 +1,138 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FishboneHead, FishboneRibs, HierarchySort } from "./hierarchyEnums.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { TreeStyle } from "./TreeStyle.js";
+// src/charts/hierarchy/FishboneDiagram.ts
+var HEAD = 62;
+/** Ishikawa cause and effect: categories as ribs on a spine, causes as bones on each rib. */
+var FishboneDiagram = class extends HierarchyChart {
+	static meta = {
+		id: "fishbone",
+		name: "Fishbone diagram",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Organises the causes of an effect as bones on category ribs along a spine, for root-cause analysis.",
+		tags: [
+			"ishikawa",
+			"cause and effect",
+			"root cause"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 2, 4),
+		variants: {
+			head: Object.values(FishboneHead),
+			ribs: Object.values(FishboneRibs),
+			lean: [
+				28,
+				12,
+				44
+			],
+			sort: [HierarchySort.ValueDescending, HierarchySort.ValueAscending]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			head: FishboneHead.Right,
+			ribs: FishboneRibs.Alternate,
+			lean: 28,
+			maxDepth: 2
+		};
+	}
+	drawTree(ctx) {
+		const { width, height } = ctx.plot;
+		const { head, ribs, lean } = this.options;
+		const root = this.tree();
+		const toward = head === FishboneHead.Right ? 1 : -1;
+		const both = ribs === FishboneRibs.Alternate;
+		const spineY = both ? height / 2 : height - 6;
+		const tip = head === FishboneHead.Right ? width - HEAD : HEAD;
+		const tail = head === FishboneHead.Right ? 8 : width - 8;
+		const branches = root.children ?? [];
+		const seats = both ? Math.ceil(branches.length / 2) : branches.length;
+		const span = Math.abs(tip - tail);
+		const rib = (both ? height / 2 : height) - 20;
+		const slope = Math.min(span * .35, Math.tan((lean ?? 28) * Math.PI / 180) * rib);
+		const pitch = (span - 6 - slope) / Math.max(.8, seats - .2);
+		const notes = [];
+		const bones = [];
+		branches.forEach((branch, i) => {
+			const seat = both ? Math.floor(i / 2) : i;
+			const up = !both || i % 2 === 0 ? -1 : 1;
+			const foot = tip - toward * (seat * pitch + 6);
+			const crown = foot - toward * slope;
+			const crownY = spineY + up * rib;
+			bones.push({
+				node: branch,
+				x0: crown,
+				y0: crownY,
+				x1: foot,
+				y1: spineY
+			});
+			const top = up < 0 ? crownY - 4 : crownY + 12;
+			const title = TreeStyle.fit(branch.data.name, pitch);
+			const half = TreeStyle.width(title) / 2 + 2;
+			notes.push({
+				key: branch.data.id,
+				text: title,
+				x: Math.max(half, Math.min(width - half, crown)),
+				y: top,
+				anchor: "middle",
+				weight: 600,
+				fill: this.theme.ink,
+				halo: true
+			});
+			const kids = branch.children ?? [];
+			const room = Math.max(20, Math.min(120, pitch * .78));
+			kids.forEach((node, k) => {
+				const t = (k + .7) / (kids.length + .4);
+				const x = crown + (foot - crown) * t, y = crownY + (spineY - crownY) * t;
+				bones.push({
+					node,
+					x0: x - toward * room,
+					y0: y,
+					x1: x,
+					y1: y
+				});
+				if (rib * .9 / Math.max(1, kids.length) >= 11) notes.push({
+					key: node.data.id,
+					text: TreeStyle.fit(node.data.name, room - 2, 10),
+					x: x - toward * (room - 1),
+					y: y - 3,
+					anchor: head === FishboneHead.Right ? "start" : "end",
+					size: 10
+				});
+			});
+		});
+		const spine = ctx.marks("spine", "path", [root], (node) => node.data.id).attr("fill", "none").attr("stroke", this.theme.inkMuted).attr("stroke-width", 3).attr("stroke-linecap", "round");
+		ctx.set(spine, { d: `M${tail},${spineY}L${tip},${spineY}` }, {});
+		this.interact(ctx, spine, (node) => node);
+		ctx.drawOn(spine);
+		const lines = ctx.marks("bones", "path", bones, (bone) => bone.node.data.id).attr("fill", "none").attr("stroke-linecap", "round").attr("stroke", (bone) => this.style.branch(bone.node)).attr("stroke-width", 2).attr("stroke-opacity", (bone) => bone.node.depth === 1 ? 1 : .6);
+		ctx.set(lines, { d: (bone) => `M${bone.x0},${bone.y0}L${bone.x1},${bone.y1}` }, {});
+		this.interact(ctx, lines, (bone) => bone.node);
+		const boxLeft = head === FishboneHead.Right ? tip + 2 : 0;
+		const box = ctx.marks("effect", "rect", [root], (node) => node.data.id).attr("fill", this.style.fill(root)).attr("rx", 6);
+		const boxHeight = Math.min(46, height * .5);
+		ctx.set(box, {
+			x: boxLeft,
+			y: Math.max(0, Math.min(height - boxHeight, spineY - boxHeight / 2)),
+			width: 60,
+			height: boxHeight
+		}, {});
+		this.interact(ctx, box, (node) => node);
+		notes.push({
+			key: "/effect",
+			text: TreeStyle.fit(root.data.name, 52),
+			x: boxLeft + 30,
+			y: Math.max(boxHeight / 2, Math.min(height - boxHeight / 2, spineY)),
+			anchor: "middle",
+			dy: ".35em",
+			weight: 600,
+			fill: this.style.ink(this.style.fill(root))
+		});
+		this.labels(ctx, "names", notes);
+	}
+};
+export { FishboneDiagram };

package/dist/charts/hierarchy/FlameGraph.js

@@ -0,0 +1,66 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlameFlow, HierarchySort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { ZoomAdjacencyChart } from "./ZoomAdjacencyChart.js";
+import { partition, scaleLinear } from "d3";
+// src/charts/hierarchy/FlameGraph.ts
+var ROW = 34;
+/** Profiler call stacks: frame width is inclusive cost. Click a frame to zoom into it, and click it again to step out. */
+var FlameGraph = class extends ZoomAdjacencyChart {
+	static meta = {
+		id: "flame-graph",
+		name: "Flame graph",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Stacks profiler frames so width is inclusive cost and hot call paths stand out; click to zoom into a frame.",
+		tags: [
+			"profiler",
+			"call stack",
+			"performance",
+			"icicle"
+		],
+		sample: (seed) => TreeSamples.callStacks(seed),
+		variants: {
+			flow: Object.values(FlameFlow),
+			sort: [
+				HierarchySort.Name,
+				HierarchySort.ValueDescending,
+				HierarchySort.ValueAscending
+			],
+			selfTime: [true, false],
+			minShare: [
+				0,
+				.015,
+				.04
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			flow: FlameFlow.Flame,
+			sort: HierarchySort.Name,
+			selfTime: true,
+			minShare: 0
+		};
+	}
+	drawTree(ctx) {
+		const { flow, selfTime, minShare } = this.options;
+		const { width, height } = ctx.plot;
+		const root = partition().size([1, 1])(this.tree({ self: selfTime }));
+		const focus = this.focusOf(root);
+		const across = scaleLinear([focus.x0, focus.x1], [0, width]).clamp(true);
+		const row = Math.min(ROW, height / (root.height + 1));
+		const top = (depth) => flow === FlameFlow.Flame ? height - (depth + 1) * row : depth * row;
+		const blocks = root.descendants().map((node) => ({
+			node,
+			x: across(node.x0),
+			y: top(node.depth),
+			width: across(node.x1) - across(node.x0),
+			height: row
+		})).filter((block) => block.width >= Math.max(.5, minShare * width));
+		this.paintBlocks(ctx, blocks, this.zoom, "width");
+	}
+};
+export { FlameGraph };

package/dist/charts/hierarchy/Hierarchy3DChart.js

@@ -0,0 +1,27 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { HierarchyColor } from "./hierarchyEnums.js";
+import { TreeModel, treeFieldDefaults } from "./TreeModel.js";
+import { TreeStyle } from "./TreeStyle.js";
+// src/charts/hierarchy/Hierarchy3DChart.ts
+/** Base of every 3D hierarchy chart: the same data handling and colour rules as the 2D family. */
+var Hierarchy3DChart = class extends Chart3D {
+	style;
+	defaults() {
+		return {
+			...treeFieldDefaults,
+			color: HierarchyColor.Branch
+		};
+	}
+	build(ctx) {
+		if (!new TreeModel(this.options.data, this.options).empty) this.buildTree(ctx);
+	}
+	tree(limit) {
+		const root = new TreeModel(this.options.data, this.options).root({ limit });
+		this.style = new TreeStyle(this.palette, this.theme, this.options.color, root, this.options.valueFormat);
+		return root;
+	}
+	table() {
+		return new TreeModel(this.options.data, this.options).table();
+	}
+};
+export { Hierarchy3DChart };

package/dist/charts/hierarchy/HierarchyChart.js

@@ -0,0 +1,83 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { HierarchyColor } from "./hierarchyEnums.js";
+import { TreeModel, treeFieldDefaults } from "./TreeModel.js";
+import { TreeStyle } from "./TreeStyle.js";
+// src/charts/hierarchy/HierarchyChart.ts
+/** Base of every 2D hierarchy chart: resolves the data into a sized tree and exposes its colour and tooltip rules. */
+var HierarchyChart = class extends Chart2D {
+	cached = null;
+	/** Node ids whose children are hidden. Only stateful charts write to it. */
+	folded = /* @__PURE__ */ new Set();
+	style;
+	defaults() {
+		return {
+			...treeFieldDefaults,
+			color: HierarchyColor.Branch
+		};
+	}
+	get model() {
+		const { data, name, value, children, id, parent, sort, measure, maxDepth } = this.options;
+		const fields = JSON.stringify([
+			name,
+			value,
+			children,
+			id,
+			parent,
+			sort,
+			measure,
+			maxDepth
+		]);
+		const hit = this.cached;
+		if (hit && hit.data === data && hit.fields === fields) return hit.model;
+		const model = new TreeModel(data, this.options);
+		this.cached = {
+			data,
+			fields,
+			model
+		};
+		return model;
+	}
+	draw(ctx) {
+		if (this.model.empty) ctx.root.selectAll("*").remove();
+		else this.drawTree(ctx);
+	}
+	/** Per-mark entrance delay, shortened so large trees still finish within half a second. */
+	stagger(marks, each) {
+		return Math.min(each, 500 / Math.max(1, marks.size()));
+	}
+	/** The sized tree this render draws, with `style` bound to it. */
+	tree(options = {}) {
+		const root = this.model.root({
+			folded: this.folded,
+			...options
+		});
+		this.style = new TreeStyle(this.palette, this.theme, this.options.color, root, this.options.valueFormat);
+		return root;
+	}
+	legendItems() {
+		return TreeStyle.legend(this.palette.items(), this.theme.inkMuted);
+	}
+	/** Tooltip, hover dimming and selection. Selecting passes the caller's original node; `act` adds chart behaviour. */
+	interact(ctx, marks, nodeOf, act, content) {
+		ctx.hover(marks, (datum) => content?.(datum) ?? this.style.tooltip(nodeOf(datum)));
+		marks.on("click", (_, datum) => {
+			const node = nodeOf(datum);
+			this.options.onSelect?.(node.data.source);
+			act?.(node);
+		});
+	}
+	/** One keyed layer of text. Labels never take pointer events, and those with `halo` stay legible across links. */
+	labels(ctx, name, items, parent) {
+		const text = ctx.marks(name, "text", items.filter((item) => item.text), (item) => item.key, parent).text((item) => item.text).attr("text-anchor", (item) => item.anchor ?? "start").attr("dy", (item) => item.dy ?? null).attr("font-size", (item) => item.size ?? 11).attr("font-weight", (item) => item.weight ?? null).attr("font-family", this.theme.fontFamily).attr("fill", (item) => item.fill ?? this.theme.inkSecondary).style("pointer-events", "none").attr("stroke", (item) => item.halo ? this.theme.surface : null).attr("stroke-width", (item) => item.halo ? 3 : null).attr("stroke-linejoin", "round").attr("paint-order", "stroke");
+		return ctx.set(text, {
+			x: (item) => item.x,
+			y: (item) => item.y,
+			transform: (item) => item.transform ?? null,
+			opacity: 1
+		}, { opacity: 0 });
+	}
+	table() {
+		return this.model.table();
+	}
+};
+export { HierarchyChart };

package/dist/charts/hierarchy/IcicleChart.js

@@ -0,0 +1,56 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { AdjacencyChart } from "./AdjacencyChart.js";
+import { HierarchyMeasure, HierarchySort, IcicleBands, TreeDirection, countsKeepDefaultSort } from "./hierarchyEnums.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { partition } from "d3";
+// src/charts/hierarchy/IcicleChart.ts
+/** Adjacent bands per level: a rectangular sunburst whose labels stay horizontal, for deep trees that need reading. */
+var IcicleChart = class extends AdjacencyChart {
+	static meta = {
+		id: "icicle",
+		name: "Icicle",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Two,
+		shape: DataShape.Hierarchy,
+		description: "Stacks one band per hierarchy level with each child beside its parent, so sizes and depth read along straight axes.",
+		tags: [
+			"partition",
+			"adjacency diagram",
+			"rectangular sunburst"
+		],
+		sample: (seed) => TreeSamples.broad(seed, 3, 3),
+		variants: {
+			direction: Object.values(TreeDirection),
+			bands: Object.values(IcicleBands),
+			rootBand: [true, false],
+			sort: [
+				HierarchySort.ValueDescending,
+				HierarchySort.ValueAscending,
+				HierarchySort.Input
+			],
+			measure: [HierarchyMeasure.Value, HierarchyMeasure.LeafCount]
+		},
+		valid: countsKeepDefaultSort
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			direction: TreeDirection.LeftRight,
+			bands: IcicleBands.Even,
+			rootBand: true
+		};
+	}
+	drawTree(ctx) {
+		const { direction, bands, rootBand } = this.options;
+		const root = partition().size([1, 1])(this.tree());
+		const first = rootBand || !root.height ? 0 : 1;
+		const weights = Array.from({ length: root.height - first + 1 }, (_, i) => bands === IcicleBands.Tapered ? .72 ** i : 1);
+		const total = weights.reduce((all, weight) => all + weight, 0);
+		let run = 0;
+		const edges = [0, ...weights.map((weight) => run += weight / total)];
+		const blocks = root.descendants().filter((node) => node.depth >= first).map((node) => this.block(direction, ctx.plot, node, node.x0, node.x1, edges[node.depth - first], edges[node.depth - first + 1]));
+		const across = direction === TreeDirection.LeftRight || direction === TreeDirection.RightLeft;
+		this.paintBlocks(ctx, blocks, void 0, across ? "width" : "height");
+	}
+};
+export { IcicleChart };