@mstone6969/graph 0.0.0-stage → 0.1.0

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

package/dist/charts/matrix/GridPlot.js

@@ -0,0 +1,186 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixSurface, fitText } from "./MatrixSurface.js";
+import { area, curveMonotoneX, curveStepAfter, extent, group, line, max, mean, min, scaleLinear, scaleTime } from "d3";
+// src/charts/matrix/GridPlot.ts
+var GridPanel = /* @__PURE__ */ function(GridPanel) {
+	GridPanel["Line"] = "line-panels";
+	GridPanel["Area"] = "area-panels";
+	GridPanel["Step"] = "step-panels";
+	GridPanel["Bars"] = "bar-panels";
+	GridPanel["Dots"] = "dot-panels";
+	return GridPanel;
+}({});
+var GridScale = /* @__PURE__ */ function(GridScale) {
+	GridScale["Shared"] = "shared-scale";
+	GridScale["Free"] = "free-scale";
+	GridScale["Indexed"] = "indexed-scale";
+	return GridScale;
+}({});
+var TITLE = 16;
+var GAP = 12;
+var AXIS = 16;
+/** Small multiples: one panel per group on a common layout, so shapes can be compared without overplotting. */
+var GridPlot = class extends MatrixSurface {
+	static meta = {
+		id: "grid-plot",
+		name: "Grid plot",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Repeats a small chart in a grid, one panel per group, to compare many series without overlap.",
+		tags: [
+			"small multiples",
+			"trellis",
+			"facet grid"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 36, 6),
+		variants: {
+			panel: [
+				"line-panels",
+				"area-panels",
+				"step-panels",
+				"bar-panels",
+				"dot-panels"
+			],
+			scale: [
+				"shared-scale",
+				"free-scale",
+				"indexed-scale"
+			],
+			columns: [
+				3,
+				2,
+				6
+			],
+			reference: [false, true],
+			context: [false, true]
+		},
+		valid: (v) => !(v.context && (v.panel === "bar-panels" || v.panel === "dot-panels" || v.scale === "free-scale"))
+	};
+	defaults() {
+		return {
+			facet: "series",
+			x: "date",
+			y: "value",
+			panel: "line-panels",
+			scale: "shared-scale",
+			columns: 3,
+			reference: false,
+			context: false
+		};
+	}
+	get blank() {
+		return !this.options.data?.length;
+	}
+	facets() {
+		const { data, facet, x, y, scale } = this.options;
+		const times = data[0]?.[x] instanceof Date;
+		return {
+			facets: [...group(data, (row) => String(row[facet]))].map(([name, rows]) => {
+				const ordered = rows.flatMap((raw, i) => {
+					const position = raw[x] instanceof Date ? raw[x].getTime() : Number(raw[x] ?? i), value = raw[y];
+					return value === null || value === void 0 || !Number.isFinite(+value) ? [] : [{
+						x: Number.isFinite(position) ? position : i,
+						y: +value,
+						raw
+					}];
+				}).sort((a, b) => a.x - b.x);
+				const start = ordered[0]?.y || 1;
+				return {
+					name,
+					points: scale === "indexed-scale" ? ordered.map((point) => ({
+						...point,
+						y: point.y / start * 100
+					})) : ordered
+				};
+			}),
+			times
+		};
+	}
+	valueScale(values, top) {
+		const bars = this.options.panel === "bar-panels" || this.options.panel === "area-panels";
+		const [low = 0, high = 1] = extent(values);
+		return scaleLinear([bars ? Math.min(0, low) : low, bars ? Math.max(0, high) : high], [top, 0]).nice(3);
+	}
+	pathFor(points, fx, fy, bottom) {
+		const { panel } = this.options;
+		if (panel === "area-panels") return area().x((p) => fx(p.x)).y0(Math.min(bottom, fy(0))).y1((p) => fy(p.y)).curve(curveMonotoneX)(points) ?? "";
+		if (panel === "bar-panels") {
+			const width = Math.max(1, (fx(points[points.length - 1]?.x ?? 0) - fx(points[0]?.x ?? 0)) / Math.max(1, points.length) - 1);
+			const zero = fy(0);
+			return points.map((p) => `M${(fx(p.x) - width / 2).toFixed(2)},${Math.min(zero, fy(p.y)).toFixed(2)}h${width.toFixed(2)}v${Math.abs(zero - fy(p.y)).toFixed(2)}h${(-width).toFixed(2)}Z`).join("");
+		}
+		if (panel === "dot-panels") return points.map((p) => `M${(fx(p.x) - 1.5).toFixed(2)},${fy(p.y).toFixed(2)}a1.5,1.5 0 1,0 3,0a1.5,1.5 0 1,0 -3,0Z`).join("");
+		return line().x((p) => fx(p.x)).y((p) => fy(p.y)).curve(panel === "step-panels" ? curveStepAfter : curveMonotoneX)(points) ?? "";
+	}
+	compose(ctx) {
+		const { panel, scale, reference, context, columns: wanted } = this.options;
+		const { facets, times } = this.facets();
+		const columns = Math.max(1, Math.min(wanted, facets.length)), rows = Math.ceil(facets.length / columns);
+		const every = facets.flatMap((facet) => facet.points);
+		const free = scale === "free-scale";
+		const gutter = 30, gap = free ? gutter : GAP;
+		const panelW = (ctx.plot.width - gutter - gap * (columns - 1)) / columns;
+		const panelH = (ctx.plot.height - AXIS - 28 * rows + GAP) / rows;
+		const span = extent(every, (point) => point.x);
+		const fx = times ? scaleTime([new Date(span[0]), new Date(span[1])], [0, panelW]) : scaleLinear(span, [0, panelW]);
+		const shared = this.valueScale(every.map((point) => point.y), panelH);
+		const fill = ctx.palette.sequential(.62), stroke = panel === "line-panels" || panel === "step-panels";
+		const reach = max(every, (point) => Math.abs(point.y)) ?? 1;
+		const panels = facets.map((facet, i) => ({
+			...facet,
+			column: i % columns,
+			row: Math.floor(i / columns),
+			i,
+			fy: free ? this.valueScale(facet.points.map((p) => p.y), panelH) : shared
+		}));
+		const left = (d) => gutter + d.column * (panelW + gap);
+		const top = (d) => TITLE + d.row * (panelH + GAP + TITLE);
+		ctx.marks("backs", "rect", panels, (d) => d.name).attr("x", left).attr("y", top).attr("width", panelW).attr("height", panelH).attr("fill", "none").attr("stroke", ctx.theme.grid);
+		ctx.text(ctx.marks("titles", "text", panels, (d) => d.name), 11, "ink").attr("x", left).attr("y", (d) => top(d) - 5).attr("font-weight", 600).text((d) => fitText(d.name, panelW));
+		const ghosts = context ? panels.flatMap((d) => facets.filter((other) => other.name !== d.name).map((other) => ({
+			key: `${d.name}/${other.name}`,
+			d: line().x((p) => fx(p.x)).y((p) => d.fy(p.y))(other.points) ?? "",
+			host: d
+		}))) : [];
+		ctx.marks("ghosts", "path", ghosts, (g) => g.key).attr("d", (g) => g.d).attr("transform", (g) => `translate(${left(g.host)},${top(g.host)})`).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		const marks = ctx.marks("series", "path", panels, (d) => d.name).attr("d", (d) => this.pathFor(d.points, fx, d.fy, panelH)).attr("transform", (d) => `translate(${left(d)},${top(d)})`).attr("fill", stroke ? "none" : fill).attr("stroke", stroke ? fill : "none").attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		if (stroke) ctx.drawOn(marks);
+		ctx.hover(marks, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [
+				["Mean", Scales.format(mean(d.points, (p) => p.y) ?? 0, reach)],
+				["Low", Scales.format(min(d.points, (p) => p.y) ?? 0, reach)],
+				["High", Scales.format(max(d.points, (p) => p.y) ?? 0, reach)]
+			]
+		}));
+		const means = reference ? panels.map((d) => ({
+			...d,
+			level: d.fy(mean(d.points, (p) => p.y) ?? 0)
+		})) : [];
+		ctx.marks("means", "line", means, (d) => d.name).attr("x1", left).attr("x2", (d) => left(d) + panelW).attr("y1", (d) => top(d) + d.level).attr("y2", (d) => top(d) + d.level).attr("stroke", ctx.theme.inkMuted).attr("stroke-dasharray", "3 3");
+		const ticksY = panels.filter((d) => free || d.column === 0).flatMap((d) => d.fy.ticks(3).map((tick) => ({
+			key: `${d.name}/${tick}`,
+			d,
+			tick
+		})));
+		ctx.text(ctx.marks("y-ticks", "text", ticksY, (t) => t.key), 10, "muted").attr("text-anchor", "end").attr("dy", "0.32em").attr("x", (t) => left(t.d) - 4).attr("y", (t) => top(t.d) + t.d.fy(t.tick)).text((t) => Scales.format(t.tick, reach));
+		const format = (value) => times ? new Date(value).toLocaleDateString("en", {
+			month: "short",
+			day: "numeric",
+			timeZone: "UTC"
+		}) : Scales.format(value, Math.abs(span[1]));
+		const lastRow = panels.filter((d) => d.i + columns >= panels.length);
+		const ticksX = panelW > 90 ? lastRow.flatMap((d) => [span[0], span[1]].map((tick, at) => ({
+			key: `${d.name}/${at}`,
+			d,
+			tick,
+			at
+		}))) : [];
+		ctx.text(ctx.marks("x-ticks", "text", ticksX, (t) => t.key), 10, "muted").attr("text-anchor", (t) => t.at ? "end" : "start").attr("x", (t) => left(t.d) + (t.at ? panelW : 0)).attr("y", (t) => top(t.d) + panelH + 12).text((t) => format(t.tick));
+	}
+};
+export { GridPanel, GridPlot, GridScale };

package/dist/charts/matrix/HeatmapChart.js

@@ -0,0 +1,124 @@
+import { Scales } from "../../core/Scales.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MatrixChart } from "./MatrixChart.js";
+import { MatrixGlyphs } from "./MatrixGlyphs.js";
+import { MatrixGlyph, MatrixMarginal, MatrixNormalize, MatrixOrder } from "./matrixEnums.js";
+import { contours, geoPath, geoTransform } from "d3";
+// src/charts/matrix/HeatmapChart.ts
+var HeatmapLattice = /* @__PURE__ */ function(HeatmapLattice) {
+	HeatmapLattice["Square"] = "square-lattice";
+	HeatmapLattice["Brick"] = "brick";
+	HeatmapLattice["Hexagon"] = "hexagon";
+	HeatmapLattice["Contour"] = "contour";
+	return HeatmapLattice;
+}({});
+var HeatmapAspect = /* @__PURE__ */ function(HeatmapAspect) {
+	HeatmapAspect["Fit"] = "fit";
+	HeatmapAspect["SquareCells"] = "square-cells";
+	return HeatmapAspect;
+}({});
+/** The general-purpose matrix: colour shows magnitude at each row and column crossing. */
+var HeatmapChart = class extends MatrixChart {
+	static meta = {
+		id: "heatmap",
+		name: "Heatmap",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Shows a value at every crossing of two dimensions using colour, for spotting patterns and hot spots.",
+		tags: [
+			"matrix",
+			"grid",
+			"contour",
+			"hexagon"
+		],
+		sample: (seed) => SampleData.matrix(seed),
+		variants: {
+			lattice: [
+				"square-lattice",
+				"brick",
+				"hexagon",
+				"contour"
+			],
+			marginals: [
+				MatrixMarginal.None,
+				MatrixMarginal.Rows,
+				MatrixMarginal.Columns,
+				MatrixMarginal.Both
+			],
+			order: [
+				MatrixOrder.Input,
+				MatrixOrder.Total,
+				MatrixOrder.Cluster
+			],
+			aspect: ["fit", "square-cells"],
+			cellValues: [false, true]
+		},
+		valid: (v) => !(v.aspect === "square-cells" && (v.lattice === "hexagon" || v.lattice === "contour")) && !(v.cellValues && (v.lattice === "contour" || v.lattice === "hexagon" || v.aspect === "square-cells"))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			lattice: "square-lattice",
+			aspect: "fit",
+			marginals: MatrixMarginal.None,
+			order: MatrixOrder.Input,
+			normalize: MatrixNormalize.None,
+			cellValues: false
+		};
+	}
+	drawMatrix(ctx, source) {
+		const { lattice, marginals, order, aspect, normalize, cellValues } = this.options;
+		const model = this.ordered(source.normalize(normalize), order);
+		const onRight = marginals === MatrixMarginal.Rows || marginals === MatrixMarginal.Both;
+		const onTop = marginals === MatrixMarginal.Columns || marginals === MatrixMarginal.Both;
+		const frame = this.frame(ctx, model, {
+			right: onRight ? 44 : 0,
+			top: onTop ? 44 : 0,
+			bottom: 22,
+			columnLabels: onTop ? "bottom" : "top",
+			square: aspect === "square-cells",
+			stagger: lattice === "brick",
+			hex: lattice === "hexagon"
+		});
+		const fill = this.heat(ctx, model.domain);
+		this.axisLabels(ctx, model, frame);
+		this.marginals(ctx, model, frame, marginals);
+		this.ramp(ctx, model.domain, frame.x, frame.y + frame.height + (onTop ? 20 : 6));
+		const format = (value) => value === null ? "no data" : Scales.format(value, model.reach);
+		if (lattice === "contour") return this.contours(ctx, model, frame, fill);
+		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", format(cell.value)]]
+			})
+		});
+		if (lattice === "hexagon") ctx.root.select(".m-cells").selectAll("path").attr("d", MatrixGlyphs.hexagon(frame.radius - 1));
+		this.cellText(ctx, "cell-values", cellValues ? model.cells.filter((cell) => cell.value !== null) : [], frame, (cell) => format(cell.value), (cell) => this.inkOn(ctx, fill(cell.value)));
+	}
+	contours(ctx, model, frame, fill) {
+		const [low] = model.domain, columns = model.columns.length;
+		const flat = model.values.flatMap((row) => row.map((value) => value ?? low));
+		const bands = contours().size([columns, model.rows.length]).smooth(true).thresholds(9)(flat);
+		const bed = ctx.marks("bed", "rect", [low]).attr("fill", fill(low)).attr("rx", 4).attr("x", frame.x).attr("y", frame.y).attr("width", frame.width).attr("height", frame.height);
+		ctx.hover(bed, () => ({
+			title: "Contour band",
+			rows: [["At least", Scales.format(low, model.reach)]]
+		}));
+		const project = geoPath(geoTransform({ point(x, y) {
+			this.stream.point(frame.x + x * frame.cw, frame.y + y * frame.ch);
+		} }));
+		const shapes = ctx.marks("bands", "path", bands, (band) => band.value).attr("d", (band) => project(band)).attr("fill", (band) => fill(band.value));
+		ctx.hover(shapes, (band) => ({
+			title: "Contour band",
+			color: fill(band.value),
+			rows: [["At least", Scales.format(band.value, model.reach)]]
+		}));
+	}
+};
+export { HeatmapAspect, HeatmapChart, HeatmapLattice };

package/dist/charts/matrix/HintonDiagram.js

@@ -0,0 +1,92 @@
+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";
+// src/charts/matrix/HintonDiagram.ts
+var HintonGround = /* @__PURE__ */ function(HintonGround) {
+	HintonGround["Plain"] = "plain-ground";
+	HintonGround["Tray"] = "tray-ground";
+	return HintonGround;
+}({});
+/** Hinton's weight diagram: signed values as squares whose area is the magnitude, for model weights and factor loadings. */
+var HintonDiagram = class extends MatrixChart {
+	static meta = {
+		id: "hinton-diagram",
+		name: "Hinton diagram",
+		family: ChartFamily.Matrix,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Draws signed matrix values as sized squares, showing the pattern of weights, loadings or coefficients at a glance.",
+		tags: [
+			"weights",
+			"loadings",
+			"neural network"
+		],
+		sample: (seed) => SampleData.matrix(seed, 9, 12),
+		variants: {
+			symbol: [
+				MatrixGlyph.Square,
+				MatrixGlyph.Circle,
+				MatrixGlyph.Diamond,
+				MatrixGlyph.Triangle
+			],
+			ground: ["plain-ground", "tray-ground"],
+			normalize: [
+				MatrixNormalize.None,
+				MatrixNormalize.Row,
+				MatrixNormalize.Column
+			],
+			order: [
+				MatrixOrder.Input,
+				MatrixOrder.Total,
+				MatrixOrder.Cluster
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: MatrixGlyph.Square,
+			ground: "plain-ground",
+			normalize: MatrixNormalize.None,
+			order: MatrixOrder.Input,
+			colorScale: ColorScale.Diverging
+		};
+	}
+	drawMatrix(ctx, source) {
+		const { symbol, ground, normalize, order } = this.options;
+		const model = this.ordered(source, order).normalize(normalize);
+		const frame = this.frame(ctx, model, {
+			square: true,
+			bottom: 22
+		});
+		const reach = model.reach, domain = [-reach, reach], fill = this.heat(ctx, domain);
+		this.axisLabels(ctx, model, frame);
+		ctx.marks("tray", "rect", ground === "tray-ground" ? [0] : []).attr("fill", ctx.theme.grid).attr("opacity", .5).attr("rx", 4).attr("x", frame.x).attr("y", frame.y).attr("width", frame.width).attr("height", frame.height);
+		this.glyphs(ctx, "cells", model.cells.filter((cell) => cell.value !== null), frame, {
+			glyph: symbol,
+			gap: 2,
+			size: (cell) => Math.abs(cell.value) / reach,
+			fill: (cell) => fill(Math.sign(cell.value) * .85 * reach),
+			tip: (cell) => ({
+				title: `${cell.row} · ${cell.column}`,
+				color: fill(Math.sign(cell.value) * .85 * reach),
+				rows: [["Weight", Scales.format(cell.value, reach)]]
+			})
+		});
+		const label = (value) => Scales.format(value, reach);
+		this.sizeKey(ctx, symbol, frame, frame.y + frame.height + 4, [
+			1,
+			.25,
+			-.25,
+			-1
+		].map((t) => ({
+			t: Math.abs(t),
+			sign: t,
+			fill: fill(Math.sign(t) * .85 * reach),
+			label: label(t * reach)
+		})));
+	}
+};
+export { HintonDiagram, HintonGround };