@mstone6969/graph 0.0.0-stage → 0.1.0

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

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 { SampleData } from "../../data/SampleData.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) => SampleData.world(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 };