@mstone6969/graph 0.0.0-stage → 0.2.0

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

package/dist/charts/matrix/SpyPlot.js

@@ -0,0 +1,163 @@
+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 { MatrixGlyphs } from "./MatrixGlyphs.js";
+import { MatrixGlyph } from "./matrixEnums.js";
+// src/charts/matrix/SpyPlot.ts
+var SpyMarker = /* @__PURE__ */ function(SpyMarker) {
+	SpyMarker["Dot"] = "dots";
+	SpyMarker["Square"] = "squares";
+	SpyMarker["Value"] = "sized";
+	return SpyMarker;
+}({});
+var SpyOrder = /* @__PURE__ */ function(SpyOrder) {
+	SpyOrder["Input"] = "input-order";
+	SpyOrder["Bandwidth"] = "reverse-cuthill-mckee";
+	SpyOrder["Degree"] = "by-degree";
+	return SpyOrder;
+}({});
+var KEY = 20;
+/** MATLAB's `spy`: only where the non-zeros are, for reading the structure of a sparse matrix. */
+var SpyPlot = class extends MatrixChart {
+	static meta = {
+		id: "spy-plot",
+		name: "Spy plot",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Marks the non-zero entries of a sparse matrix, showing bandwidth, blocks and fill-in rather than values.",
+		tags: [
+			"sparse matrix",
+			"sparsity pattern",
+			"adjacency",
+			"bandwidth"
+		],
+		sample: (seed) => {
+			const { nodes, links } = SampleData.graph(seed, 72, 4);
+			const names = nodes.map((node) => node.id), index = new Map(names.map((name, i) => [name, i]));
+			const values = names.map(() => names.map(() => 0));
+			names.forEach((_, i) => {
+				values[i][i] = 1;
+			});
+			for (const { source, target, value } of links) {
+				const a = index.get(source), b = index.get(target);
+				values[a][b] = values[b][a] = value ?? 1;
+			}
+			return {
+				rows: names,
+				columns: names,
+				values
+			};
+		},
+		variants: {
+			marker: [
+				"dots",
+				"squares",
+				"sized"
+			],
+			order: [
+				"input-order",
+				"reverse-cuthill-mckee",
+				"by-degree"
+			],
+			blocks: [
+				0,
+				6,
+				12
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			marker: "dots",
+			order: "input-order",
+			blocks: 0,
+			threshold: 0
+		};
+	}
+	/** Neighbours by non-zero pattern, for square matrices. */
+	adjacency(model) {
+		const { threshold } = this.options;
+		return model.rowVectors.map((row, r) => row.flatMap((value, c) => r !== c && Math.abs(value) > threshold ? [c] : []));
+	}
+	reverseCuthillMcKee(neighbours) {
+		const degree = neighbours.map((list) => list.length), seen = /* @__PURE__ */ new Set(), order = [];
+		const starts = neighbours.map((_, i) => i).sort((a, b) => degree[a] - degree[b] || a - b);
+		for (const start of starts) {
+			if (seen.has(start)) continue;
+			seen.add(start);
+			const queue = [start];
+			while (queue.length) {
+				const node = queue.shift();
+				order.push(node);
+				for (const next of [...neighbours[node]].sort((a, b) => degree[a] - degree[b] || a - b)) if (!seen.has(next)) {
+					seen.add(next);
+					queue.push(next);
+				}
+			}
+		}
+		return order.reverse();
+	}
+	drawMatrix(ctx, source) {
+		const { marker, order, blocks, threshold } = this.options;
+		const square = source.rows.length === source.columns.length;
+		const neighbours = square ? this.adjacency(source) : [];
+		const permutation = !square || order === "input-order" ? null : order === "reverse-cuthill-mckee" ? this.reverseCuthillMcKee(neighbours) : neighbours.map((_, i) => i).sort((a, b) => neighbours[b].length - neighbours[a].length || a - b);
+		const model = permutation ? source.reorder(permutation, permutation) : source;
+		const frame = this.frame(ctx, model, {
+			square: true,
+			bottom: KEY,
+			rowLabels: false,
+			columnLabels: "none"
+		});
+		const cells = model.cells.filter((cell) => Math.abs(cell.value ?? 0) > threshold);
+		const reach = model.reach, ink = ctx.palette.sequential(.8);
+		const place = frame.x + (ctx.plot.width - frame.width) / 2;
+		const shifted = {
+			...frame,
+			x: place,
+			cx: (c) => place + frame.cw * (c + .5)
+		};
+		const count = blocks ?? 0;
+		const blockW = count ? frame.width / count : 0, blockH = count ? frame.height / count : 0;
+		const tally = /* @__PURE__ */ new Map();
+		if (count) for (const cell of cells) {
+			const key = `${Math.floor(cell.r / model.rows.length * count)}/${Math.floor(cell.c / model.columns.length * count)}`;
+			tally.set(key, (tally.get(key) ?? 0) + 1);
+		}
+		const capacity = model.rows.length * model.columns.length / (count * count || 1);
+		const shaded = [...tally].map(([key, filled]) => ({
+			key,
+			filled,
+			r: +key.split("/")[0],
+			c: +key.split("/")[1]
+		}));
+		const fills = ctx.marks("blocks", "rect", shaded, (d) => d.key).attr("rx", 2).attr("fill", (d) => ctx.palette.sequential(Math.min(1, d.filled / capacity * 4) * .4));
+		ctx.set(fills, {
+			x: (d) => place + d.c * blockW + 1,
+			y: (d) => frame.y + d.r * blockH + 1,
+			width: blockW - 2,
+			height: blockH - 2
+		});
+		ctx.hover(fills, (d) => ({
+			title: "Block",
+			rows: [["Non-zeros", d.filled], ["Density", `${(d.filled / capacity * 100).toFixed(1)}%`]]
+		}));
+		const pixel = Math.max(1.5, frame.cw - .5);
+		const path = (cell) => marker === "squares" ? MatrixGlyphs.tile(pixel, pixel, 0) : MatrixGlyphs.path(MatrixGlyph.Circle, Math.max(3, frame.cw * 1.3), Math.max(3, frame.cw * 1.3), marker === "sized" ? Math.abs(cell.value) / reach : .7);
+		const marks = ctx.marks("nonzeros", "path", cells, (cell) => cell.key).attr("d", path).attr("fill", ink);
+		ctx.set(marks, { transform: (cell) => `translate(${shifted.cx(cell.c)},${frame.cy(cell.r)})` }, { transform: (cell) => `translate(${shifted.cx(cell.c)},${frame.cy(cell.r)}) scale(0)` }, .4);
+		ctx.hover(marks, (cell) => ({
+			title: `${cell.row} · ${cell.column}`,
+			rows: [["Value", Scales.format(cell.value, reach)]]
+		}));
+		ctx.marks("border", "rect", [0]).attr("x", place).attr("y", frame.y).attr("width", frame.width).attr("height", frame.height).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("pointer-events", "none");
+		const reachDiagonal = square ? Math.max(0, ...cells.map((cell) => Math.abs(cell.r - cell.c))) : 0;
+		const density = cells.length / (model.rows.length * model.columns.length) * 100;
+		const note = `${model.rows.length} × ${model.columns.length} · ${cells.length} non-zeros (${density.toFixed(1)}%)${square ? ` · bandwidth ${reachDiagonal}` : ""}`;
+		ctx.text(ctx.marks("note", "text", [note]), 10.5, "muted").attr("text-anchor", "middle").attr("x", ctx.plot.width / 2).attr("y", frame.y + frame.height + 14).text((d) => d);
+	}
+};
+export { SpyMarker, SpyOrder, SpyPlot };

package/dist/charts/matrix/TableHeatmap.js

@@ -0,0 +1,175 @@
+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 { MatrixModel } from "./MatrixModel.js";
+import { MatrixMarginal, MatrixOrder } from "./matrixEnums.js";
+import { CHAR, fitText } from "./MatrixSurface.js";
+// src/charts/matrix/TableHeatmap.ts
+var TableIndicator = /* @__PURE__ */ function(TableIndicator) {
+	TableIndicator["Fill"] = "cell-fill";
+	TableIndicator["Bar"] = "data-bar";
+	TableIndicator["Dot"] = "dot";
+	return TableIndicator;
+}({});
+var TableScope = /* @__PURE__ */ function(TableScope) {
+	TableScope["Column"] = "per-column";
+	TableScope["Global"] = "whole-table";
+	TableScope["Row"] = "per-row";
+	return TableScope;
+}({});
+var TableDensity = /* @__PURE__ */ function(TableDensity) {
+	TableDensity["Comfortable"] = "comfortable";
+	TableDensity["Compact"] = "compact";
+	return TableDensity;
+}({});
+var HEAD = 24;
+var ROW_COMPACT = 20;
+/** A real table with every number printed, where shading makes highs and lows findable. */
+var TableHeatmap = class extends MatrixChart {
+	static meta = {
+		id: "table-heatmap",
+		name: "Table heatmap",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Keeps exact values in a table and adds shading or in-cell bars, for readers who need numbers and pattern together.",
+		tags: [
+			"conditional formatting",
+			"highlight table",
+			"data bars"
+		],
+		sample: (seed) => SampleData.categories(seed, 8, 5),
+		variants: {
+			indicator: [
+				"cell-fill",
+				"data-bar",
+				"dot"
+			],
+			scope: [
+				"per-column",
+				"whole-table",
+				"per-row"
+			],
+			totals: [
+				MatrixMarginal.None,
+				MatrixMarginal.Rows,
+				MatrixMarginal.Columns,
+				MatrixMarginal.Both
+			],
+			order: [MatrixOrder.Input, MatrixOrder.Total],
+			density: ["comfortable", "compact"]
+		},
+		valid: (v) => !(v.indicator === "cell-fill" && v.scope !== "per-column")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			indicator: "cell-fill",
+			scope: "per-column",
+			totals: MatrixMarginal.None,
+			order: MatrixOrder.Input,
+			density: "comfortable"
+		};
+	}
+	/** Appends total rows and columns as cells flagged `total`, so they lay out with the rest. */
+	withTotals(model) {
+		const { totals } = this.options;
+		const addRow = totals === MatrixMarginal.Columns || totals === MatrixMarginal.Both;
+		const addColumn = totals === MatrixMarginal.Rows || totals === MatrixMarginal.Both;
+		const rowTotals = model.rowTotals, columnTotals = model.columnTotals;
+		const values = model.values.map((row, r) => addColumn ? [...row, rowTotals[r]] : [...row]);
+		if (addRow) values.push(addColumn ? [...columnTotals, rowTotals.reduce((a, b) => a + b, 0)] : [...columnTotals]);
+		return new MatrixModel(addRow ? [...model.rows, "Total"] : model.rows, addColumn ? [...model.columns, "Total"] : model.columns, values, addRow ? [...model.rowIds, -1] : model.rowIds, addColumn ? [...model.columnIds, -1] : model.columnIds);
+	}
+	drawMatrix(ctx, source) {
+		const { indicator, scope, density } = this.options;
+		const body = this.ordered(source, this.options.order), model = this.withTotals(body);
+		const { width, height } = ctx.plot;
+		const nameW = Math.min(width * .3, Math.max(5, ...model.rows.map((row) => row.length)) * CHAR + 10);
+		const colW = (width - nameW) / model.columns.length;
+		const rowH = density === "compact" ? Math.min(ROW_COMPACT, (height - HEAD) / model.rows.length) : (height - HEAD) / model.rows.length;
+		const isBody = (r, c) => model.rowIds[r] >= 0 && model.columnIds[c] >= 0;
+		const cells = model.cells;
+		const [bodyLow, bodyHigh] = body.domain;
+		const range = (r, c) => {
+			if (scope === "per-column") {
+				const list = body.values.map((row) => row[c] ?? 0);
+				return [Math.min(...list), Math.max(...list)];
+			}
+			if (scope === "per-row") {
+				const list = (body.values[r] ?? []).map((value) => value ?? 0);
+				return [Math.min(...list), Math.max(...list)];
+			}
+			return [bodyLow, bodyHigh];
+		};
+		const share = (r, c, value) => {
+			const [low, high] = range(r, c);
+			return value === null ? 0 : high > low ? (value - low) / (high - low) : .5;
+		};
+		const size = (r, c, value) => {
+			const [low, high] = range(r, c);
+			return Math.abs(value ?? 0) / (Math.max(Math.abs(low), Math.abs(high)) || 1);
+		};
+		const x = (c) => nameW + c * colW, y = (r) => HEAD + r * rowH;
+		const shown = cells.filter((cell) => isBody(cell.r, cell.c) && cell.value !== null);
+		const tint = (r, c, value) => ctx.palette.sequential(share(r, c, value) * .86);
+		const format = (value) => value === null ? "–" : Scales.format(value, Math.max(model.reach, 100));
+		const inset = 2, room = colW - 4;
+		const fills = ctx.marks("fills", "rect", indicator === "cell-fill" ? shown : [], (cell) => cell.key).attr("rx", 2).attr("fill", (cell) => tint(cell.r, cell.c, cell.value));
+		ctx.set(fills, {
+			x: (cell) => x(cell.c) + 1,
+			y: (cell) => y(cell.r) + 1,
+			width: colW - 2,
+			height: rowH - 2
+		}, {
+			x: (cell) => x(cell.c) + 1,
+			y: (cell) => y(cell.r) + 1,
+			width: 0,
+			height: rowH - 2
+		}, 3);
+		const bars = ctx.marks("bars", "rect", indicator === "data-bar" ? shown : [], (cell) => cell.key).attr("rx", 2).attr("fill", ctx.palette.sequential(.28));
+		ctx.set(bars, {
+			x: (cell) => x(cell.c) + inset,
+			y: (cell) => y(cell.r) + 2,
+			width: (cell) => size(cell.r, cell.c, cell.value) * room,
+			height: rowH - 4
+		}, {
+			x: (cell) => x(cell.c) + inset,
+			y: (cell) => y(cell.r) + 2,
+			width: 0,
+			height: rowH - 4
+		}, 3);
+		const dots = ctx.marks("dots", "circle", indicator === "dot" ? shown : [], (cell) => cell.key).attr("fill", (cell) => tint(cell.r, cell.c, cell.value));
+		ctx.set(dots, {
+			cx: (cell) => x(cell.c) + 9,
+			cy: (cell) => y(cell.r) + rowH / 2,
+			r: (cell) => 1.5 + Math.sqrt(size(cell.r, cell.c, cell.value)) * Math.min(5, rowH / 2 - 2)
+		}, {
+			cx: (cell) => x(cell.c) + 9,
+			cy: (cell) => y(cell.r) + rowH / 2,
+			r: 0
+		});
+		for (const marks of [
+			fills,
+			bars,
+			dots
+		]) ctx.hover(marks, (cell) => ({
+			title: `${cell.row} · ${cell.column}`,
+			rows: [["Value", format(cell.value)]]
+		}));
+		const rules = model.rows.map((_, r) => r);
+		ctx.marks("rules", "line", rules, (r) => r).attr("x1", 0).attr("x2", width).attr("y1", (r) => y(r)).attr("y2", (r) => y(r)).attr("stroke", (r) => r === 0 || model.rowIds[r] < 0 ? ctx.theme.axis : ctx.theme.grid);
+		ctx.text(ctx.marks("header", "text", model.columns.map((label, c) => ({
+			label,
+			c
+		})), (d) => d.c), 11, "ink").attr("font-weight", 600).attr("text-anchor", "end").attr("x", (d) => x(d.c) + colW - 5).attr("y", 16).text((d) => fitText(d.label, colW - 6));
+		ctx.text(ctx.marks("names", "text", model.rows.map((label, r) => ({
+			label,
+			r
+		})), (d) => d.r), 11).attr("dy", "0.32em").attr("x", 0).attr("y", (d) => y(d.r) + rowH / 2).attr("font-weight", (d) => model.rowIds[d.r] < 0 ? 600 : 400).text((d) => fitText(d.label, nameW - 6));
+		const fits = rowH >= 13;
+		ctx.marks("values", "text", fits ? cells : [], (cell) => cell.key).attr("text-anchor", "end").attr("dy", "0.32em").attr("pointer-events", "none").attr("x", (cell) => x(cell.c) + colW - 5).attr("y", (cell) => y(cell.r) + rowH / 2).attr("font-size", 11).attr("font-family", ctx.theme.fontFamily).attr("font-weight", (cell) => isBody(cell.r, cell.c) ? 400 : 600).attr("font-variant-numeric", "tabular-nums").attr("fill", (cell) => indicator === "cell-fill" && isBody(cell.r, cell.c) ? this.inkOn(ctx, tint(cell.r, cell.c, cell.value)) : ctx.theme.ink).text((cell) => format(cell.value));
+	}
+};
+export { TableDensity, TableHeatmap, TableIndicator, TableScope };