@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/matrix/BubbleMatrix.js

@@ -0,0 +1,108 @@
+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, MatrixMarginal, MatrixNormalize, MatrixOrder } from "./matrixEnums.js";
+// src/charts/matrix/BubbleMatrix.ts
+var KEY_SPACE = 24;
+/** Area shows magnitude, which reads more exactly than colour alone. Colour then shows sign, or repeats size. */
+var BubbleMatrix = class extends MatrixChart {
+	static meta = {
+		id: "bubble-matrix",
+		name: "Bubble matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Places one sized symbol at each row and column crossing, for comparing magnitudes across a cross-tabulation.",
+		tags: [
+			"balloon plot",
+			"dot matrix",
+			"categorical bubble"
+		],
+		sample: (seed) => SampleData.categories(seed, 8, 7),
+		variants: {
+			symbol: [
+				MatrixGlyph.Circle,
+				MatrixGlyph.Square,
+				MatrixGlyph.Diamond,
+				MatrixGlyph.Triangle
+			],
+			normalize: [
+				MatrixNormalize.None,
+				MatrixNormalize.Row,
+				MatrixNormalize.Column
+			],
+			order: [
+				MatrixOrder.Input,
+				MatrixOrder.Total,
+				MatrixOrder.Cluster
+			],
+			guides: [true, false],
+			marginals: [MatrixMarginal.None, MatrixMarginal.Both]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: MatrixGlyph.Circle,
+			normalize: MatrixNormalize.None,
+			order: MatrixOrder.Input,
+			marginals: MatrixMarginal.None,
+			guides: true
+		};
+	}
+	drawMatrix(ctx, source) {
+		const { symbol, normalize, order, marginals, guides } = this.options;
+		const model = this.ordered(source, order), shown = model.normalize(normalize);
+		const both = marginals === MatrixMarginal.Both;
+		const frame = this.frame(ctx, shown, {
+			right: both ? 44 : 0,
+			top: both ? 44 : 0,
+			bottom: KEY_SPACE + (both ? 2 : 0),
+			columnLabels: both ? "bottom" : "top"
+		});
+		const reach = shown.reach, signed = shown.domain[0] < 0;
+		const heat = this.heat(ctx, shown.domain), fill = signed || this.options.colorScale ? heat : (value) => ctx.palette.sequential(.3 + .7 * (value ?? 0) / reach);
+		this.axisLabels(ctx, shown, frame);
+		this.marginals(ctx, model, frame, marginals);
+		const lines = guides ? [...shown.rows.map((_, r) => ({
+			key: `r${r}`,
+			x1: frame.x,
+			x2: frame.x + frame.width,
+			y1: frame.cy(r),
+			y2: frame.cy(r)
+		})), ...shown.columns.map((_, c) => ({
+			key: `c${c}`,
+			x1: frame.cx(c),
+			x2: frame.cx(c),
+			y1: frame.y,
+			y2: frame.y + frame.height
+		}))] : [];
+		ctx.marks("guides", "line", lines, (d) => d.key).attr("stroke", ctx.theme.grid).attr("x1", (d) => d.x1).attr("x2", (d) => d.x2).attr("y1", (d) => d.y1).attr("y2", (d) => d.y2);
+		const format = (value) => value === null ? "no data" : normalize === MatrixNormalize.None ? Scales.format(value, reach) : `${(value * 100).toFixed(1)}%`;
+		const cells = shown.cells.filter((cell) => cell.value !== null);
+		const raw = new Map(model.cells.map((cell) => [cell.key, cell.value]));
+		this.glyphs(ctx, "cells", cells, frame, {
+			glyph: symbol,
+			gap: 2,
+			size: (cell) => Math.abs(cell.value) / reach,
+			fill: (cell) => fill(cell.value),
+			tip: (cell) => ({
+				title: `${cell.row} · ${cell.column}`,
+				color: fill(cell.value),
+				rows: [["Value", raw.get(cell.key) ?? 0], ...normalize === MatrixNormalize.None ? [] : [["Share", format(cell.value)]]]
+			})
+		});
+		const bottom = frame.y + frame.height + (both ? frame.header + 2 : 4);
+		this.sizeKey(ctx, symbol, frame, bottom, [
+			1,
+			.5,
+			.1
+		].map((t) => ({
+			t,
+			fill: ctx.theme.axis,
+			label: format(reach * t)
+		})));
+	}
+};
+export { BubbleMatrix };

package/dist/charts/matrix/ClusteredHeatmap.js

@@ -0,0 +1,177 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixChart } from "./MatrixChart.js";
+import { MatrixDistance, MatrixGlyph, MatrixLinkage } from "./matrixEnums.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+import { linkHorizontal, linkVertical } from "d3";
+// src/charts/matrix/ClusteredHeatmap.ts
+var DendrogramSides = /* @__PURE__ */ function(DendrogramSides) {
+	DendrogramSides["Both"] = "both-trees";
+	DendrogramSides["Rows"] = "row-tree";
+	DendrogramSides["Columns"] = "column-tree";
+	return DendrogramSides;
+}({});
+var DendrogramBranch = /* @__PURE__ */ function(DendrogramBranch) {
+	DendrogramBranch["Elbow"] = "elbow";
+	DendrogramBranch["Slanted"] = "slanted";
+	DendrogramBranch["Curved"] = "curved";
+	return DendrogramBranch;
+}({});
+var TREE = 58;
+var STRIP = 10;
+/** Groups similar rows and columns together and draws the tree that justifies the grouping. */
+var ClusteredHeatmap = class extends MatrixChart {
+	static meta = {
+		id: "clustered-heatmap",
+		name: "Clustered heatmap",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Reorders a heatmap by hierarchical clustering and shows the dendrograms, for finding groups of similar rows and columns.",
+		tags: [
+			"dendrogram",
+			"clustermap",
+			"hierarchical"
+		],
+		sample: (seed) => SampleData.matrix(seed, 12, 12),
+		variants: {
+			dendrograms: [
+				"both-trees",
+				"row-tree",
+				"column-tree"
+			],
+			linkage: [
+				MatrixLinkage.Average,
+				MatrixLinkage.Complete,
+				MatrixLinkage.Single,
+				MatrixLinkage.Ward
+			],
+			distance: [
+				MatrixDistance.Euclidean,
+				MatrixDistance.Manhattan,
+				MatrixDistance.Correlation
+			],
+			branch: [
+				"elbow",
+				"slanted",
+				"curved"
+			],
+			clusters: [0, 4]
+		},
+		valid: (v) => !(v.dendrograms === "column-tree" && v.clusters !== 0) && !(v.linkage === MatrixLinkage.Ward && v.distance !== MatrixDistance.Euclidean)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			dendrograms: "both-trees",
+			linkage: MatrixLinkage.Average,
+			distance: MatrixDistance.Euclidean,
+			branch: "elbow",
+			clusters: 0
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.clusters ? LegendPosition.Top : LegendPosition.None);
+	}
+	drawMatrix(ctx, source) {
+		const { dendrograms, distance, linkage, clusters } = this.options;
+		const rowTree = dendrograms !== "column-tree" ? MatrixSeriation.cluster(source.rowVectors, distance, linkage) : null;
+		const columnTree = dendrograms !== "row-tree" ? MatrixSeriation.cluster(source.columnVectors, distance, linkage) : null;
+		const rows = rowTree ? MatrixSeriation.leaves(rowTree) : source.rows.map((_, i) => i);
+		const columns = columnTree ? MatrixSeriation.leaves(columnTree) : source.columns.map((_, i) => i);
+		const model = source.reorder(rows, columns);
+		const left = (rowTree ? TREE : 0) + (clusters && rowTree ? 13 : 0);
+		const gutter = Math.max(...model.rows.map((row) => row.length)) * 6.2 + 8;
+		const frame = this.frame(ctx, model, {
+			left,
+			right: gutter,
+			top: columnTree ? TREE : 0,
+			bottom: 22,
+			rowLabels: false,
+			columnLabels: "bottom"
+		});
+		const fill = this.heat(ctx, model.domain);
+		this.glyphs(ctx, "cells", model.cells, frame, {
+			glyph: MatrixGlyph.Tile,
+			size: () => 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)]]
+			})
+		});
+		this.axisLabels(ctx, model, frame);
+		this.rowNames(ctx, model, frame);
+		this.ramp(ctx, model.domain, frame.x, frame.y + frame.height + 20);
+		const groups = rowTree && clusters ? MatrixSeriation.cut(rowTree, clusters) : [];
+		const colors = /* @__PURE__ */ new Map();
+		const paint = (node, color) => {
+			colors.set(node.id, color);
+			if (node.left) {
+				paint(node.left, color);
+				paint(node.right, color);
+			}
+		};
+		groups.forEach((node, i) => paint(node, ctx.palette.color(`Group ${i + 1}`)));
+		const position = new Map(rows.map((row, at) => [row, at])), positionC = new Map(columns.map((column, at) => [column, at]));
+		const rowLimbs = rowTree ? this.limbs(rowTree, (leaf) => frame.cy(position.get(leaf)), left - (clusters ? 13 : 0) - 4, true, colors, ctx) : [];
+		const columnLimbs = columnTree ? this.limbs(columnTree, (leaf) => frame.cx(positionC.get(leaf)), frame.y - 3, false, /* @__PURE__ */ new Map(), ctx) : [];
+		for (const [name, limbs] of [["row-tree", rowLimbs], ["column-tree", columnLimbs]]) {
+			const paths = ctx.marks(name, "path", limbs, (limb) => limb.key).attr("d", (limb) => limb.d).attr("fill", "none").attr("stroke", (limb) => limb.color).attr("stroke-width", 1.25);
+			ctx.drawOn(paths);
+		}
+		const strips = groups.map((node, i) => {
+			const places = MatrixSeriation.leaves(node).map((leaf) => position.get(leaf));
+			return {
+				cluster: i + 1,
+				size: places.length,
+				first: Math.min(...places),
+				last: Math.max(...places)
+			};
+		});
+		const stripMarks = ctx.marks("cluster-strip", "rect", strips, (d) => d.cluster).attr("fill", (d) => ctx.palette.color(`Group ${d.cluster}`)).attr("rx", 2).attr("x", left - STRIP).attr("width", 9).attr("y", (d) => frame.cy(d.first) - frame.ch / 2 + 1).attr("height", (d) => Math.max(1, (d.last - d.first + 1) * frame.ch - 2));
+		ctx.hover(stripMarks, (d) => ({
+			title: `Group ${d.cluster}`,
+			color: ctx.palette.color(`Group ${d.cluster}`),
+			rows: [["Rows", d.size]]
+		}));
+	}
+	rowNames(ctx, model, frame) {
+		const step = Math.ceil(12 / frame.ch);
+		const names = model.rows.map((label, r) => ({
+			label,
+			r
+		})).filter(({ r }) => r % step === 0);
+		ctx.text(ctx.marks("row-names", "text", names, (d) => d.label)).attr("x", frame.x + frame.width + 6).attr("y", (d) => frame.cy(d.r)).attr("dy", "0.32em").text((d) => d.label);
+	}
+	/** One path per merge. `at` positions leaves along the tree's base; `base` is the tree's leaf edge, and branches grow away from it. */
+	limbs(root, at, base, horizontal, colors, ctx) {
+		const scale = 50 / (root.height || 1);
+		const limbs = [];
+		const point = (along, height) => horizontal ? [base - height * scale, along] : [along, base - height * scale];
+		const walk = (node) => {
+			if (node.leaf !== void 0) return at(node.leaf);
+			const a = walk(node.left), b = walk(node.right), mid = (a + b) / 2;
+			limbs.push({
+				id: node.id,
+				key: `${node.id}`,
+				color: colors.get(node.id) ?? ctx.theme.inkMuted,
+				d: [[node.left, a], [node.right, b]].map(([child, along]) => this.branch(point(mid, node.height), point(along, child.height), horizontal)).join("")
+			});
+			return mid;
+		};
+		walk(root);
+		return limbs;
+	}
+	branch(from, to, horizontal) {
+		if (this.options.branch === "slanted") return `M${from}L${to}`;
+		if (this.options.branch === "curved") return (horizontal ? linkHorizontal() : linkVertical())({
+			source: from,
+			target: to
+		}) ?? "";
+		return horizontal ? `M${from}V${to[1]}H${to[0]}` : `M${from}H${to[0]}V${to[1]}`;
+	}
+};
+export { ClusteredHeatmap, DendrogramBranch, DendrogramSides };

package/dist/charts/matrix/CohortMatrix.js

@@ -0,0 +1,139 @@
+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";
+// src/charts/matrix/CohortMatrix.ts
+var CohortMatrixAlign = /* @__PURE__ */ function(CohortMatrixAlign) {
+	CohortMatrixAlign["Age"] = "by-age";
+	CohortMatrixAlign["Calendar"] = "by-calendar";
+	return CohortMatrixAlign;
+}({});
+var CohortMatrixMeasure = /* @__PURE__ */ function(CohortMatrixMeasure) {
+	CohortMatrixMeasure["Retention"] = "retention";
+	CohortMatrixMeasure["Absolute"] = "absolute";
+	return CohortMatrixMeasure;
+}({});
+var MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep"
+];
+var SIZE_RAIL = 46;
+/** Retention triangle: each row is a cohort, each column is time since it started, so ageing and improvement separate. */
+var CohortMatrix = class extends MatrixChart {
+	static meta = {
+		id: "cohort-matrix",
+		name: "Cohort matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Tracks groups that started together over the periods since, for reading retention by age and by intake.",
+		tags: [
+			"retention",
+			"triangle",
+			"churn",
+			"vintage"
+		],
+		sample: (seed) => {
+			const { values } = SampleData.matrix(seed, 9, 9);
+			return {
+				rows: MONTHS,
+				columns: MONTHS.map((_, i) => `M${i}`),
+				values: MONTHS.map((_, r) => {
+					const start = 400 + Math.round(Math.abs(values[r][0]) * 500);
+					return MONTHS.map((_, age) => age + r >= MONTHS.length ? null : Math.round(start * (.38 + .62 * Math.exp(-age / 2.4)) * (1 - Math.abs(values[r][age]) * .04 * Math.min(age, 1))));
+				})
+			};
+		},
+		variants: {
+			align: ["by-age", "by-calendar"],
+			glyph: [
+				MatrixGlyph.Tile,
+				MatrixGlyph.Column,
+				MatrixGlyph.Circle
+			],
+			measure: ["retention", "absolute"],
+			sizes: [true, false],
+			average: [false, true]
+		},
+		valid: (v) => !(v.glyph === MatrixGlyph.Tile && v.measure === "absolute") && !(v.average && v.align === "by-calendar")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			align: "by-age",
+			measure: "retention",
+			glyph: MatrixGlyph.Tile,
+			sizes: true,
+			average: false
+		};
+	}
+	drawMatrix(ctx, source) {
+		const { align, measure, glyph, sizes, average } = this.options;
+		const firsts = source.values.map((row) => row.find((value) => value !== null) ?? 0);
+		const shares = source.values.map((row, r) => row.map((value) => value === null ? null : firsts[r] ? value / firsts[r] : 0));
+		const percent = measure === "retention";
+		const shown = percent ? shares : source.values;
+		const calendar = align === "by-calendar";
+		const lastAge = (row) => row.reduce((last, value, age) => value === null ? last : age, 0);
+		const span = calendar ? Math.max(...shown.map((row, r) => r + lastAge(row))) + 1 : source.columns.length;
+		const columns = calendar ? Array.from({ length: span }, (_, i) => source.rows[i] ?? `+${i - source.rows.length + 1}`) : source.columns;
+		const means = source.columns.map((_, c) => {
+			const list = shown.flatMap((row) => row[c] === null || row[c] === void 0 ? [] : [row[c]]);
+			return list.length ? list.reduce((a, b) => a + b, 0) / list.length : null;
+		});
+		const rows = average ? [...source.rows, "Mean"] : source.rows;
+		const grid = source.rows.map((_, r) => Array.from({ length: span }, (_, c) => calendar ? shown[r]?.[c - r] ?? null : shown[r][c] ?? null));
+		const model = new MatrixModel(rows, columns, average ? [...grid, means] : grid);
+		const frame = this.frame(ctx, model, {
+			left: sizes ? SIZE_RAIL : 0,
+			bottom: 22
+		});
+		const present = model.cells.filter((cell) => cell.value !== null);
+		const domain = model.domain, fill = this.heat(ctx, percent ? [0, 1] : domain), reach = model.reach;
+		const format = (value) => percent ? `${Math.round(value * 100)}%` : Scales.format(value, reach);
+		this.axisLabels(ctx, model, frame);
+		this.glyphs(ctx, "cells", present, frame, {
+			glyph,
+			size: (cell) => (cell.value ?? 0) / (percent ? 1 : reach),
+			fill: (cell) => fill(cell.value),
+			tip: (cell) => ({
+				title: `${cell.row} cohort · ${cell.column}`,
+				color: fill(cell.value),
+				rows: [[percent ? "Retained" : "Active", format(cell.value)]]
+			})
+		});
+		if (glyph === MatrixGlyph.Tile) this.cellText(ctx, "values", present, frame, (cell) => format(cell.value), (cell) => this.inkOn(ctx, fill(cell.value)), 10);
+		const biggest = Math.max(1, ...firsts), room = 38;
+		const bars = ctx.marks("cohort-sizes", "rect", sizes ? firsts.map((size, r) => ({
+			size,
+			r
+		})) : [], (d) => d.r).attr("fill", ctx.theme.axis).attr("rx", 2);
+		const thick = Math.min(10, frame.ch - 3);
+		ctx.set(bars, {
+			x: (d) => room - d.size / biggest * room,
+			y: (d) => frame.cy(d.r) - thick / 2,
+			width: (d) => d.size / biggest * room,
+			height: thick
+		}, {
+			x: room,
+			y: (d) => frame.cy(d.r) - thick / 2,
+			width: 0,
+			height: thick
+		});
+		ctx.hover(bars, (d) => ({
+			title: `${source.rows[d.r]} cohort`,
+			rows: [["Starting size", Scales.format(d.size, biggest)]]
+		}));
+		this.ramp(ctx, percent ? [0, 1] : domain, frame.x, frame.y + frame.height + 6, percent ? (value) => `${value * 100}%` : void 0);
+	}
+};
+export { CohortMatrix, CohortMatrixAlign, CohortMatrixMeasure };

package/dist/charts/matrix/ConfusionMatrix.js

@@ -0,0 +1,186 @@
+import { ChartFamily, ColorScale, 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, MatrixNormalize, MatrixOrder } from "./matrixEnums.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+import { fitText } from "./MatrixSurface.js";
+import { sum } from "d3";
+// src/charts/matrix/ConfusionMatrix.ts
+var ConfusionSummary = /* @__PURE__ */ function(ConfusionSummary) {
+	ConfusionSummary["None"] = "no-summary";
+	ConfusionSummary["Rates"] = "rates";
+	ConfusionSummary["Support"] = "support";
+	return ConfusionSummary;
+}({});
+var CLASSES = [
+	"Cat",
+	"Dog",
+	"Bird",
+	"Fish",
+	"Horse",
+	"Other"
+];
+/** Rows are actual classes and columns are predicted ones, so the diagonal is right and everything else is a mistake. */
+var ConfusionMatrix = class extends MatrixChart {
+	static meta = {
+		id: "confusion-matrix",
+		name: "Confusion matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Compares predicted with actual classes to show where a classifier succeeds and which classes it mixes up.",
+		tags: [
+			"classification",
+			"error matrix",
+			"recall",
+			"precision"
+		],
+		sample: (seed) => {
+			const { values } = SampleData.matrix(seed, 6, 6);
+			return {
+				rows: CLASSES,
+				columns: CLASSES,
+				values: values.map((row, r) => row.map((value, c) => Math.round(Math.abs(value) * 14) + (r === c ? 60 + r * 8 : 0)))
+			};
+		},
+		variants: {
+			glyph: [
+				MatrixGlyph.Tile,
+				MatrixGlyph.Circle,
+				MatrixGlyph.Bar
+			],
+			summary: [
+				"no-summary",
+				"rates",
+				"support"
+			],
+			errorsOnly: [false, true],
+			order: [MatrixOrder.Input, MatrixOrder.Cluster],
+			normalize: [
+				MatrixNormalize.None,
+				MatrixNormalize.Row,
+				MatrixNormalize.Column,
+				MatrixNormalize.Total
+			]
+		},
+		valid: (v) => !(v.normalize !== MatrixNormalize.None && (v.glyph === MatrixGlyph.Tile || v.normalize === MatrixNormalize.Total))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			glyph: MatrixGlyph.Tile,
+			normalize: MatrixNormalize.None,
+			summary: "no-summary",
+			errorsOnly: false,
+			order: MatrixOrder.Input,
+			rowTitle: "Actual",
+			columnTitle: "Predicted",
+			colorScale: ColorScale.Sequential
+		};
+	}
+	arranged(source) {
+		if (this.options.order !== MatrixOrder.Cluster || source.rows.length !== source.columns.length) return source;
+		const blended = source.rowVectors.map((row, r) => row.map((value, c) => r === c ? 0 : value + source.rowVectors[c][r]));
+		const order = MatrixSeriation.clustered(blended);
+		return source.reorder(order, order);
+	}
+	drawMatrix(ctx, source) {
+		const { glyph, normalize, summary, errorsOnly, rowTitle, columnTitle } = this.options;
+		const counts = this.arranged(source), shown = counts.normalize(normalize);
+		const rails = summary === "no-summary" ? 0 : 52;
+		const frame = this.frame(ctx, shown, {
+			left: 14,
+			top: 14,
+			right: rails,
+			bottom: rails + 22
+		});
+		const onDiagonal = (cell) => cell.row === cell.column;
+		const scored = shown.cells.filter((cell) => !(errorsOnly && onDiagonal(cell)));
+		const values = scored.map((cell) => Math.abs(cell.value ?? 0));
+		const top = Math.max(1e-9, ...values), domain = [0, top];
+		const fill = this.heat(ctx, domain);
+		const isShare = normalize !== MatrixNormalize.None;
+		const format = (value) => value === null ? "–" : isShare ? `${(value * 100).toFixed(0)}%` : Scales.format(value, top);
+		const raw = new Map(counts.cells.map((cell) => [cell.key, cell.value]));
+		this.axisLabels(ctx, shown, frame);
+		ctx.text(ctx.marks("axis-titles", "text", [{
+			text: columnTitle,
+			transform: `translate(${frame.x + frame.width / 2},8)`
+		}, {
+			text: rowTitle,
+			transform: `translate(8,${frame.y + frame.height / 2}) rotate(-90)`
+		}], (d) => d.text), 11, "muted").attr("transform", (d) => d.transform).attr("text-anchor", "middle").text((d) => d.text);
+		this.glyphs(ctx, "cells", scored, frame, {
+			glyph,
+			size: (cell) => Math.abs(cell.value ?? 0) / top,
+			fill: (cell) => fill(Math.abs(cell.value ?? 0)),
+			tip: (cell) => ({
+				title: `Actual ${cell.row}, predicted ${cell.column}`,
+				color: fill(Math.abs(cell.value ?? 0)),
+				rows: [["Count", raw.get(cell.key) ?? 0], ...isShare ? [["Share", format(cell.value)]] : []]
+			})
+		});
+		this.cellText(ctx, "counts", glyph === MatrixGlyph.Tile ? scored : [], frame, (cell) => format(cell.value), (cell) => this.inkOn(ctx, fill(Math.abs(cell.value ?? 0))), 11);
+		this.summaries(ctx, counts, frame);
+		this.ramp(ctx, domain, frame.x, frame.y + frame.height + rails + 6, (value) => format(value));
+	}
+	/** Recall and precision, or actual and predicted totals, as bars in the two outer rails. */
+	summaries(ctx, counts, frame) {
+		const { summary } = this.options;
+		const rates = summary === "rates";
+		const rows = counts.rowTotals, columns = counts.columnTotals;
+		const correct = (index) => {
+			return counts.values[index]?.[counts.columns.indexOf(counts.rows[index])] ?? 0;
+		};
+		const size = sum(rows) || 1;
+		const rowValue = (r) => rates ? correct(r) / (rows[r] || 1) : rows[r] / Math.max(1, ...rows);
+		const columnValue = (c) => {
+			if (!rates) return columns[c] / Math.max(1, ...columns);
+			const r = counts.rows.indexOf(counts.columns[c]);
+			return r < 0 ? 0 : correct(r) / (columns[c] || 1);
+		};
+		const items = summary === "no-summary" ? [] : [...rows.map((_, r) => ({
+			key: `r${r}`,
+			axis: "row",
+			index: r,
+			t: rowValue(r),
+			text: rates ? `${(rowValue(r) * 100).toFixed(0)}%` : `${rows[r]}`,
+			label: `${rates ? "Recall" : "Actual total"}: ${counts.rows[r]}`
+		})), ...columns.map((_, c) => ({
+			key: `c${c}`,
+			axis: "column",
+			index: c,
+			t: columnValue(c),
+			text: rates ? `${(columnValue(c) * 100).toFixed(0)}%` : `${columns[c]}`,
+			label: `${rates ? "Precision" : "Predicted total"}: ${counts.columns[c]}`
+		}))];
+		const barX = frame.x + frame.width + 6, barY = frame.y + frame.height + 6;
+		const thickY = Math.min(12, frame.ch * .5), thickX = Math.min(12, frame.cw * .5), room = 44;
+		const bars = ctx.marks("summary", "rect", items, (d) => d.key).attr("fill", ctx.palette.sequential(.62)).attr("rx", 2);
+		ctx.set(bars, {
+			x: (d) => d.axis === "row" ? barX : frame.cx(d.index) - thickX / 2,
+			y: (d) => d.axis === "row" ? frame.cy(d.index) - thickY / 2 : barY,
+			width: (d) => d.axis === "row" ? d.t * room : thickX,
+			height: (d) => d.axis === "row" ? thickY : d.t * room
+		});
+		ctx.hover(bars, (d) => ({
+			title: d.label,
+			rows: [["Value", d.text]]
+		}));
+		const titles = items.length ? [{
+			text: rates ? "Recall" : "Actual",
+			x: barX,
+			y: frame.y - 6,
+			anchor: "start"
+		}, {
+			text: rates ? "Precision" : "Predicted",
+			x: frame.x - 6,
+			y: barY + 10,
+			anchor: "end"
+		}] : [];
+		ctx.text(ctx.marks("summary-titles", "text", titles, (d) => d.text), 10.5, "muted").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("text-anchor", (d) => d.anchor).text((d) => d.text);
+		if (rates) ctx.text(ctx.marks("accuracy", "text", items.length ? [sum(rows.map((_, r) => correct(r))) / size] : []), 10.5, "muted").attr("x", barX).attr("y", barY + 11).text((value) => fitText(`Acc ${(value * 100).toFixed(1)}%`, 58, 5.8));
+	}
+};
+export { ConfusionMatrix, ConfusionSummary };