@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/matrix/RiskMatrix.js

@@ -0,0 +1,264 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixGlyphs } from "./MatrixGlyphs.js";
+import { CHAR, MatrixSurface, fitText } from "./MatrixSurface.js";
+import { ascending, group } from "d3";
+// src/charts/matrix/RiskMatrix.ts
+var RiskScoring = /* @__PURE__ */ function(RiskScoring) {
+	RiskScoring["Product"] = "likelihood-times-impact";
+	RiskScoring["Sum"] = "likelihood-plus-impact";
+	RiskScoring["ImpactLed"] = "impact-led";
+	return RiskScoring;
+}({});
+var RiskMarks = /* @__PURE__ */ function(RiskMarks) {
+	RiskMarks["Dots"] = "dots";
+	RiskMarks["Count"] = "counts";
+	RiskMarks["Names"] = "names";
+	return RiskMarks;
+}({});
+var RiskAxes = /* @__PURE__ */ function(RiskAxes) {
+	RiskAxes["LikelihoodX"] = "likelihood-across";
+	RiskAxes["ImpactX"] = "impact-across";
+	return RiskAxes;
+}({});
+var ZONES = [
+	"Low",
+	"Medium",
+	"High",
+	"Critical"
+];
+var GUTTER = 34;
+var FOOT = 32;
+/** Severity grid for a risk register: each item sits at its likelihood and impact, on bands that say how urgent it is. */
+var RiskMatrix = class extends MatrixSurface {
+	static meta = {
+		id: "risk-matrix",
+		name: "Risk matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots risks by likelihood and impact on severity bands, for prioritising a risk register.",
+		tags: [
+			"probability impact",
+			"heat map",
+			"risk register"
+		],
+		sample: (seed) => SampleData.points(seed, 16, 3).map((point, i) => {
+			const likelihood = 1 + Math.round(+point.x / 8) % 5, impact = 1 + Math.round(+point.size) % 5;
+			return {
+				name: `Risk ${i + 1}`,
+				likelihood,
+				impact,
+				residualLikelihood: Math.max(1, likelihood - 1 - i % 2),
+				residualImpact: Math.max(1, impact - (i % 3 === 0 ? 1 : 0))
+			};
+		}),
+		variants: {
+			levels: [
+				5,
+				3,
+				4
+			],
+			scoring: [
+				"likelihood-times-impact",
+				"likelihood-plus-impact",
+				"impact-led"
+			],
+			marks: [
+				"dots",
+				"counts",
+				"names"
+			],
+			axes: ["likelihood-across", "impact-across"],
+			trajectory: [false, true]
+		},
+		valid: (v) => !(v.trajectory && v.marks !== "dots")
+	};
+	defaults() {
+		return {
+			name: "name",
+			likelihood: "likelihood",
+			impact: "impact",
+			residualLikelihood: "residualLikelihood",
+			residualImpact: "residualImpact",
+			scaleMax: 5,
+			levels: 5,
+			scoring: "likelihood-times-impact",
+			marks: "dots",
+			axes: "likelihood-across",
+			trajectory: false
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.Top;
+	}
+	get blank() {
+		return false;
+	}
+	legendItems() {
+		return ZONES.map((key, i) => ({
+			key,
+			color: this.zoneFill(i)
+		}));
+	}
+	zoneFill(zone) {
+		return [
+			this.theme.good,
+			this.theme.warning,
+			this.theme.serious,
+			this.theme.critical
+		][zone];
+	}
+	bin(value) {
+		const { scaleMax, levels } = this.options;
+		return Math.max(1, Math.min(levels, Math.ceil((Number(value) || 1) / scaleMax * levels)));
+	}
+	zone(likelihood, impact) {
+		const { scoring, levels } = this.options, n = levels;
+		const score = scoring === "likelihood-plus-impact" ? (likelihood + impact - 2) / (2 * n - 2) : scoring === "impact-led" ? ((impact - 1) * .7 + (likelihood - 1) * .3) / (n - 1) : (likelihood * impact - 1) / (n * n - 1);
+		return score >= .68 ? 3 : score >= .4 ? 2 : score >= .16 ? 1 : 0;
+	}
+	compose(ctx) {
+		const { data, name, likelihood, impact, residualLikelihood, residualImpact, levels, marks, axes, trajectory } = this.options;
+		const n = levels, swapped = axes === "impact-across";
+		const items = (data ?? []).map((row) => ({
+			name: String(row[name] ?? ""),
+			likelihood: this.bin(row[likelihood]),
+			impact: this.bin(row[impact]),
+			residualL: this.bin(row[residualLikelihood] ?? row[likelihood]),
+			residualI: this.bin(row[residualImpact] ?? row[impact])
+		}));
+		const size = {
+			w: (ctx.plot.width - GUTTER) / n,
+			h: (ctx.plot.height - FOOT) / n
+		};
+		const x = (a) => GUTTER + (a - 1) * size.w, y = (b) => (n - b) * size.h;
+		const across = (d) => swapped ? d.impact : d.likelihood, up = (d) => swapped ? d.likelihood : d.impact;
+		const cells = Array.from({ length: n * n }, (_, i) => {
+			const l = i % n + 1, m = Math.floor(i / n) + 1;
+			return {
+				likelihood: l,
+				impact: m,
+				zone: this.zone(l, m),
+				key: `${l}/${m}`
+			};
+		});
+		const tiles = ctx.marks("zones", "path", cells, (cell) => cell.key).attr("d", MatrixGlyphs.tile(size.w - 2, size.h - 2, 4)).attr("fill", (cell) => this.zoneFill(cell.zone)).attr("fill-opacity", .26);
+		ctx.set(tiles, { transform: (cell) => `translate(${x(across(cell)) + size.w / 2},${y(up(cell)) + size.h / 2})` }, { transform: (cell) => `translate(${x(across(cell)) + size.w / 2},${y(up(cell)) + size.h / 2}) scale(0)` }, 12);
+		const inCell = group(items, (item) => `${item.likelihood}/${item.impact}`);
+		ctx.hover(tiles, (cell) => ({
+			title: `${ZONES[cell.zone]} risk`,
+			rows: [
+				["Likelihood", cell.likelihood],
+				["Impact", cell.impact],
+				["Risks", inCell.get(cell.key)?.length ?? 0]
+			]
+		}));
+		ctx.marks("zone-edges", "path", [this.edges(cells, across, up, x, y, size, n)]).attr("d", (d) => d).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("pointer-events", "none");
+		const titles = [{
+			text: swapped ? "Impact →" : "Likelihood →",
+			transform: `translate(${GUTTER + size.w * n / 2},${ctx.plot.height - 4})`
+		}, {
+			text: swapped ? "Likelihood →" : "Impact →",
+			transform: `translate(9,${size.h * n / 2}) rotate(-90)`
+		}];
+		ctx.text(ctx.marks("axis-titles", "text", titles, (d) => d.text), 11).attr("text-anchor", "middle").attr("transform", (d) => d.transform).text((d) => d.text);
+		const levelsList = Array.from({ length: n }, (_, i) => i + 1);
+		ctx.text(ctx.marks("x-levels", "text", levelsList, (d) => d), 10.5, "muted").attr("text-anchor", "middle").attr("x", (d) => x(d) + size.w / 2).attr("y", size.h * n + 13).text((d) => d);
+		ctx.text(ctx.marks("y-levels", "text", levelsList, (d) => d), 10.5, "muted").attr("text-anchor", "end").attr("dy", "0.32em").attr("x", 28).attr("y", (d) => y(d) + size.h / 2).text((d) => d);
+		const groups = [...inCell.entries()].sort(([a], [b]) => ascending(a, b)).map(([key, list]) => ({
+			key,
+			list,
+			first: list[0]
+		}));
+		this.counts(ctx, marks === "counts" ? groups : [], (d) => x(across(d.first)) + size.w / 2, (d) => y(up(d.first)) + size.h / 2);
+		this.names(ctx, marks === "names" ? groups : [], (d) => x(across(d.first)) + 7, (d) => y(up(d.first)) + 14, size);
+		const R = 5, pitch = 15;
+		const slots = marks === "dots" ? groups.flatMap((g) => {
+			const perRow = Math.max(1, Math.floor((size.w - 10) / pitch));
+			return g.list.map((item, i) => {
+				const left = x(across(g.first)) + size.w / 2 - (Math.min(perRow, g.list.length) - 1) * pitch / 2;
+				const rows = Math.ceil(g.list.length / perRow), top = y(up(g.first)) + size.h / 2 - (rows - 1) * pitch / 2;
+				return {
+					item,
+					cx: left + i % perRow * pitch,
+					cy: top + Math.floor(i / perRow) * pitch
+				};
+			});
+		}) : [];
+		const arrows = trajectory ? slots.filter(({ item }) => item.residualL !== item.likelihood || item.residualI !== item.impact).map((slot) => {
+			const end = {
+				likelihood: slot.item.residualL,
+				impact: slot.item.residualI
+			};
+			const tx = x(across(end)) + size.w * .5 + (slot.cx % 11 - 5), ty = y(up(end)) + size.h * .5 + (slot.cy % 11 - 5);
+			const angle = Math.atan2(ty - slot.cy, tx - slot.cx), head = 5;
+			return {
+				key: slot.item.name,
+				d: `M${slot.cx},${slot.cy}L${tx.toFixed(1)},${ty.toFixed(1)}M${(tx - head * Math.cos(angle - .5)).toFixed(1)},${(ty - head * Math.sin(angle - .5)).toFixed(1)}L${tx.toFixed(1)},${ty.toFixed(1)}L${(tx - head * Math.cos(angle + .5)).toFixed(1)},${(ty - head * Math.sin(angle + .5)).toFixed(1)}`
+			};
+		}) : [];
+		ctx.drawOn(ctx.marks("trajectories", "path", arrows, (d) => d.key).attr("d", (d) => d.d).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5).attr("stroke-linecap", "round").attr("pointer-events", "none"));
+		const dots = ctx.marks("risks", "circle", slots, (d) => d.item.name).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: R
+		}, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: 0
+		}, 10);
+		ctx.hover(dots, (d) => ({
+			title: d.item.name,
+			rows: [
+				["Likelihood", d.item.likelihood],
+				["Impact", d.item.impact],
+				["Band", ZONES[this.zone(d.item.likelihood, d.item.impact)]]
+			]
+		}));
+	}
+	edges(cells, across, up, x, y, size, n) {
+		const at = new Map(cells.map((cell) => [`${across(cell)}/${up(cell)}`, cell.zone]));
+		return cells.flatMap((cell) => {
+			const a = across(cell), b = up(cell), parts = [], zone = at.get(`${a}/${b}`);
+			if (a < n && at.get(`${a + 1}/${b}`) !== zone) parts.push(`M${(x(a) + size.w).toFixed(1)},${y(b).toFixed(1)}v${size.h.toFixed(1)}`);
+			if (b < n && at.get(`${a}/${b + 1}`) !== zone) parts.push(`M${x(a).toFixed(1)},${y(b).toFixed(1)}h${size.w.toFixed(1)}`);
+			return parts;
+		}).join("");
+	}
+	counts(ctx, groups, cx, cy) {
+		const badges = ctx.marks("count-badges", "circle", groups, (d) => d.key).attr("fill", ctx.theme.ink);
+		ctx.set(badges, {
+			cx,
+			cy,
+			r: (d) => 9 + Math.sqrt(d.list.length) * 2
+		}, {
+			cx,
+			cy,
+			r: 0
+		});
+		ctx.hover(badges, (d) => ({
+			title: `${d.list.length} risks`,
+			rows: d.list.slice(0, 6).map((item) => [item.name, ""])
+		}));
+		ctx.marks("counts", "text", groups, (d) => d.key).attr("x", cx).attr("y", cy).attr("dy", "0.34em").attr("text-anchor", "middle").attr("pointer-events", "none").attr("font-size", 12).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("fill", ctx.theme.surface).text((d) => d.list.length);
+	}
+	/** As many names as fit in the cell, then a count of the rest. */
+	names(ctx, groups, left, top, size) {
+		const lines = Math.max(1, Math.floor((size.h - 8) / 13));
+		const rows = groups.flatMap((g) => {
+			const room = g.list.length > lines ? lines - 1 : lines;
+			const names = g.list.slice(0, room).map((item) => item.name);
+			if (g.list.length > room) names.push(`+${g.list.length - room} more`);
+			return names.map((text, i) => ({
+				key: `${g.key}/${i}`,
+				g,
+				text,
+				i
+			}));
+		});
+		ctx.text(ctx.marks("risk-names", "text", rows, (d) => d.key), 11, "ink").attr("x", (d) => left(d.g)).attr("y", (d) => top(d.g) + d.i * 13).attr("pointer-events", "none").text((d) => fitText(d.text, size.w - 12, CHAR));
+	}
+};
+export { RiskAxes, RiskMarks, RiskMatrix, RiskScoring };

package/dist/charts/matrix/SeriationMatrix.js

@@ -0,0 +1,151 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixChart } from "./MatrixChart.js";
+import { MatrixGlyph } from "./matrixEnums.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+import { fitText } from "./MatrixSurface.js";
+import { randomLcg, shuffler } from "d3";
+// src/charts/matrix/SeriationMatrix.ts
+var SeriationMethod = /* @__PURE__ */ function(SeriationMethod) {
+	SeriationMethod["Barycenter"] = "barycenter";
+	SeriationMethod["Spectral"] = "spectral";
+	SeriationMethod["Tour"] = "shortest-tour";
+	SeriationMethod["BondEnergy"] = "bond-energy";
+	SeriationMethod["Hierarchical"] = "hierarchical";
+	return SeriationMethod;
+}({});
+var SeriationTarget = /* @__PURE__ */ function(SeriationTarget) {
+	SeriationTarget["Both"] = "both-axes";
+	SeriationTarget["Rows"] = "rows-only";
+	SeriationTarget["Columns"] = "columns-only";
+	return SeriationTarget;
+}({});
+var SeriationView = /* @__PURE__ */ function(SeriationView) {
+	SeriationView["After"] = "result";
+	SeriationView["Compare"] = "before-and-after";
+	return SeriationView;
+}({});
+var stress = (vectors) => vectors.slice(1).reduce((total, row, i) => total + MatrixSeriation.distance(row, vectors[i]), 0);
+/** Bertin's reorderable matrix: permutes rows and columns until structure hidden by the input order becomes visible. */
+var SeriationMatrix = class extends MatrixChart {
+	static meta = {
+		id: "seriation-matrix",
+		name: "Seriation matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Reorders rows and columns with a seriation algorithm so that bands, blocks and gradients emerge from shuffled data.",
+		tags: [
+			"reorderable matrix",
+			"bertin",
+			"permutation"
+		],
+		sample: (seed) => {
+			const { rows, columns, values } = SampleData.matrix(seed, 12, 14);
+			const shuffle = shuffler(randomLcg(.37 * seed % 1));
+			const rowOrder = shuffle(rows.map((_, i) => i)), columnOrder = shuffle(columns.map((_, i) => i));
+			return {
+				rows: rowOrder.map((r) => rows[r]),
+				columns: columnOrder.map((c) => columns[c]),
+				values: rowOrder.map((r) => columnOrder.map((c) => values[r][c]))
+			};
+		},
+		variants: {
+			method: [
+				"barycenter",
+				"spectral",
+				"shortest-tour",
+				"bond-energy",
+				"hierarchical"
+			],
+			target: [
+				"both-axes",
+				"rows-only",
+				"columns-only"
+			],
+			glyph: [
+				MatrixGlyph.Tile,
+				MatrixGlyph.Column,
+				MatrixGlyph.Circle
+			],
+			view: ["result", "before-and-after"]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			method: "barycenter",
+			target: "both-axes",
+			glyph: MatrixGlyph.Tile,
+			view: "result"
+		};
+	}
+	reordered(model) {
+		const { method, target } = this.options;
+		const permute = (vectors) => {
+			switch (method) {
+				case "spectral": return MatrixSeriation.spectral(vectors);
+				case "shortest-tour": return MatrixSeriation.tour(vectors);
+				case "bond-energy": return MatrixSeriation.bondEnergy(vectors);
+				default: return MatrixSeriation.clustered(vectors);
+			}
+		};
+		const bary = method === "barycenter" ? MatrixSeriation.barycenter(model) : null;
+		const rows = target === "columns-only" ? model.rows.map((_, i) => i) : bary?.rows ?? permute(model.rowVectors);
+		const columns = target === "rows-only" ? model.columns.map((_, i) => i) : bary?.columns ?? permute(model.columnVectors);
+		return model.reorder(rows, columns);
+	}
+	panel(ctx, model, frame, name) {
+		const { glyph } = this.options;
+		const fill = this.heat(ctx, model.domain), reach = model.reach;
+		this.glyphs(ctx, name, model.cells, frame, {
+			glyph,
+			size: (cell) => Math.abs(cell.value ?? 0) / reach,
+			fill: (cell) => fill(cell.value),
+			tip: (cell) => ({
+				title: `${cell.row} · ${cell.column}`,
+				color: fill(cell.value),
+				rows: [["Value", cell.value === null ? "no data" : Scales.format(cell.value, reach)]]
+			})
+		});
+	}
+	drawMatrix(ctx, source) {
+		const model = this.reordered(source);
+		if (this.options.view === "result") {
+			const frame = this.frame(ctx, model, { bottom: 22 });
+			this.axisLabels(ctx, model, frame);
+			this.panel(ctx, model, frame, "after");
+			this.ramp(ctx, model.domain, frame.x, frame.y + frame.height + 6);
+			return;
+		}
+		const half = (ctx.plot.width - 20) / 2;
+		const before = this.frame(ctx, source, {
+			right: half + 20,
+			bottom: 22,
+			top: 14,
+			columnLabels: "none",
+			rowLabels: false
+		});
+		const after = this.frame(ctx, model, {
+			left: half + 20,
+			bottom: 22,
+			top: 14,
+			columnLabels: "none",
+			rowLabels: false
+		});
+		this.panel(ctx, source, before, "before");
+		this.panel(ctx, model, after, "after");
+		const total = (matrix) => stress(matrix.rowVectors) + stress(matrix.columnVectors);
+		const gain = 1 - total(model) / (total(source) || 1);
+		ctx.text(ctx.marks("panel-titles", "text", [{
+			x: before.x,
+			text: "Input order"
+		}, {
+			x: after.x,
+			text: `Reordered · ${Math.round(gain * 100)}% smoother`
+		}], (d) => d.x), 11, "ink").attr("x", (d) => d.x).attr("y", 9).text((d) => fitText(d.text, half));
+		this.ramp(ctx, model.domain, 0, before.y + before.height + 6);
+	}
+};
+export { SeriationMatrix, SeriationMethod, SeriationTarget, SeriationView };

package/dist/charts/matrix/SortedMatrix.js

@@ -0,0 +1,136 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixChart } from "./MatrixChart.js";
+import { MatrixGlyph } from "./matrixEnums.js";
+import { MatrixModel } from "./MatrixModel.js";
+import { CHAR } from "./MatrixSurface.js";
+import { ascending, deviation, line, max, sum } from "d3";
+// src/charts/matrix/SortedMatrix.ts
+var MatrixSortAxis = /* @__PURE__ */ function(MatrixSortAxis) {
+	MatrixSortAxis["Rows"] = "sort-rows";
+	MatrixSortAxis["Columns"] = "sort-columns";
+	MatrixSortAxis["Both"] = "sort-both";
+	MatrixSortAxis["Rank"] = "rank-each-column";
+	return MatrixSortAxis;
+}({});
+var MatrixSortKey = /* @__PURE__ */ function(MatrixSortKey) {
+	MatrixSortKey["Total"] = "total";
+	MatrixSortKey["Peak"] = "peak";
+	MatrixSortKey["First"] = "first-value";
+	MatrixSortKey["Spread"] = "spread";
+	MatrixSortKey["Name"] = "name";
+	return MatrixSortKey;
+}({});
+var MatrixSortDirection = /* @__PURE__ */ function(MatrixSortDirection) {
+	MatrixSortDirection["Descending"] = "descending";
+	MatrixSortDirection["Ascending"] = "ascending";
+	return MatrixSortDirection;
+}({});
+var THREADS = 3;
+/** Sorted heatmap and rank table: puts order on the page, either by a key or by ranking each column on its own. */
+var SortedMatrix = class extends MatrixChart {
+	static meta = {
+		id: "sorted-matrix",
+		name: "Sorted matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Sorts rows and columns by a chosen key, or ranks each column separately, to show leaders and how they shift.",
+		tags: [
+			"rank",
+			"table lens",
+			"sorted heatmap"
+		],
+		sample: (seed) => SampleData.categories(seed, 9, 8),
+		variants: {
+			sort: [
+				"sort-rows",
+				"sort-columns",
+				"sort-both",
+				"rank-each-column"
+			],
+			key: [
+				"total",
+				"peak",
+				"first-value",
+				"spread",
+				"name"
+			],
+			direction: ["descending", "ascending"],
+			glyph: [MatrixGlyph.Tile, MatrixGlyph.Bar],
+			links: [false, true]
+		},
+		valid: (v) => v.sort === "rank-each-column" ? v.key === "total" : !v.links && !(v.key === "name" && v.sort === "sort-both")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: "sort-rows",
+			key: "total",
+			direction: "descending",
+			glyph: MatrixGlyph.Tile,
+			links: false
+		};
+	}
+	permutation(vectors, names) {
+		const { key, direction } = this.options;
+		const score = (vector) => key === "peak" ? max(vector) ?? 0 : key === "first-value" ? vector[0] ?? 0 : key === "spread" ? deviation(vector) ?? 0 : sum(vector);
+		const scores = vectors.map(score), sign = direction === "descending" ? -1 : 1;
+		return vectors.map((_, i) => i).sort((a, b) => (key === "name" ? ascending(names[a], names[b]) : scores[a] - scores[b]) * sign || a - b);
+	}
+	drawMatrix(ctx, source) {
+		if (this.options.sort === "rank-each-column") return this.ranked(ctx, source);
+		const { sort, glyph } = this.options;
+		const rows = sort === "sort-columns" ? source.rows.map((_, i) => i) : this.permutation(source.rowVectors, source.rows);
+		const columns = sort === "sort-rows" ? source.columns.map((_, i) => i) : this.permutation(source.columnVectors, source.columns);
+		const model = source.reorder(rows, columns);
+		const frame = this.frame(ctx, model, { bottom: 22 });
+		this.axisLabels(ctx, model, frame);
+		this.cells(ctx, model, model.cells, frame, glyph);
+		this.ramp(ctx, model.domain, frame.x, frame.y + frame.height + 6);
+	}
+	cells(ctx, model, cells, frame, glyph) {
+		const [low, high] = model.domain, fill = this.heat(ctx, model.domain);
+		this.glyphs(ctx, "cells", cells, frame, {
+			glyph,
+			size: (cell) => glyph === MatrixGlyph.Tile ? 1 : high > low ? Math.abs(cell.value ?? 0) / model.reach : 1,
+			fill: (cell) => fill(cell.value),
+			tip: (cell) => ({
+				title: `${cell.row} · ${cell.column}`,
+				color: fill(cell.value),
+				rows: [["Value", cell.value === null ? "no data" : Scales.format(cell.value, model.reach)]]
+			})
+		});
+	}
+	/** Each column sorted on its own: y is rank, so a row's cells scatter and show how its standing moves. */
+	ranked(ctx, source) {
+		const { direction, glyph, links } = this.options;
+		const sign = direction === "descending" ? -1 : 1;
+		const ranks = source.columns.map((_, c) => source.rows.map((_, r) => r).sort((a, b) => ((source.values[a][c] ?? -Infinity) - (source.values[b][c] ?? -Infinity)) * sign || a - b));
+		const labels = source.rows.map((_, rank) => `#${rank + 1}`);
+		const axis = new MatrixModel(labels, source.columns, source.values);
+		const names = links ? Math.max(...source.rows.map((row) => row.length)) * CHAR + 8 : 0;
+		const frame = this.frame(ctx, axis, {
+			bottom: 22,
+			right: names
+		});
+		this.axisLabels(ctx, axis, frame);
+		const cells = source.cells.map((cell) => ({
+			...cell,
+			r: ranks[cell.c].indexOf(cell.r)
+		}));
+		this.cells(ctx, source, cells, frame, glyph);
+		const leaders = links ? ranks[0].slice(0, THREADS) : [];
+		const trace = line().x((_, c) => frame.cx(c)).y((rank) => frame.cy(rank));
+		const paths = ctx.marks("threads", "path", leaders, (row) => row).attr("fill", "none").attr("stroke", (_, i) => [
+			ctx.theme.ink,
+			ctx.theme.inkSecondary,
+			ctx.theme.inkMuted
+		][i]).attr("stroke-width", 2).attr("pointer-events", "none").attr("d", (row) => trace(ranks.map((list) => list.indexOf(row))));
+		ctx.drawOn(paths);
+		ctx.text(ctx.marks("thread-names", "text", leaders, (row) => row), 11, "ink").attr("x", frame.x + frame.width + 6).attr("dy", "0.32em").attr("y", (row) => frame.cy(ranks[ranks.length - 1].indexOf(row))).text((row) => source.rows[row]);
+		this.ramp(ctx, source.domain, frame.x, frame.y + frame.height + 6);
+	}
+};
+export { MatrixSortAxis, MatrixSortDirection, MatrixSortKey, SortedMatrix };