@mstone6969/graph 0.0.0-stage → 0.1.0

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/multivariate/AnchoredProjection.js

@@ -0,0 +1,45 @@
+import { RadialChart } from "../../core/RadialChart.js";
+import { MultivariateKit, ProjectionOverlay } from "./MultivariateKit.js";
+import { WideNormal, WideTable } from "./WideTable.js";
+// src/charts/multivariate/AnchoredProjection.ts
+/** Dimensions pinned around a centre, with each observation placed by how strongly each pin pulls it. */
+var AnchoredProjection = class extends RadialChart {
+	drawRadial(ctx, { radius, center }) {
+		const table = WideTable.of(this.options);
+		const records = table.complete;
+		if (table.dimensions.length < 2 || !records.length) return;
+		const r = Math.max(20, radius - 16);
+		const { anchors, points, centre = [0, 0] } = this.project(table, table.normalised(this.options.normal ?? WideNormal.MinMax, records), r);
+		this.guides(ctx, anchors, r, centre);
+		const cloud = points.map((p, i) => ({
+			x: p[0],
+			y: p[1],
+			record: records[i]
+		}));
+		MultivariateKit.overlay(ctx, cloud, this.options.overlay ?? ProjectionOverlay.Points, {
+			x: -center[0],
+			y: -center[1],
+			width: center[0] * 2,
+			height: center[1] * 2
+		});
+		MultivariateKit.dots(ctx, cloud, (point) => MultivariateKit.tooltip(table, point.record, ctx.palette.color(point.record.group)), r < 80 ? 3.5 : 4.5);
+		this.anchorLabels(ctx, anchors, center[0]);
+	}
+	anchorLabels(ctx, anchors, halfWidth) {
+		const dots = ctx.marks("anchors", "circle", anchors, (anchor) => anchor.name).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (a) => a.x,
+			cy: (a) => a.y,
+			r: 4.5
+		}, { r: 0 });
+		ctx.hover(dots, (anchor) => ({ title: anchor.name }));
+		const side = (a) => Math.cos(a.angle);
+		const labels = ctx.marks("anchor-labels", "text", anchors, (anchor) => anchor.name).attr("text-anchor", (a) => side(a) > .2 ? "start" : side(a) < -.2 ? "end" : "middle").attr("dy", "0.32em").attr("font-weight", 600);
+		MultivariateKit.halo(ctx.text(labels, 11, "ink"), ctx).text((a) => MultivariateKit.trim(a.name, Math.max(40, halfWidth - Math.abs(a.x) - 10)));
+		ctx.set(labels, {
+			x: (a) => a.x + side(a) * 10,
+			y: (a) => a.y + Math.sin(a.angle) * 11
+		});
+	}
+};
+export { AnchoredProjection };

package/dist/charts/multivariate/AndrewsCurves.js

@@ -0,0 +1,193 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideNormal, WideTable } from "./WideTable.js";
+import { area, areaRadial, curveCardinal, curveCardinalClosed, deviation, extent, line, lineRadial, mean, range, scaleLinear } from "d3";
+// src/charts/multivariate/AndrewsCurves.ts
+var AndrewsBasis = /* @__PURE__ */ function(AndrewsBasis) {
+	AndrewsBasis["Classic"] = "classic";
+	AndrewsBasis["Rotated"] = "rotated";
+	return AndrewsBasis;
+}({});
+var AndrewsLayer = /* @__PURE__ */ function(AndrewsLayer) {
+	AndrewsLayer["Curves"] = "curves";
+	AndrewsLayer["Bands"] = "bands";
+	AndrewsLayer["Means"] = "means";
+	return AndrewsLayer;
+}({});
+var AndrewsDomain = /* @__PURE__ */ function(AndrewsDomain) {
+	AndrewsDomain["Turn"] = "full-turn";
+	AndrewsDomain["HalfTurn"] = "half-turn";
+	return AndrewsDomain;
+}({});
+var AndrewsFrame = /* @__PURE__ */ function(AndrewsFrame) {
+	AndrewsFrame["Cartesian"] = "cartesian";
+	AndrewsFrame["Polar"] = "polar";
+	return AndrewsFrame;
+}({});
+/** Turn each observation into a Fourier curve: close curves are close points, so clusters read as bundles. */
+var AndrewsCurves = class extends Chart2D {
+	static meta = {
+		id: "andrews-curves",
+		name: "Andrews curves",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Maps each observation to a finite Fourier series, so that similar observations trace bundles of similar curves.",
+		tags: [
+			"multivariate",
+			"fourier",
+			"functional"
+		],
+		sample: (seed) => MultivariateSample.wide(seed),
+		variants: {
+			layer: [
+				"curves",
+				"bands",
+				"means"
+			],
+			basis: ["classic", "rotated"],
+			normal: [WideNormal.ZScore, WideNormal.MinMax],
+			frame: ["cartesian", "polar"],
+			domain: ["full-turn", "half-turn"]
+		},
+		valid: (values) => values.frame === "cartesian" || values.domain === "full-turn"
+	};
+	defaults() {
+		return {
+			group: "group",
+			basis: "classic",
+			layer: "curves",
+			domain: "full-turn",
+			frame: "cartesian",
+			normal: WideNormal.ZScore
+		};
+	}
+	get polar() {
+		return this.options.frame === "polar";
+	}
+	plotMargin() {
+		return this.polar ? {
+			top: 8,
+			right: 16,
+			bottom: 12,
+			left: 16
+		} : {
+			top: 10,
+			right: 16,
+			bottom: 26,
+			left: 36
+		};
+	}
+	/** Series terms at `t`, indexed by dimension. */
+	terms(count, t) {
+		const trig = (d) => {
+			const k = Math.ceil(d / 2);
+			return d % 2 ? Math.sin(k * t) : Math.cos(k * t);
+		};
+		if (this.options.basis === "classic") return range(count).map((d) => d === 0 ? Math.SQRT1_2 : trig(d));
+		return range(count).map((d) => {
+			if (d === 0) return Math.SQRT1_2;
+			const k = Math.ceil(d / 2), sign = d % 2 ? 1 : -1;
+			return Math.SQRT1_2 * (Math.sin(k * t) + sign * Math.cos(k * t));
+		});
+	}
+	curves(table, ts) {
+		const records = table.complete;
+		const normal = table.normalised(this.options.normal, records);
+		const basis = ts.map((t) => this.terms(table.dimensions.length, t));
+		const traces = normal.map((row) => basis.map((terms) => terms.reduce((sum, term, d) => sum + term * row[d], 0)));
+		if (this.options.layer === "curves") return records.map((record, i) => ({
+			key: String(record.index),
+			group: record.group,
+			record,
+			y: traces[i]
+		}));
+		return table.groups.map((name) => {
+			const own = traces.filter((_, i) => records[i].group === name);
+			const y = ts.map((_, s) => mean(own, (trace) => trace[s]) ?? 0);
+			if (this.options.layer === "means") return {
+				key: name,
+				group: name,
+				y
+			};
+			const spread = ts.map((_, s) => deviation(own, (trace) => trace[s]) ?? 0);
+			return {
+				key: name,
+				group: name,
+				y,
+				y0: y.map((value, s) => value - spread[s]),
+				y1: y.map((value, s) => value + spread[s])
+			};
+		});
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (table.dimensions.length < 2 || !table.complete.length) return;
+		const turn = this.options.domain === "full-turn";
+		const ts = range(73).map((i) => turn ? -Math.PI + i / 72 * Math.PI * 2 : i / 72 * Math.PI);
+		const curves = this.curves(table, ts);
+		const [low = -1, high = 1] = extent(curves.flatMap((curve) => [
+			...curve.y,
+			...curve.y0 ?? [],
+			...curve.y1 ?? []
+		]));
+		const every = {
+			low,
+			high: high === low ? low + 1 : high
+		};
+		if (this.polar) this.drawPolar(ctx, table, curves, ts, every);
+		else this.drawCartesian(ctx, table, curves, ts, every);
+	}
+	paintCurves(ctx, table, curves, stroke, band) {
+		const color = (curve) => ctx.palette.color(curve.group);
+		const bands = ctx.marks("bands", "path", curves.filter((curve) => curve.y0), (curve) => curve.key).attr("fill", color).attr("fill-opacity", .18);
+		ctx.set(bands, { d: band });
+		const opacity = this.options.layer === "curves" ? Math.max(.2, Math.min(.6, 26 / curves.length)) : 1;
+		const lines = ctx.marks("lines", "path", curves, (curve) => curve.key).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-opacity", opacity);
+		ctx.set(lines, { d: stroke });
+		ctx.drawOn(lines);
+		ctx.hover(lines, (curve) => curve.record ? MultivariateKit.tooltip(table, curve.record, color(curve)) : {
+			title: curve.group,
+			color: color(curve),
+			rows: [["Peak", +Math.max(...curve.y).toFixed(2)]]
+		});
+	}
+	drawCartesian(ctx, table, curves, ts, { low, high }) {
+		const { width, height } = ctx.plot;
+		const x = scaleLinear([ts[0], ts[ts.length - 1]], [0, width]);
+		const y = scaleLinear([low, high], [height, 0]).nice();
+		MultivariateKit.axes(ctx, x, y, {
+			width,
+			height,
+			xTicks: 5
+		});
+		const stroke = (curve) => line((_, i) => x(ts[i]), (value) => y(value)).curve(curveCardinal)(curve.y) ?? "";
+		const band = (curve) => area().x((_, i) => x(ts[i])).y0((_, i) => y(curve.y0[i])).y1((_, i) => y(curve.y1[i])).curve(curveCardinal)(curve.y) ?? "";
+		this.paintCurves(ctx, table, curves, stroke, band);
+	}
+	drawPolar(ctx, table, curves, ts, { low, high }) {
+		const nest = ctx.nest(`translate(${ctx.plot.width / 2},${ctx.plot.height / 2})`);
+		const outer = Math.min(ctx.plot.width, ctx.plot.height) / 2;
+		const r = scaleLinear([low, high], [outer * .18, outer]);
+		const closed = ts.slice(0, -1);
+		const stroke = (curve) => lineRadial().angle((_, i) => closed[i] + Math.PI).radius((value) => r(value)).curve(curveCardinalClosed)(curve.y.slice(0, -1)) ?? "";
+		const band = (curve) => areaRadial().angle((_, i) => closed[i] + Math.PI).innerRadius((_, i) => r(curve.y0[i])).outerRadius((_, i) => r(curve.y1[i])).curve(curveCardinalClosed)(curve.y.slice(0, -1)) ?? "";
+		const levels = r.ticks(3).filter((level) => r(level) > 0);
+		const rings = nest.marks("rings", "circle", levels, (level) => level).attr("fill", "none").attr("stroke", ctx.theme.grid);
+		ctx.set(rings, {
+			cx: 0,
+			cy: 0,
+			r: (level) => r(level)
+		});
+		this.paintCurves(nest, table, curves, stroke, band);
+		const labels = nest.marks("ring-labels", "text", levels, (level) => level).attr("text-anchor", "start").text((level) => level);
+		MultivariateKit.halo(ctx.text(labels, 9.5, "muted"), ctx);
+		ctx.set(labels, {
+			x: 3,
+			y: (level) => -r(level) - 2
+		});
+	}
+};
+export { AndrewsBasis, AndrewsCurves, AndrewsDomain, AndrewsFrame, AndrewsLayer };