@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/matrix/TilegramChart.js

@@ -0,0 +1,203 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { WorldSample } from "../../data/WorldSample.js";
+import { MatrixGlyphs } from "./MatrixGlyphs.js";
+import { MatrixGlyph } from "./matrixEnums.js";
+import { MatrixSurface } from "./MatrixSurface.js";
+import { ascending, extent, geoCentroid, scaleLinear } from "d3";
+// src/charts/matrix/TilegramChart.ts
+var TilegramShape = /* @__PURE__ */ function(TilegramShape) {
+	TilegramShape["Square"] = "square-tiles";
+	TilegramShape["Hexagon"] = "hexagon-tiles";
+	TilegramShape["Circle"] = "circle-tiles";
+	return TilegramShape;
+}({});
+var TilegramEncoding = /* @__PURE__ */ function(TilegramEncoding) {
+	TilegramEncoding["Color"] = "color-only";
+	TilegramEncoding["Area"] = "area-and-color";
+	return TilegramEncoding;
+}({});
+var TilegramPlacement = /* @__PURE__ */ function(TilegramPlacement) {
+	TilegramPlacement["Nearest"] = "nearest-slot";
+	TilegramPlacement["Banded"] = "latitude-bands";
+	TilegramPlacement["Rank"] = "equal-density";
+	return TilegramPlacement;
+}({});
+var TilegramDensity = /* @__PURE__ */ function(TilegramDensity) {
+	TilegramDensity["Tight"] = "tight";
+	TilegramDensity["Loose"] = "loose";
+	return TilegramDensity;
+}({});
+var KEY = 22;
+/** A map with every region at equal size, so small regions count for as much as large ones. */
+var TilegramChart = class extends MatrixSurface {
+	static meta = {
+		id: "tilegram",
+		name: "Tilegram",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws regions as equal tiles on a grid that keeps their rough geography, so land area does not distort the reading.",
+		tags: [
+			"tile grid map",
+			"hex map",
+			"cartogram"
+		],
+		sample: (seed) => WorldSample.countries(seed).features.map((feature) => {
+			const [lon, lat] = geoCentroid(feature);
+			const name = String(feature.properties?.name);
+			return {
+				name,
+				label: name.replace(/[^A-Za-z]/g, "").slice(0, 3),
+				lon: +lon.toFixed(2),
+				lat: +lat.toFixed(2),
+				value: feature.properties?.value
+			};
+		}),
+		variants: {
+			shape: [
+				"square-tiles",
+				"hexagon-tiles",
+				"circle-tiles"
+			],
+			placement: [
+				"nearest-slot",
+				"equal-density",
+				"latitude-bands"
+			],
+			density: ["tight", "loose"],
+			encoding: ["color-only", "area-and-color"],
+			labels: [true, false]
+		},
+		valid: (v) => !(v.labels && (v.encoding === "area-and-color" || v.density === "loose" || v.shape === "circle-tiles"))
+	};
+	defaults() {
+		return {
+			name: "name",
+			label: "label",
+			value: "value",
+			lon: "lon",
+			lat: "lat",
+			tileColumn: "column",
+			tileRow: "row",
+			shape: "square-tiles",
+			encoding: "color-only",
+			placement: "nearest-slot",
+			density: "tight",
+			labels: true
+		};
+	}
+	get blank() {
+		return !this.options.data?.length;
+	}
+	tiles(aspect) {
+		const { data, name, label, value, lon, lat, tileColumn, tileRow, placement, density } = this.options;
+		const base = data.map((row) => {
+			const title = String(row[name] ?? "");
+			const amount = row[value] === null || row[value] === void 0 ? null : +row[value];
+			return {
+				name: title,
+				text: String(row[label] ?? title).slice(0, 3),
+				value: Number.isFinite(amount) ? amount : null,
+				lon: +(row[lon] ?? 0),
+				lat: +(row[lat] ?? 0),
+				column: row[tileColumn],
+				row: row[tileRow]
+			};
+		});
+		if (base.every((tile) => typeof tile.column === "number" && typeof tile.row === "number")) return base.map((tile) => ({
+			...tile,
+			column: tile.column,
+			row: tile.row
+		}));
+		const slack = density === "tight" ? 1.5 : 2.4;
+		const columns = Math.ceil(Math.sqrt(base.length * slack * aspect)), rows = Math.ceil(columns / aspect);
+		if (placement === "latitude-bands") return this.banded(base, columns);
+		const rank = placement === "equal-density";
+		const axis = (values, size) => {
+			const sorted = [...values].sort(ascending), [low = 0, high = 1] = extent(values), scale = scaleLinear([low, high || 1], [0, size - 1]);
+			return (value) => rank ? sorted.indexOf(value) / Math.max(1, sorted.length - 1) * (size - 1) : scale(value);
+		};
+		const toX = axis(base.map((tile) => tile.lon), columns), toY = axis(base.map((tile) => -tile.lat), rows);
+		const mid = {
+			x: (columns - 1) / 2,
+			y: (rows - 1) / 2
+		};
+		const wanted = base.map((tile) => ({
+			...tile,
+			x: toX(tile.lon),
+			y: toY(-tile.lat)
+		}));
+		const taken = /* @__PURE__ */ new Set();
+		return [...wanted].sort((a, b) => Math.hypot(b.x - mid.x, b.y - mid.y) - Math.hypot(a.x - mid.x, a.y - mid.y) || ascending(a.name, b.name)).map((tile) => {
+			let best = 0, score = Infinity;
+			for (let row = 0; row < rows; row++) for (let column = 0; column < columns; column++) {
+				const distance = (column - tile.x) ** 2 + (row - tile.y) ** 2;
+				if (distance < score && !taken.has(row * columns + column)) {
+					score = distance;
+					best = row * columns + column;
+				}
+			}
+			taken.add(best);
+			return {
+				...tile,
+				column: best % columns,
+				row: Math.floor(best / columns)
+			};
+		});
+	}
+	/** Slices by latitude into equal rows, then lays each row out by longitude, centred. */
+	banded(base, columns) {
+		const perRow = Math.max(1, columns - 2);
+		const byLatitude = [...base].sort((a, b) => b.lat - a.lat || ascending(a.name, b.name));
+		return byLatitude.flatMap((_, i) => i % perRow === 0 ? [byLatitude.slice(i, i + perRow)] : []).flatMap((band, row) => {
+			const offset = Math.floor((columns - band.length) / 2);
+			return [...band].sort((a, b) => a.lon - b.lon).map((tile, i) => ({
+				...tile,
+				column: offset + i,
+				row
+			}));
+		});
+	}
+	compose(ctx) {
+		const { shape, encoding, labels } = this.options;
+		const height = ctx.plot.height - KEY, width = ctx.plot.width;
+		const tiles = this.tiles(Math.max(.5, width / height));
+		const columns = Math.max(...tiles.map((tile) => tile.column)) + 1, rows = Math.max(...tiles.map((tile) => tile.row)) + 1;
+		const hex = shape === "hexagon-tiles";
+		const pitch = hex ? Math.min(width / ((columns + .5) * Math.sqrt(3)), height / (1.5 * rows + .5)) : Math.min(width / columns, height / rows);
+		const stepX = hex ? pitch * Math.sqrt(3) : pitch, stepY = hex ? pitch * 1.5 : pitch;
+		const usedWidth = stepX * (columns + (hex ? .5 : 0)), usedHeight = stepY * rows + (hex ? pitch / 2 : 0);
+		const originX = (width - usedWidth) / 2, originY = (height - usedHeight) / 2;
+		const x = (tile) => originX + (tile.column + .5 + (hex && tile.row % 2 ? .5 : 0)) * stepX;
+		const y = (tile) => originY + (hex ? pitch : stepY / 2) + tile.row * stepY;
+		const amounts = tiles.flatMap((tile) => tile.value === null ? [] : [tile.value]);
+		const [low = 0, high = 1] = extent(amounts);
+		const reach = Math.max(Math.abs(low), Math.abs(high)) || 1;
+		const t = (value) => value === null ? 0 : high > low ? (value - low) / (high - low) : .6;
+		const fill = (tile) => tile.value === null ? ctx.theme.grid : ctx.palette.sequential(t(tile.value));
+		const scale = (tile) => encoding === "area-and-color" ? Math.sqrt(Math.max(.04, Math.abs(tile.value ?? 0) / reach)) : 1;
+		const size = (hex ? pitch : pitch / 2) - 1;
+		const path = shape === "square-tiles" ? MatrixGlyphs.tile(pitch - 2, pitch - 2) : hex ? MatrixGlyphs.hexagon(size) : MatrixGlyphs.path(MatrixGlyph.Circle, pitch - 2, pitch - 2, 1);
+		const marks = ctx.marks("tiles", "path", tiles, (tile) => tile.name).attr("d", path).attr("fill", fill);
+		ctx.set(marks, { transform: (tile) => `translate(${x(tile)},${y(tile)}) scale(${scale(tile)})` }, { transform: (tile) => `translate(${x(tile)},${y(tile)}) scale(0)` }, 2);
+		const format = (value) => Scales.format(value, reach);
+		ctx.hover(marks, (tile) => ({
+			title: tile.name,
+			color: fill(tile),
+			rows: [["Value", tile.value === null ? "no data" : format(tile.value)]]
+		}));
+		const tileWidth = hex ? stepX : pitch, room = tileWidth >= 17;
+		ctx.marks("tile-labels", "text", labels && room ? tiles : [], (tile) => tile.name).attr("x", x).attr("y", y).attr("dy", "0.34em").attr("text-anchor", "middle").attr("pointer-events", "none").attr("font-size", Math.min(10, tileWidth * .42)).attr("font-family", ctx.theme.fontFamily).attr("fill", (tile) => this.inkOn(ctx, fill(tile))).text((tile) => tile.text);
+		const stops = Array.from({ length: 24 }, (_, i) => i);
+		ctx.marks("ramp", "rect", stops).attr("x", (i) => 34 + i * 5).attr("y", height + 8).attr("width", 5.4).attr("height", 8).attr("fill", (i) => ctx.palette.sequential((i + .5) / 24));
+		ctx.text(ctx.marks("ramp-labels", "text", [{
+			x: 0,
+			text: format(low)
+		}, {
+			x: 158,
+			text: format(high)
+		}]), 10.5).attr("x", (d) => d.x).attr("y", height + 16).text((d) => d.text);
+	}
+};
+export { TilegramChart, TilegramDensity, TilegramEncoding, TilegramPlacement, TilegramShape };

package/dist/charts/matrix/TriangleMatrix.js

@@ -0,0 +1,146 @@
+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 { CHAR, fitText } from "./MatrixSurface.js";
+// src/charts/matrix/TriangleMatrix.ts
+var TriangleCorner = /* @__PURE__ */ function(TriangleCorner) {
+	TriangleCorner["BottomLeft"] = "bottom-left";
+	TriangleCorner["TopLeft"] = "top-left";
+	TriangleCorner["TopRight"] = "top-right";
+	TriangleCorner["BottomRight"] = "bottom-right";
+	return TriangleCorner;
+}({});
+var TriangleLabels = /* @__PURE__ */ function(TriangleLabels) {
+	TriangleLabels["Stairs"] = "stair-labels";
+	TriangleLabels["Axes"] = "axis-labels";
+	return TriangleLabels;
+}({});
+var TriangleOrder = /* @__PURE__ */ function(TriangleOrder) {
+	TriangleOrder["Input"] = "input-order";
+	TriangleOrder["Cluster"] = "clustered";
+	return TriangleOrder;
+}({});
+var haversine = (a, b) => {
+	const rad = Math.PI / 180, dLat = (b.lat - a.lat) * rad, dLon = (b.lon - a.lon) * rad;
+	const h = Math.sin(dLat / 2) ** 2 + Math.cos(a.lat * rad) * Math.cos(b.lat * rad) * Math.sin(dLon / 2) ** 2;
+	return Math.round(12742 * Math.asin(Math.sqrt(h)));
+};
+/** Half a symmetric matrix, as on the mileage chart in a road atlas: each pair appears once. */
+var TriangleMatrix = class extends MatrixChart {
+	static meta = {
+		id: "triangle-matrix",
+		name: "Triangle matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Shows each pair of a symmetric matrix once, in a stepped triangle, as in a distance chart.",
+		tags: [
+			"mileage chart",
+			"distance table",
+			"half matrix"
+		],
+		sample: (seed) => {
+			const cities = SampleData.cities(seed).slice(0, 11).map((city) => ({
+				name: String(city.name),
+				lon: +city.lon,
+				lat: +city.lat
+			}));
+			const names = cities.map((city) => city.name);
+			return {
+				rows: names,
+				columns: names,
+				values: cities.map((a) => cities.map((b) => haversine(a, b)))
+			};
+		},
+		variants: {
+			corner: [
+				"bottom-left",
+				"top-left",
+				"top-right",
+				"bottom-right"
+			],
+			labels: ["stair-labels", "axis-labels"],
+			glyph: [
+				MatrixGlyph.Tile,
+				MatrixGlyph.Circle,
+				MatrixGlyph.Square
+			],
+			order: ["input-order", "clustered"],
+			cellValues: [true, false]
+		},
+		valid: (v) => !(v.cellValues && v.glyph !== MatrixGlyph.Tile)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			corner: "bottom-left",
+			labels: "stair-labels",
+			glyph: MatrixGlyph.Tile,
+			cellValues: true,
+			order: "input-order"
+		};
+	}
+	drawMatrix(ctx, source) {
+		const { corner, labels, glyph, cellValues, order } = this.options;
+		const sequence = order === "clustered" ? MatrixSeriation.clustered(source.rowVectors) : source.rows.map((_, i) => i);
+		const n = Math.min(source.rows.length, source.columns.length);
+		const model = source.reorder(sequence.slice(0, n), sequence.slice(0, n));
+		const stairs = labels === "stair-labels";
+		const toRight = corner === "top-right" || corner === "bottom-right";
+		const toTop = corner === "top-left" || corner === "top-right";
+		const widest = Math.max(...model.rows.map((row) => row.length)) * CHAR + 8;
+		const reserve = stairs ? widest : 0;
+		const frame = this.frame(ctx, model, {
+			rowLabels: false,
+			columnLabels: "none",
+			left: toRight ? reserve : stairs ? 0 : widest,
+			right: toRight ? stairs ? 0 : widest : reserve,
+			bottom: 22 + (stairs ? 0 : 14)
+		});
+		const flipX = (i) => toRight ? n - 1 - i : i, flipY = (i) => toTop ? n - 1 - i : i;
+		const shown = model.cells.filter((cell) => cell.r > cell.c).map((cell) => ({
+			...cell,
+			r: flipY(cell.r),
+			c: flipX(cell.c)
+		}));
+		const nonNull = shown.flatMap((cell) => cell.value === null ? [] : [cell.value]);
+		const domain = [Math.min(...nonNull, Infinity), Math.max(...nonNull, -Infinity)];
+		const safe = Number.isFinite(domain[0]) ? domain : [0, 1];
+		const fill = this.heat(ctx, safe), reach = Math.max(Math.abs(safe[0]), Math.abs(safe[1])) || 1;
+		const format = (value) => value === null ? "–" : Scales.format(value, reach);
+		this.glyphs(ctx, "cells", shown, 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", format(cell.value)]]
+			})
+		});
+		if (cellValues) this.cellText(ctx, "values", shown, frame, (cell) => format(cell.value), (cell) => this.inkOn(ctx, fill(cell.value)), 9.5);
+		this.names(ctx, model, frame, flipX, flipY, toRight, stairs);
+		this.ramp(ctx, safe, frame.x, ctx.plot.height - 22 + 6);
+	}
+	/** Stairs put each name on its diagonal step, facing the empty half; axes put names on the two outer edges. */
+	names(ctx, model, frame, flipX, flipY, toRight, stairs) {
+		const step = Math.ceil(12 / frame.ch);
+		const rows = model.rows.map((label, i) => ({
+			label,
+			i
+		})).filter(({ i }) => stairs ? i % step === 0 : i > 0 && i % step === 0);
+		const atX = (i) => stairs ? frame.cx(flipX(i)) + (toRight ? frame.cw / 2 - 2 : -frame.cw / 2 + 2) : toRight ? frame.x + frame.width + 6 : frame.x - 6;
+		const anchor = stairs ? toRight ? "end" : "start" : toRight ? "start" : "end";
+		ctx.text(ctx.marks("row-names", "text", rows, (d) => d.i)).attr("dy", "0.32em").attr("text-anchor", anchor).attr("x", (d) => atX(d.i)).attr("y", (d) => frame.cy(flipY(d.i))).text((d) => fitText(d.label, CHAR * 12));
+		const stepC = Math.ceil(64 / frame.cw);
+		const columns = stairs ? [] : model.columns.map((label, i) => ({
+			label,
+			i
+		})).filter(({ i }) => i < model.columns.length - 1 && i % stepC === 0);
+		ctx.text(ctx.marks("column-names", "text", columns, (d) => d.i)).attr("text-anchor", "middle").attr("x", (d) => frame.cx(flipX(d.i))).attr("y", frame.y + frame.height + 13).text((d) => fitText(d.label, stepC * frame.cw - 4));
+	}
+};
+export { TriangleCorner, TriangleLabels, TriangleMatrix, TriangleOrder };

package/dist/charts/matrix/WaffleMatrix.js

@@ -0,0 +1,145 @@
+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 { fitText } from "./MatrixSurface.js";
+// src/charts/matrix/WaffleMatrix.ts
+var WaffleFill = /* @__PURE__ */ function(WaffleFill) {
+	WaffleFill["Rows"] = "row-fill";
+	WaffleFill["Columns"] = "column-fill";
+	WaffleFill["Snake"] = "snake-fill";
+	return WaffleFill;
+}({});
+var WaffleUnit = /* @__PURE__ */ function(WaffleUnit) {
+	WaffleUnit["Square"] = "square-units";
+	WaffleUnit["Circle"] = "round-units";
+	WaffleUnit["Diamond"] = "diamond-units";
+	return WaffleUnit;
+}({});
+var WaffleBasis = /* @__PURE__ */ function(WaffleBasis) {
+	WaffleBasis["Share"] = "share";
+	WaffleBasis["Absolute"] = "absolute";
+	return WaffleBasis;
+}({});
+var WaffleLayout = /* @__PURE__ */ function(WaffleLayout) {
+	WaffleLayout["Wrap"] = "wrapped";
+	WaffleLayout["Strip"] = "single-row";
+	return WaffleLayout;
+}({});
+var TITLE = 16;
+var GAP = 14;
+/** One waffle per row of data, each unit a slice of the whole, for comparing part-to-whole across groups by counting. */
+var WaffleMatrix = class extends MatrixChart {
+	static meta = {
+		id: "waffle-matrix",
+		name: "Waffle matrix",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Repeats a waffle chart per category, so shares can be compared across groups by counting unit squares.",
+		tags: [
+			"waffle",
+			"square pie",
+			"part to whole",
+			"small multiples"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 4),
+		variants: {
+			side: [10, 5],
+			fill: [
+				"row-fill",
+				"column-fill",
+				"snake-fill"
+			],
+			unit: [
+				"square-units",
+				"round-units",
+				"diamond-units"
+			],
+			basis: ["share", "absolute"],
+			layout: ["wrapped", "single-row"]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			side: 10,
+			fill: "row-fill",
+			unit: "square-units",
+			basis: "share",
+			layout: "wrapped"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.Top;
+	}
+	position(index, side) {
+		const { fill } = this.options;
+		const major = Math.floor(index / side), minor = index % side;
+		if (fill === "column-fill") return [major, side - 1 - minor];
+		if (fill === "snake-fill") return [major % 2 ? side - 1 - minor : minor, side - 1 - major];
+		return [minor, side - 1 - major];
+	}
+	slices(model, capacity) {
+		const { basis } = this.options;
+		const positive = model.rowVectors.map((row) => row.map((value) => Math.max(0, value)));
+		const unitValue = Math.max(1e-9, ...positive.map((row) => row.reduce((a, b) => a + b, 0))) / capacity;
+		return positive.flatMap((row, panel) => {
+			const total = row.reduce((a, b) => a + b, 0) || 1;
+			const scale = basis === "share" ? capacity / total : 1 / unitValue;
+			let cursor = 0, carried = 0;
+			return row.map((value, c) => {
+				const exact = value * scale + carried, units = Math.round(exact);
+				carried = exact - units;
+				const slice = {
+					key: `${panel}/${c}`,
+					panel,
+					column: model.columns[c],
+					value,
+					units,
+					start: cursor
+				};
+				cursor += units;
+				return slice;
+			});
+		});
+	}
+	drawMatrix(ctx, model) {
+		const { side, unit, layout, basis } = this.options;
+		const count = model.rows.length, capacity = side ** 2;
+		const { width, height } = ctx.plot;
+		let columns = layout === "single-row" ? count : 1, size = 0;
+		for (let tryColumns = layout === "single-row" ? count : 1; tryColumns <= count; tryColumns++) {
+			const rows = Math.ceil(count / tryColumns);
+			const fit = Math.min((width - GAP * (tryColumns - 1)) / tryColumns, (height - rows * 30 + GAP) / rows);
+			if (fit > size) {
+				size = fit;
+				columns = tryColumns;
+			}
+		}
+		size = Math.max(10, size);
+		const pitch = size / side, body = pitch - Math.min(2, pitch * .18), r = body / 2;
+		const left = (panel) => panel % columns * (size + GAP), top = (panel) => TITLE + Math.floor(panel / columns) * (size + GAP + TITLE);
+		const glyph = (x, y) => {
+			const cx = (x + .5) * pitch, cy = (y + .5) * pitch;
+			if (unit === "round-units") return `M${(cx - r).toFixed(2)},${cy.toFixed(2)}a${r.toFixed(2)},${r.toFixed(2)} 0 1,0 ${(2 * r).toFixed(2)},0a${r.toFixed(2)},${r.toFixed(2)} 0 1,0 ${(-2 * r).toFixed(2)},0Z`;
+			if (unit === "diamond-units") return `M${cx.toFixed(2)},${(cy - r).toFixed(2)}l${r.toFixed(2)},${r.toFixed(2)}l${(-r).toFixed(2)},${r.toFixed(2)}l${(-r).toFixed(2)},${(-r).toFixed(2)}Z`;
+			return `M${(cx - r).toFixed(2)},${(cy - r).toFixed(2)}h${body.toFixed(2)}v${body.toFixed(2)}h${(-body).toFixed(2)}Z`;
+		};
+		const slices = this.slices(model, capacity);
+		const path = (slice) => Array.from({ length: slice.units }, (_, i) => this.position(slice.start + i, side)).map(([x, y]) => glyph(x, y)).join("");
+		const trays = model.rows.map((_, panel) => panel);
+		const tray = Array.from({ length: capacity }, (_, i) => glyph(i % side, Math.floor(i / side))).join("");
+		ctx.marks("trays", "path", basis === "absolute" ? trays : [], (panel) => panel).attr("d", tray).attr("fill", ctx.theme.grid).attr("opacity", .55).attr("transform", (panel) => `translate(${left(panel)},${top(panel)})`);
+		const marks = ctx.marks("units", "path", slices.filter((slice) => slice.units > 0), (slice) => slice.key).attr("fill", (slice) => ctx.palette.color(slice.column));
+		marks.attr("d", path);
+		ctx.set(marks, { transform: (slice) => `translate(${left(slice.panel)},${top(slice.panel)})` }, { transform: (slice) => `translate(${left(slice.panel)},${top(slice.panel) + size}) scale(1,0)` }, 8);
+		ctx.hover(marks, (slice) => ({
+			title: model.rows[slice.panel],
+			color: ctx.palette.color(slice.column),
+			rows: [[slice.column, Scales.format(slice.value, model.reach)], ["Units", slice.units]]
+		}));
+		ctx.text(ctx.marks("titles", "text", trays, (panel) => panel), 11, "ink").attr("font-weight", 600).attr("x", left).attr("y", (panel) => top(panel) - 5).text((panel) => fitText(model.rows[panel], size));
+	}
+};
+export { WaffleBasis, WaffleFill, WaffleLayout, WaffleMatrix, WaffleUnit };

package/dist/charts/matrix/index.js

@@ -0,0 +1,53 @@
+import { MatrixSurface } from "./MatrixSurface.js";
+import { MatrixDistance, MatrixGlyph, MatrixLinkage, MatrixMarginal, MatrixNormalize, MatrixOrder } from "./matrixEnums.js";
+import { MatrixModel } from "./MatrixModel.js";
+import { MatrixSeriation } from "./MatrixSeriation.js";
+import { MatrixChart } from "./MatrixChart.js";
+import { HeatmapAspect, HeatmapChart, HeatmapLattice } from "./HeatmapChart.js";
+import { MatrixTowers3D, TowerHeight, TowerShape } from "./MatrixTowers3D.js";
+import { CohortMatrix, CohortMatrixAlign, CohortMatrixMeasure } from "./CohortMatrix.js";
+import { SpyMarker, SpyOrder, SpyPlot } from "./SpyPlot.js";
+import { RecurrenceDisplay, RecurrenceKind, RecurrenceMetric, RecurrencePlot } from "./RecurrencePlot.js";
+import { ContingencyChart, ContingencyForm, ContingencyOrder } from "./ContingencyChart.js";
+import { TriangleCorner, TriangleLabels, TriangleMatrix, TriangleOrder } from "./TriangleMatrix.js";
+import { DiagonalForm, DiagonalMatrix, DiagonalOrder, DiagonalTrack } from "./DiagonalMatrix.js";
+import { RiskAxes, RiskMarks, RiskMatrix, RiskScoring } from "./RiskMatrix.js";
+import { TableDensity, TableHeatmap, TableIndicator, TableScope } from "./TableHeatmap.js";
+import { SeriationMatrix, SeriationMethod, SeriationTarget, SeriationView } from "./SeriationMatrix.js";
+import { MatrixSortAxis, MatrixSortDirection, MatrixSortKey, SortedMatrix } from "./SortedMatrix.js";
+import { WaffleBasis, WaffleFill, WaffleLayout, WaffleMatrix, WaffleUnit } from "./WaffleMatrix.js";
+import { GridPanel, GridPlot, GridScale } from "./GridPlot.js";
+import { TilegramChart, TilegramDensity, TilegramEncoding, TilegramPlacement, TilegramShape } from "./TilegramChart.js";
+import { MatrixDotChart, MatrixDotFill } from "./MatrixDotChart.js";
+import { PunchCard, PunchCardLayout, PunchCardRows } from "./PunchCard.js";
+import { HintonDiagram, HintonGround } from "./HintonDiagram.js";
+import { BubbleMatrix } from "./BubbleMatrix.js";
+import { ConfusionMatrix, ConfusionSummary } from "./ConfusionMatrix.js";
+import { CorrelationMatrix, CorrelationMethod, CorrelationOrder, CorrelationTriangle } from "./CorrelationMatrix.js";
+import { ClusteredHeatmap, DendrogramBranch, DendrogramSides } from "./ClusteredHeatmap.js";
+// src/charts/matrix/index.ts
+var matrixCatalog = [
+	HeatmapChart,
+	MatrixTowers3D,
+	CohortMatrix,
+	SpyPlot,
+	RecurrencePlot,
+	ContingencyChart,
+	TriangleMatrix,
+	DiagonalMatrix,
+	RiskMatrix,
+	TableHeatmap,
+	SeriationMatrix,
+	SortedMatrix,
+	WaffleMatrix,
+	GridPlot,
+	TilegramChart,
+	MatrixDotChart,
+	PunchCard,
+	HintonDiagram,
+	BubbleMatrix,
+	ConfusionMatrix,
+	CorrelationMatrix,
+	ClusteredHeatmap
+];
+export { BubbleMatrix, ClusteredHeatmap, CohortMatrix, CohortMatrixAlign, CohortMatrixMeasure, ConfusionMatrix, ConfusionSummary, ContingencyChart, ContingencyForm, ContingencyOrder, CorrelationMatrix, CorrelationMethod, CorrelationOrder, CorrelationTriangle, DendrogramBranch, DendrogramSides, DiagonalForm, DiagonalMatrix, DiagonalOrder, DiagonalTrack, GridPanel, GridPlot, GridScale, HeatmapAspect, HeatmapChart, HeatmapLattice, HintonDiagram, HintonGround, MatrixChart, MatrixDistance, MatrixDotChart, MatrixDotFill, MatrixGlyph, MatrixLinkage, MatrixMarginal, MatrixModel, MatrixNormalize, MatrixOrder, MatrixSeriation, MatrixSortAxis, MatrixSortDirection, MatrixSortKey, MatrixSurface, MatrixTowers3D, PunchCard, PunchCardLayout, PunchCardRows, RecurrenceDisplay, RecurrenceKind, RecurrenceMetric, RecurrencePlot, RiskAxes, RiskMarks, RiskMatrix, RiskScoring, SeriationMatrix, SeriationMethod, SeriationTarget, SeriationView, SortedMatrix, SpyMarker, SpyOrder, SpyPlot, TableDensity, TableHeatmap, TableIndicator, TableScope, TilegramChart, TilegramDensity, TilegramEncoding, TilegramPlacement, TilegramShape, TowerHeight, TowerShape, TriangleCorner, TriangleLabels, TriangleMatrix, TriangleOrder, WaffleBasis, WaffleFill, WaffleLayout, WaffleMatrix, WaffleUnit, matrixCatalog };

package/dist/charts/matrix/matrixEnums.js

@@ -0,0 +1,48 @@
+// src/charts/matrix/matrixEnums.ts
+/** How a cell draws its value. Tile encodes by colour alone; every other glyph also encodes by size. */
+var MatrixGlyph = /* @__PURE__ */ function(MatrixGlyph) {
+	MatrixGlyph["Tile"] = "tile";
+	MatrixGlyph["Circle"] = "circle";
+	MatrixGlyph["Square"] = "square";
+	MatrixGlyph["Diamond"] = "diamond";
+	MatrixGlyph["Triangle"] = "triangle";
+	MatrixGlyph["Bar"] = "bar";
+	MatrixGlyph["Column"] = "column";
+	MatrixGlyph["Pie"] = "pie";
+	MatrixGlyph["Ellipse"] = "ellipse";
+	return MatrixGlyph;
+}({});
+var MatrixOrder = /* @__PURE__ */ function(MatrixOrder) {
+	MatrixOrder["Input"] = "input-order";
+	MatrixOrder["Total"] = "by-total";
+	MatrixOrder["Cluster"] = "clustered";
+	return MatrixOrder;
+}({});
+var MatrixNormalize = /* @__PURE__ */ function(MatrixNormalize) {
+	MatrixNormalize["None"] = "raw";
+	MatrixNormalize["Row"] = "row-share";
+	MatrixNormalize["Column"] = "column-share";
+	MatrixNormalize["Total"] = "total-share";
+	return MatrixNormalize;
+}({});
+var MatrixMarginal = /* @__PURE__ */ function(MatrixMarginal) {
+	MatrixMarginal["None"] = "no-margins";
+	MatrixMarginal["Rows"] = "row-margin";
+	MatrixMarginal["Columns"] = "column-margin";
+	MatrixMarginal["Both"] = "both-margins";
+	return MatrixMarginal;
+}({});
+var MatrixLinkage = /* @__PURE__ */ function(MatrixLinkage) {
+	MatrixLinkage["Average"] = "average";
+	MatrixLinkage["Complete"] = "complete";
+	MatrixLinkage["Single"] = "single";
+	MatrixLinkage["Ward"] = "ward";
+	return MatrixLinkage;
+}({});
+var MatrixDistance = /* @__PURE__ */ function(MatrixDistance) {
+	MatrixDistance["Euclidean"] = "euclidean";
+	MatrixDistance["Manhattan"] = "manhattan";
+	MatrixDistance["Correlation"] = "correlation";
+	return MatrixDistance;
+}({});
+export { MatrixDistance, MatrixGlyph, MatrixLinkage, MatrixMarginal, MatrixNormalize, MatrixOrder };

package/dist/charts/mlcharts/AttentionGrid.js

@@ -0,0 +1,79 @@
+import { WideLabel } from "./WideLabel.js";
+// src/charts/mlcharts/AttentionGrid.ts
+var GAP = 14;
+var TITLE = 16;
+var FLAT = 16;
+/** Height one line of 11px text needs. */
+var BAND = 13;
+var MAX_HEADER = 72;
+/** Places one or more token grids in the plot, with labels only on the outer edges, since heads share tokens. */
+var AttentionGrid = class {
+	static plan({ plot, rows, columns, panels, square, titled, right, top, bottom, minGutter }) {
+		const title = titled ? TITLE : 0, below = top > 0;
+		const gutter = Math.min(plot.width * .26, Math.max(minGutter, Math.max(...rows.map((row) => WideLabel.width(row))) + 8));
+		const longest = Math.max(...columns.map((column) => WideLabel.width(column)));
+		const solve = (header) => {
+			let best = {
+				across: 1,
+				cw: 0,
+				ch: 0,
+				score: -1
+			};
+			for (let across = 1; across <= panels; across++) {
+				const lines = Math.ceil(panels / across);
+				const width = (plot.width - gutter - right - (across - 1) * GAP) / across;
+				const height = (plot.height - header - top - bottom - lines * title - (lines - 1) * GAP) / lines;
+				let cw = Math.max(1, width / columns.length), ch = Math.max(1, height / rows.length);
+				if (square) cw = ch = Math.min(cw, ch);
+				if (Math.min(cw, ch) > best.score) best = {
+					across,
+					cw,
+					ch,
+					score: Math.min(cw, ch)
+				};
+			}
+			return best;
+		};
+		let header = FLAT, fit = solve(header);
+		const flatHeader = longest + 4 <= fit.cw;
+		if (!flatHeader) {
+			header = Math.min(MAX_HEADER, longest + 6, plot.height * .3);
+			fit = solve(header);
+		}
+		const { across, cw, ch } = fit;
+		const width = cw * columns.length, height = ch * rows.length, reserved = below ? top : header;
+		const frames = Array.from({ length: panels }, (_, panel) => {
+			const x = gutter + panel % across * (width + GAP);
+			const y = title + reserved + Math.floor(panel / across) * (height + GAP + title);
+			return {
+				x,
+				y,
+				width,
+				height,
+				cw,
+				ch,
+				radius: 0,
+				header,
+				flatHeader,
+				stagger: false,
+				hex: false,
+				columnLabels: below ? "bottom" : "top",
+				rowLabels: true,
+				cx: (c) => x + cw * (c + .5),
+				cy: (r) => y + ch * (r + .5)
+			};
+		});
+		return {
+			frames,
+			across,
+			gutter,
+			header,
+			flatHeader,
+			below,
+			bottom: Math.max(...frames.map((frame) => frame.y + frame.height)) + (below ? header : 0),
+			rowStep: Math.ceil(BAND / ch),
+			columnStep: flatHeader ? 1 : Math.ceil(BAND / cw)
+		};
+	}
+};
+export { AttentionGrid };