@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/matrix/ContingencyChart.js

@@ -0,0 +1,201 @@
+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 { MatrixGlyphs } from "./MatrixGlyphs.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+import { sum } from "d3";
+// src/charts/matrix/ContingencyChart.ts
+var ContingencyForm = /* @__PURE__ */ function(ContingencyForm) {
+	ContingencyForm["Fluctuation"] = "fluctuation";
+	ContingencyForm["Mosaic"] = "mosaic";
+	ContingencyForm["Spine"] = "spine";
+	ContingencyForm["Sieve"] = "sieve";
+	ContingencyForm["Association"] = "association";
+	return ContingencyForm;
+}({});
+var ContingencyOrder = /* @__PURE__ */ function(ContingencyOrder) {
+	ContingencyOrder["Input"] = "input-order";
+	ContingencyOrder["Correspondence"] = "correspondence";
+	return ContingencyOrder;
+}({});
+var MARGIN = 26;
+var RESIDUAL_REACH = 4;
+/** A cross-tabulation of two categorical variables, shaded by how far each count departs from independence. */
+var ContingencyChart = class extends MatrixChart {
+	static meta = {
+		id: "contingency-chart",
+		name: "Contingency chart",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Shows counts for two categorical variables and highlights where they deviate from independence, in mosaic-family forms.",
+		tags: [
+			"cross tab",
+			"mosaic plot",
+			"sieve diagram",
+			"association plot",
+			"fluctuation",
+			"chi-squared"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 4),
+		variants: {
+			form: [
+				"fluctuation",
+				"mosaic",
+				"spine",
+				"sieve",
+				"association"
+			],
+			order: ["input-order", "correspondence"],
+			transpose: [false, true],
+			margins: [false, true]
+		},
+		valid: (v) => !(v.margins && (v.form === "mosaic" || v.form === "sieve"))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "mosaic",
+			order: "input-order",
+			transpose: false,
+			margins: false,
+			colorScale: ColorScale.Diverging
+		};
+	}
+	arranged(source) {
+		const { order, transpose } = this.options;
+		const counted = transpose ? source.transpose() : source;
+		return order === "correspondence" ? counted.reorder(MatrixSeriation.spectral(counted.rowVectors), MatrixSeriation.spectral(counted.columnVectors)) : counted;
+	}
+	drawMatrix(ctx, source) {
+		const model = this.arranged(source);
+		const rowTotals = model.rowVectors.map((row) => sum(row, Math.abs)), columnTotals = model.columnVectors.map((column) => sum(column, Math.abs));
+		const total = sum(rowTotals) || 1;
+		const tallies = model.cells.map((cell) => {
+			const observed = Math.abs(cell.value ?? 0), expected = rowTotals[cell.r] * columnTotals[cell.c] / total;
+			return {
+				key: cell.key,
+				r: cell.r,
+				c: cell.c,
+				row: cell.row,
+				column: cell.column,
+				observed,
+				expected,
+				residual: expected ? (observed - expected) / Math.sqrt(expected) : 0
+			};
+		});
+		const chi = sum(tallies, (tally) => tally.residual ** 2);
+		const { form, margins } = this.options;
+		const frame = this.frame(ctx, model, {
+			top: margins ? MARGIN : 0,
+			right: margins ? MARGIN : 0,
+			bottom: 22,
+			columnLabels: margins ? "bottom" : "top",
+			rowLabels: true
+		});
+		const fill = (tally) => ctx.palette.diverging(Math.max(-1, Math.min(1, tally.residual / RESIDUAL_REACH)));
+		const tip = (tally) => ({
+			title: `${tally.row} × ${tally.column}`,
+			color: fill(tally),
+			rows: [
+				["Observed", Scales.format(tally.observed, total)],
+				["Expected", Scales.format(tally.expected, total)],
+				["Residual", tally.residual.toFixed(2)]
+			]
+		});
+		const shape = this.shapes(tallies, rowTotals, columnTotals, total, frame, model);
+		const marks = ctx.marks("cells", "path", tallies, (tally) => tally.key).attr("d", shape).attr("fill", form === "sieve" ? "none" : fill).attr("stroke", form === "sieve" ? ctx.theme.inkSecondary : null);
+		ctx.set(marks, { opacity: 1 }, { opacity: 0 }, 6);
+		ctx.hover(marks, tip);
+		const sieveFills = ctx.marks("sieve-cells", "path", form === "sieve" ? tallies : [], (tally) => tally.key).attr("d", (tally) => this.sieveBox(tally, rowTotals, columnTotals, total, frame)).attr("fill", fill).attr("fill-opacity", .55).lower();
+		ctx.group("sieve-cells").lower();
+		ctx.hover(sieveFills, tip);
+		if (form === "association") ctx.marks("baselines", "line", model.rows.map((_, r) => r), (r) => r).attr("stroke", ctx.theme.axis).attr("x1", frame.x).attr("x2", frame.x + frame.width).attr("y1", frame.cy).attr("y2", frame.cy);
+		this.axisLabels(ctx, model, frame);
+		if (margins) this.marginBars(ctx, model, rowTotals, columnTotals, frame);
+		const legendY = frame.y + frame.height + (margins ? 18 : 6);
+		this.ramp(ctx, [-4, RESIDUAL_REACH], frame.x, legendY, (value) => value > 0 ? `+${value}` : `Residual ${value}`);
+		ctx.text(ctx.marks("statistic", "text", [chi]), 10.5, "muted").attr("text-anchor", "end").attr("x", ctx.plot.width).attr("y", legendY + 11).text((value) => `χ² ${value.toFixed(1)}`);
+	}
+	sieveBox(tally, rows, columns, total, frame) {
+		const x = frame.x + sum(columns.slice(0, tally.c)) / total * frame.width, y = frame.y + sum(rows.slice(0, tally.r)) / total * frame.height;
+		const w = columns[tally.c] / total * frame.width, h = rows[tally.r] / total * frame.height;
+		return MatrixGlyphs.tile(Math.max(1, w - 2), Math.max(1, h - 2), 2, x + 1, y + 1);
+	}
+	shapes(tallies, rows, columns, total, frame, model) {
+		const { form } = this.options;
+		const gap = 2;
+		const box = (x, y, w, h) => MatrixGlyphs.tile(Math.max(.5, w - gap), Math.max(.5, h - gap), 2, x + gap / 2, y + gap / 2);
+		if (form === "fluctuation") {
+			const top = Math.max(1e-9, ...tallies.map((tally) => tally.observed));
+			const reach = (Math.min(frame.cw, frame.ch) - gap) / 2;
+			return (tally) => {
+				const half = reach * Math.sqrt(tally.observed / top);
+				return MatrixGlyphs.tile(2 * half, 2 * half, Math.min(2, half), frame.cx(tally.c) - half, frame.cy(tally.r) - half);
+			};
+		}
+		if (form === "mosaic" || form === "spine") {
+			const fixed = form === "spine";
+			return (tally) => {
+				const width = fixed ? frame.width / model.columns.length : columns[tally.c] / total * frame.width;
+				const x = frame.x + (fixed ? tally.c * width : sum(columns.slice(0, tally.c)) / total * frame.width);
+				const before = sum(tallies.filter((other) => other.c === tally.c && other.r < tally.r), (other) => other.observed);
+				const whole = columns[tally.c] || 1;
+				return box(x, frame.y + before / whole * frame.height, width, tally.observed / whole * frame.height);
+			};
+		}
+		if (form === "sieve") {
+			const density = 22 / Math.max(1e-9, ...tallies.map((tally) => tally.observed));
+			return (tally) => {
+				const x = frame.x + sum(columns.slice(0, tally.c)) / total * frame.width, y = frame.y + sum(rows.slice(0, tally.r)) / total * frame.height;
+				const w = columns[tally.c] / total * frame.width, h = rows[tally.r] / total * frame.height;
+				const lines = Math.max(1, Math.round(Math.sqrt(tally.observed * density)));
+				const across = Array.from({ length: lines - 1 }, (_, i) => `M${(x + 1).toFixed(1)},${(y + h * (i + 1) / lines).toFixed(1)}h${(w - 2).toFixed(1)}`);
+				const down = Array.from({ length: lines - 1 }, (_, i) => `M${(x + w * (i + 1) / lines).toFixed(1)},${(y + 1).toFixed(1)}v${(h - 2).toFixed(1)}`);
+				return [...across, ...down].join("") || `M${x.toFixed(1)},${y.toFixed(1)}`;
+			};
+		}
+		const widest = Math.max(1e-9, ...tallies.map((tally) => Math.sqrt(tally.expected)));
+		const tallest = Math.max(1e-9, ...tallies.map((tally) => Math.abs(tally.residual)));
+		return (tally) => {
+			const w = Math.max(1, Math.sqrt(tally.expected) / widest * (frame.cw - 6)), h = tally.residual / tallest * (frame.ch / 2 - 2);
+			return MatrixGlyphs.tile(w, Math.max(.5, Math.abs(h)), 1, frame.cx(tally.c) - w / 2, frame.cy(tally.r) - Math.max(0, h));
+		};
+	}
+	marginBars(ctx, model, rows, columns, frame) {
+		const top = Math.max(1e-9, ...rows, ...columns), room = 18, fill = ctx.theme.axis;
+		const items = [...rows.map((total, r) => ({
+			key: `r${r}`,
+			name: model.rows[r],
+			total,
+			x: frame.x + frame.width + 4,
+			y: frame.cy(r) - 4,
+			width: total / Math.max(...rows) * room,
+			height: 8
+		})), ...columns.map((total, c) => {
+			const h = total / Math.max(...columns) * room;
+			return {
+				key: `c${c}`,
+				name: model.columns[c],
+				total,
+				x: frame.cx(c) - 4,
+				y: frame.y - 4 - h,
+				width: 8,
+				height: h
+			};
+		})];
+		const bars = ctx.marks("margin-bars", "rect", items, (d) => d.key).attr("fill", fill).attr("rx", 2);
+		ctx.set(bars, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.width,
+			height: (d) => d.height
+		});
+		ctx.hover(bars, (d) => ({
+			title: d.name,
+			rows: [["Total", Scales.format(d.total, top)]]
+		}));
+	}
+};
+export { ContingencyChart, ContingencyForm, ContingencyOrder };

package/dist/charts/matrix/CorrelationMatrix.js

@@ -0,0 +1,167 @@
+import { ChartFamily, ColorScale, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixChart } from "./MatrixChart.js";
+import { MatrixDistance, MatrixGlyph } from "./matrixEnums.js";
+import { MatrixModel } from "./MatrixModel.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+import { ascending, range } from "d3";
+// src/charts/matrix/CorrelationMatrix.ts
+var CorrelationMethod = /* @__PURE__ */ function(CorrelationMethod) {
+	CorrelationMethod["Pearson"] = "pearson";
+	CorrelationMethod["Spearman"] = "spearman";
+	return CorrelationMethod;
+}({});
+var CorrelationOrder = /* @__PURE__ */ function(CorrelationOrder) {
+	CorrelationOrder["Input"] = "input-order";
+	CorrelationOrder["Cluster"] = "clustered";
+	CorrelationOrder["Angular"] = "angular";
+	return CorrelationOrder;
+}({});
+var CorrelationTriangle = /* @__PURE__ */ function(CorrelationTriangle) {
+	CorrelationTriangle["Full"] = "full";
+	CorrelationTriangle["Lower"] = "lower";
+	CorrelationTriangle["Upper"] = "upper";
+	CorrelationTriangle["Mixed"] = "mixed";
+	return CorrelationTriangle;
+}({});
+var ranks = (values) => {
+	const order = range(values.length).sort((a, b) => ascending(values[a], values[b]));
+	const result = new Array(values.length);
+	for (let i = 0; i < order.length;) {
+		let j = i;
+		while (j + 1 < order.length && values[order[j + 1]] === values[order[i]]) j++;
+		for (let k = i; k <= j; k++) result[order[k]] = (i + j) / 2;
+		i = j + 1;
+	}
+	return result;
+};
+/** Every pair of numeric variables, by correlation. Accepts observations as `MatrixData` columns or as wide rows. */
+var CorrelationMatrix = class extends MatrixChart {
+	static meta = {
+		id: "correlation-matrix",
+		name: "Correlation matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Shows how strongly each pair of variables moves together, with sign and strength, as a corrgram.",
+		tags: [
+			"corrgram",
+			"corrplot",
+			"pearson",
+			"spearman"
+		],
+		sample: (seed) => {
+			const { rows, columns, values } = SampleData.matrix(seed, 40, 9);
+			const order = [
+				4,
+				0,
+				7,
+				2,
+				8,
+				1,
+				5,
+				3,
+				6
+			];
+			return {
+				rows,
+				columns: [
+					"Price",
+					"Volume",
+					"Margin",
+					"Reach",
+					"Churn",
+					"Tenure",
+					"Spend",
+					"Visits",
+					"Score"
+				],
+				values: values.map((row) => order.map((c) => row[c]))
+			};
+		},
+		variants: {
+			glyph: [
+				MatrixGlyph.Tile,
+				MatrixGlyph.Circle,
+				MatrixGlyph.Square,
+				MatrixGlyph.Ellipse,
+				MatrixGlyph.Pie
+			],
+			triangle: [
+				"full",
+				"lower",
+				"upper",
+				"mixed"
+			],
+			order: [
+				"input-order",
+				"clustered",
+				"angular"
+			],
+			method: ["pearson", "spearman"]
+		},
+		valid: (v) => !(v.glyph === MatrixGlyph.Tile && v.method === "spearman")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			method: "pearson",
+			glyph: MatrixGlyph.Tile,
+			triangle: "full",
+			order: "input-order",
+			precomputed: false,
+			colorScale: ColorScale.Diverging
+		};
+	}
+	/** Correlations, computed pairwise on complete observations. */
+	get model() {
+		const { data, method, precomputed } = this.options;
+		const source = this.observations(data);
+		if (precomputed) return source;
+		const pair = (a, b) => {
+			const kept = source.values.filter((row) => row[a] !== null && row[b] !== null);
+			const left = kept.map((row) => row[a]), right = kept.map((row) => row[b]);
+			return left.length < 2 ? 0 : method === "spearman" ? MatrixSeriation.correlation(ranks(left), ranks(right)) : MatrixSeriation.correlation(left, right);
+		};
+		const names = source.columns;
+		return new MatrixModel(names, names, names.map((_, a) => names.map((_, b) => a === b ? 1 : pair(a, b))));
+	}
+	observations(data) {
+		if (!Array.isArray(data)) return MatrixModel.from(data);
+		const columns = Object.keys(data[0] ?? {}).filter((key) => data.some((row) => typeof row[key] === "number"));
+		return MatrixModel.from({
+			rows: data.map((_, i) => String(i)),
+			columns,
+			values: data.map((row) => columns.map((key) => row[key]))
+		});
+	}
+	drawMatrix(ctx, source) {
+		const { glyph, triangle, order } = this.options;
+		const n = source.rows.length;
+		const sequence = order === "clustered" ? MatrixSeriation.clustered(source.rowVectors, MatrixDistance.Correlation) : order === "angular" ? MatrixSeriation.spectral(source.rowVectors) : range(n);
+		const model = source.reorder(sequence, sequence);
+		const frame = this.frame(ctx, model, {
+			square: true,
+			bottom: 22
+		});
+		const fill = this.heat(ctx, [-1, 1]);
+		const inShape = (r, c) => triangle === "lower" ? r > c : triangle === "upper" ? r < c : triangle === "mixed" ? r <= c : true;
+		const shown = model.cells.filter((cell) => inShape(cell.r, cell.c));
+		this.axisLabels(ctx, model, frame);
+		ctx.marks("tray", "rect", glyph === MatrixGlyph.Tile ? [] : shown, (cell) => cell.key).attr("fill", ctx.theme.grid).attr("opacity", .45).attr("rx", 2).attr("x", (cell) => frame.cx(cell.c) - frame.cw / 2 + 1).attr("y", (cell) => frame.cy(cell.r) - frame.ch / 2 + 1).attr("width", frame.cw - 2).attr("height", frame.ch - 2).attr("pointer-events", "none");
+		this.glyphs(ctx, "cells", shown, frame, {
+			glyph,
+			size: (cell) => Math.abs(cell.value ?? 0),
+			fill: (cell) => fill(cell.value),
+			tip: (cell) => ({
+				title: `${cell.row} × ${cell.column}`,
+				color: fill(cell.value),
+				rows: [["Correlation", (cell.value ?? 0).toFixed(2)]]
+			})
+		});
+		const lower = triangle === "mixed" ? model.cells.filter((cell) => cell.r > cell.c) : [];
+		this.cellText(ctx, "coefficients", lower, frame, (cell) => (cell.value ?? 0).toFixed(2), () => ctx.theme.inkSecondary);
+		this.ramp(ctx, [-1, 1], frame.x, frame.y + frame.height + 6, (value) => value.toFixed(0));
+	}
+};
+export { CorrelationMatrix, CorrelationMethod, CorrelationOrder, CorrelationTriangle };

package/dist/charts/matrix/DiagonalMatrix.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 { MatrixGlyphs } from "./MatrixGlyphs.js";
+import { MatrixGlyph } from "./matrixEnums.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+// src/charts/matrix/DiagonalMatrix.ts
+var DiagonalForm = /* @__PURE__ */ function(DiagonalForm) {
+	DiagonalForm["Triangle"] = "contact-triangle";
+	DiagonalForm["Diamond"] = "diamond";
+	DiagonalForm["Upright"] = "upright-band";
+	return DiagonalForm;
+}({});
+var DiagonalTrack = /* @__PURE__ */ function(DiagonalTrack) {
+	DiagonalTrack["None"] = "no-track";
+	DiagonalTrack["Bars"] = "mean-bars";
+	DiagonalTrack["Labels"] = "labels-only";
+	return DiagonalTrack;
+}({});
+var DiagonalOrder = /* @__PURE__ */ function(DiagonalOrder) {
+	DiagonalOrder["Input"] = "input-order";
+	DiagonalOrder["Cluster"] = "clustered";
+	return DiagonalOrder;
+}({});
+var TRACK = 26;
+var LABELS = 16;
+/** Turns a symmetric matrix so its diagonal runs flat along position: the shape of contact maps and linkage plots. */
+var DiagonalMatrix = class extends MatrixChart {
+	static meta = {
+		id: "diagonal-matrix",
+		name: "Diagonal matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Rotates a symmetric matrix so the diagonal becomes a position axis, for contact maps, linkage and band structure.",
+		tags: [
+			"contact map",
+			"hi-c",
+			"linkage disequilibrium",
+			"band matrix"
+		],
+		sample: (seed) => {
+			const { rows, values } = SampleData.matrix(seed, 16, 16);
+			return {
+				rows,
+				columns: rows,
+				values: rows.map((_, r) => rows.map((_, c) => +(((values[r][c] + values[c][r]) / 2 + 1) * Math.exp(-Math.abs(r - c) / 6)).toFixed(3)))
+			};
+		},
+		variants: {
+			form: [
+				"contact-triangle",
+				"diamond",
+				"upright-band"
+			],
+			bandwidth: [
+				0,
+				6,
+				3
+			],
+			track: [
+				"no-track",
+				"mean-bars",
+				"labels-only"
+			],
+			glyph: [MatrixGlyph.Tile, MatrixGlyph.Circle]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "contact-triangle",
+			bandwidth: 0,
+			track: "no-track",
+			glyph: MatrixGlyph.Tile,
+			order: "input-order"
+		};
+	}
+	drawMatrix(ctx, source) {
+		const { form, bandwidth, track, glyph, order } = this.options;
+		const sequence = order === "clustered" ? MatrixSeriation.clustered(source.rowVectors) : source.rows.map((_, i) => i);
+		const model = source.reorder(sequence, source.columns.length === source.rows.length ? sequence : source.columns.map((_, i) => i));
+		const n = Math.min(model.rows.length, model.columns.length);
+		const below = 22 + (track === "mean-bars" ? TRACK : 0) + (track === "no-track" ? 0 : LABELS);
+		const inBand = (cell) => (!bandwidth || Math.abs(cell.r - cell.c) <= bandwidth) && cell.r < n && cell.c < n;
+		const upper = form !== "diamond" && form !== "upright-band";
+		const cells = model.cells.filter((cell) => inBand(cell) && (!upper || cell.r <= cell.c));
+		const fill = this.heat(ctx, model.domain), reach = model.reach;
+		const { width, height } = ctx.plot;
+		const available = height - below;
+		const reachDiagonals = bandwidth ? Math.min(bandwidth, n - 1) : n - 1;
+		const unit = form === "upright-band" ? Math.min(width / n, available / n) / 2 : form === "diamond" ? Math.min(width / (2 * n), available / (2 * reachDiagonals + 2)) : Math.min(width / (2 * n), available / (reachDiagonals + 1));
+		const mid = (reachDiagonals + 1) * unit;
+		const originX = (width - 2 * n * unit) / 2;
+		const position = (cell) => {
+			if (form === "upright-band") return [originX + (2 * cell.c + 1) * unit, (2 * cell.r + 1) * unit];
+			return [originX + (cell.r + cell.c + 1) * unit, mid - (cell.c - cell.r) * unit - (form === "contact-triangle" ? unit : 0)];
+		};
+		const upright = form === "upright-band";
+		const tile = upright ? MatrixGlyphs.tile(2 * unit - 1.5, 2 * unit - 1.5) : MatrixGlyphs.polygon([
+			[0, 1 - unit],
+			[unit - 1, 0],
+			[0, unit - 1],
+			[1 - unit, 0]
+		]);
+		const dot = upright ? 2 * unit - 1 : Math.SQRT2 * unit - 1;
+		const path = (cell) => glyph === MatrixGlyph.Tile ? tile : MatrixGlyphs.path(MatrixGlyph.Circle, dot, dot, Math.abs(cell.value ?? 0) / reach);
+		const place = (cell) => `translate(${position(cell).map((value) => value.toFixed(2)).join(",")})`;
+		const marks = ctx.marks("cells", "path", cells, (cell) => cell.key).attr("d", path).attr("fill", (cell) => fill(cell.value));
+		ctx.set(marks, { transform: place }, { transform: (cell) => `${place(cell)} scale(0)` }, Math.min(1.2, 500 / cells.length));
+		ctx.hover(marks, (cell) => ({
+			title: `${cell.row} × ${cell.column}`,
+			color: fill(cell.value),
+			rows: [["Value", cell.value === null ? "no data" : Scales.format(cell.value, reach)]]
+		}));
+		const base = upright ? 2 * n * unit : form === "diamond" ? 2 * mid : mid;
+		const along = (i) => originX + (2 * i + 1) * unit;
+		const totals = model.rows.slice(0, n).map((_, i) => cells.filter((cell) => cell.r === i || cell.c === i).reduce((sum, cell) => sum + Math.abs(cell.value ?? 0), 0));
+		const top = Math.max(1e-9, ...totals);
+		const bars = ctx.marks("track", "rect", track === "mean-bars" ? totals.map((total, index) => ({
+			total,
+			index
+		})) : [], (d) => d.index).attr("fill", ctx.palette.sequential(.62)).attr("rx", 2);
+		const thick = Math.max(1, 2 * unit - 3);
+		ctx.set(bars, {
+			x: (d) => along(d.index) - thick / 2,
+			y: (d) => base + 6,
+			width: thick,
+			height: (d) => d.total / top * 18
+		}, {
+			x: (d) => along(d.index) - thick / 2,
+			y: base + 6,
+			width: thick,
+			height: 0
+		});
+		ctx.hover(bars, (d) => ({
+			title: model.rows[d.index],
+			rows: [["Sum of cells", Scales.format(d.total, top)]]
+		}));
+		const step = Math.ceil(26 / (2 * unit));
+		const labels = track === "no-track" ? [] : model.rows.slice(0, n).map((label, i) => ({
+			label,
+			i
+		})).filter(({ i }) => i % step === 0);
+		const labelY = base + (track === "mean-bars" ? TRACK : 0) + 13;
+		ctx.text(ctx.marks("axis-labels", "text", labels, (d) => d.i), 10.5).attr("text-anchor", "middle").attr("x", (d) => along(d.i)).attr("y", labelY).text((d) => d.label);
+		this.ramp(ctx, model.domain, 0, ctx.plot.height - 22 + 6);
+	}
+};
+export { DiagonalForm, DiagonalMatrix, DiagonalOrder, DiagonalTrack };