@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/multivariate/ScatterplotMatrix.js

@@ -0,0 +1,310 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateMath } from "./MultivariateMath.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideTable } from "./WideTable.js";
+import { area, bin, curveBasis, extent, line, max, mean, range, scaleLinear, symbol, symbolCircle, symbolDiamond, symbolSquare, symbolTriangle, symbolWye } from "d3";
+// src/charts/multivariate/ScatterplotMatrix.ts
+var SplomDiagonal = /* @__PURE__ */ function(SplomDiagonal) {
+	SplomDiagonal["Histogram"] = "histogram";
+	SplomDiagonal["Density"] = "density";
+	SplomDiagonal["Name"] = "name";
+	return SplomDiagonal;
+}({});
+var SplomUpper = /* @__PURE__ */ function(SplomUpper) {
+	SplomUpper["Mirror"] = "mirror";
+	SplomUpper["Correlation"] = "correlation";
+	SplomUpper["Empty"] = "empty";
+	return SplomUpper;
+}({});
+var SplomMarker = /* @__PURE__ */ function(SplomMarker) {
+	SplomMarker["Dot"] = "dot";
+	SplomMarker["GroupSymbol"] = "group-symbol";
+	return SplomMarker;
+}({});
+var SYMBOLS = [
+	symbolCircle,
+	symbolSquare,
+	symbolTriangle,
+	symbolDiamond,
+	symbolWye
+];
+/** Scan every pairwise relationship at once; hover a dot to find the same observation in every other cell. */
+var ScatterplotMatrix = class extends Chart2D {
+	static meta = {
+		id: "scatterplot-matrix",
+		name: "Scatterplot matrix",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lays out a scatter plot for every pair of measures in a grid, with each measure summarised on the diagonal.",
+		tags: [
+			"multivariate",
+			"splom",
+			"pairs plot",
+			"pairwise"
+		],
+		sample: (seed) => MultivariateSample.wide(seed).map(({ Cost: _cost, ...row }) => row),
+		variants: {
+			diagonal: [
+				"histogram",
+				"density",
+				"name"
+			],
+			upper: [
+				"mirror",
+				"correlation",
+				"empty"
+			],
+			marker: ["dot", "group-symbol"],
+			trend: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			group: "group",
+			diagonal: "histogram",
+			upper: "mirror",
+			marker: "dot",
+			trend: false,
+			maxDimensions: 6
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 12,
+			bottom: 16,
+			left: 30
+		};
+	}
+	draw(ctx) {
+		const full = WideTable.of(this.options);
+		const table = new WideTable(this.options.data, full.dimensions.slice(0, this.options.maxDimensions), this.options.group);
+		const k = table.dimensions.length;
+		if (!k || !table.records.length) return;
+		const { width, height } = ctx.plot;
+		const gap = 6, w = (width - gap * (k - 1)) / k, h = (height - gap * (k - 1)) / k;
+		const cells = range(k * k).map((i) => {
+			const row = Math.floor(i / k), column = i % k;
+			return {
+				row,
+				column,
+				x: column * (w + gap),
+				y: row * (h + gap)
+			};
+		});
+		const scaleX = table.dimensions.map((_, d) => scaleLinear(table.bounds(d), [3, w - 3]));
+		const scaleY = table.dimensions.map((_, d) => scaleLinear(table.bounds(d), [h - 3, 3]));
+		const scatter = (cell) => cell.row > cell.column || cell.row < cell.column && this.options.upper === "mirror";
+		const drawn = cells.filter((cell) => scatter(cell) || cell.row === cell.column || this.options.upper !== "empty");
+		const frames = ctx.marks("frames", "rect", drawn, (cell) => `${cell.row}/${cell.column}`).attr("fill", "none").attr("stroke", ctx.theme.grid).attr("rx", 2);
+		ctx.set(frames, {
+			x: (c) => c.x,
+			y: (c) => c.y,
+			width: w,
+			height: h
+		});
+		const diagonal = cells.filter((cell) => cell.row === cell.column);
+		this.drawDiagonal(ctx, table, diagonal, w, h);
+		if (this.options.upper === "correlation") this.drawCorrelations(ctx, table, cells.filter((cell) => cell.row < cell.column), w, h);
+		const scatters = cells.filter(scatter);
+		if (this.options.trend) this.drawTrends(ctx, table, scatters, scaleX, scaleY);
+		this.drawDots(ctx, table, scatters, scaleX, scaleY, Math.min(w, h));
+		this.drawEdges(ctx, table, cells, w, h);
+	}
+	drawDiagonal(ctx, table, cells, w, h) {
+		const kind = this.options.diagonal;
+		const summaries = cells.map((cell) => {
+			const values = table.column(cell.row);
+			const domain = table.bounds(cell.row);
+			return {
+				cell,
+				values,
+				x: scaleLinear(domain, [3, w - 3]),
+				bins: bin().domain(domain).thresholds(Math.max(5, Math.min(12, Math.floor(w / 9))))(values)
+			};
+		});
+		const bars = kind === "histogram" ? summaries.flatMap(({ cell, bins, x }) => {
+			const top = max(bins, (b) => b.length) || 1;
+			return bins.map((b, i) => ({
+				key: `${cell.row}/${i}`,
+				cell,
+				x: x(b.x0) + .5,
+				w: Math.max(1, x(b.x1) - x(b.x0) - 1.5),
+				h: b.length / top * (h - 18),
+				count: b.length,
+				low: b.x0,
+				high: b.x1
+			}));
+		}) : [];
+		const rects = ctx.marks("bins", "rect", bars, (d) => d.key).attr("fill", ctx.theme.axis).attr("rx", 1);
+		ctx.set(rects, {
+			x: (d) => d.cell.x + d.x,
+			width: (d) => d.w,
+			y: (d) => d.cell.y + h - 2 - d.h,
+			height: (d) => d.h
+		}, {
+			y: (d) => d.cell.y + h - 2,
+			height: 0
+		});
+		ctx.hover(rects, (d) => ({
+			title: `${+d.low.toFixed(1)} – ${+d.high.toFixed(1)}`,
+			rows: [["Count", d.count]]
+		}));
+		const densities = kind === "density" ? summaries.map(({ cell, values, x }) => {
+			const [low = 0, high = 1] = extent(values);
+			const spread = (high - low) / 6 || 1;
+			const grid = range(32).map((i) => low + (high - low) * i / 31);
+			const curve = grid.map((at) => mean(values, (value) => Math.exp(-(((value - at) / spread) ** 2) / 2)) ?? 0);
+			const top = max(curve) || 1;
+			return {
+				cell,
+				points: grid.map((at, i) => [cell.x + x(at), cell.y + h - 2 - curve[i] / top * (h - 18)]),
+				name: table.dimensions[cell.row]
+			};
+		}) : [];
+		const shape = area().x((p) => p[0]).y1((p) => p[1]).curve(curveBasis);
+		const fills = ctx.marks("density-fill", "path", densities, (d) => d.name).attr("fill", ctx.theme.axis).attr("fill-opacity", .55);
+		ctx.set(fills, { d: (d) => shape.y0(d.cell.y + h - 2)(d.points) ?? "" });
+		const lines = ctx.marks("density", "path", densities, (d) => d.name).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2);
+		ctx.set(lines, { d: (d) => line().curve(curveBasis)(d.points) ?? "" });
+		ctx.hover(lines, (d) => ({
+			title: d.name,
+			rows: [["Observations", d.cell ? table.column(d.cell.row).length : 0]]
+		}));
+		const centred = kind === "name";
+		const names = ctx.marks("names", "text", cells, (cell) => cell.row).attr("text-anchor", centred ? "middle" : "start").attr("dy", "0.32em").attr("font-weight", 600);
+		MultivariateKit.halo(ctx.text(names, 10.5, "ink"), ctx).text((cell) => MultivariateKit.trim(table.dimensions[cell.row], w - 6, 10.5));
+		ctx.set(names, {
+			x: (c) => c.x + (centred ? w / 2 : 4),
+			y: (c) => c.y + (centred ? h / 2 : 8)
+		});
+	}
+	drawCorrelations(ctx, table, cells, w, h) {
+		const items = cells.map((cell) => {
+			const a = table.records.map((record) => record.values[cell.column]), b = table.records.map((record) => record.values[cell.row]);
+			return {
+				cell,
+				r: MultivariateMath.correlation(a, b)
+			};
+		});
+		const reach = Math.min(w, h) / 2 - 3;
+		const fill = (d) => ctx.palette.diverging(d.r);
+		const discs = ctx.marks("correlation", "circle", items, (d) => `${d.cell.row}/${d.cell.column}`).attr("fill", fill);
+		ctx.set(discs, {
+			cx: (d) => d.cell.x + w / 2,
+			cy: (d) => d.cell.y + h / 2,
+			r: (d) => Math.max(1, Math.sqrt(Math.abs(d.r)) * reach)
+		}, { r: 0 });
+		ctx.hover(discs, (d) => ({
+			title: `${table.dimensions[d.cell.row]} × ${table.dimensions[d.cell.column]}`,
+			rows: [["Pearson r", +d.r.toFixed(3)]]
+		}));
+		const labels = ctx.marks("correlation-labels", "text", items, (d) => `${d.cell.row}/${d.cell.column}`).attr("text-anchor", "middle").attr("dy", "0.32em").text((d) => d.r.toFixed(2).replace("0.", "."));
+		ctx.text(labels, 10.5, "ink").attr("fill", (d) => Math.abs(d.r) > .45 ? MultivariateKit.inkOn(ctx, fill(d)) : ctx.theme.ink).style("pointer-events", "none");
+		ctx.set(labels, {
+			x: (d) => d.cell.x + w / 2,
+			y: (d) => d.cell.y + h / 2
+		});
+	}
+	drawTrends(ctx, table, cells, scaleX, scaleY) {
+		const lines = cells.flatMap((cell) => {
+			const pairs = table.records.flatMap((record) => {
+				const x = record.values[cell.column], y = record.values[cell.row];
+				return Number.isFinite(x) && Number.isFinite(y) ? [[x, y]] : [];
+			});
+			const fit = MultivariateMath.linearFit(pairs);
+			if (fit.length < 2) return [];
+			const place = (p) => [cell.x + scaleX[cell.column](p[0]), cell.y + scaleY[cell.row](p[1])];
+			const [a, b] = [place(fit[0]), place(fit[1])];
+			return [{
+				key: `${cell.row}/${cell.column}`,
+				a,
+				b
+			}];
+		});
+		const paths = ctx.marks("trends", "line", lines, (d) => d.key).attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(paths, {
+			x1: (d) => d.a[0],
+			y1: (d) => d.a[1],
+			x2: (d) => d.b[0],
+			y2: (d) => d.b[1]
+		});
+	}
+	drawDots(ctx, table, cells, scaleX, scaleY, side) {
+		const dots = cells.flatMap((cell) => table.records.flatMap((record) => {
+			const x = record.values[cell.column], y = record.values[cell.row];
+			if (!Number.isFinite(x) || !Number.isFinite(y)) return [];
+			return [{
+				record,
+				cell,
+				px: cell.x + scaleX[cell.column](x),
+				py: cell.y + scaleY[cell.row](y)
+			}];
+		}));
+		const radius = Math.max(1.6, Math.min(4, side / 18));
+		const key = (d) => `${d.record.index}/${d.cell.row}/${d.cell.column}`;
+		const color = (d) => ctx.palette.color(d.record.group);
+		const sized = this.options.marker === "group-symbol";
+		const shapes = (d) => symbol(SYMBOLS[table.groups.indexOf(d.record.group) % SYMBOLS.length], Math.PI * radius * radius * 1.1)() ?? "";
+		const marks = sized ? ctx.set(ctx.marks("marks", "path", dots, key), {
+			d: shapes,
+			transform: (d) => `translate(${d.px},${d.py})`
+		}) : ctx.set(ctx.marks("marks", "circle", dots, key), {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: radius
+		}, { r: 0 });
+		marks.attr("fill", color);
+		if (radius >= 3) marks.attr("stroke", ctx.theme.surface).attr("stroke-width", 1);
+		ctx.hover(marks, (d) => MultivariateKit.tooltip(table, d.record, color(d)));
+		marks.on("pointermove.link", (_, active) => {
+			marks.filter((d) => d.record === active.record).style("opacity", null);
+		});
+	}
+	drawEdges(ctx, table, cells, w, h) {
+		const k = table.dimensions.length;
+		if (Math.min(w, h) < 30) return;
+		const edges = cells.filter((cell) => cell.row === k - 1).flatMap((cell) => {
+			const [low, high] = table.bounds(cell.column);
+			return [{
+				key: `b${cell.column}a`,
+				text: this.short(low),
+				x: cell.x + 2,
+				y: cell.y + h + 11,
+				anchor: "start"
+			}, {
+				key: `b${cell.column}b`,
+				text: this.short(high),
+				x: cell.x + w - 2,
+				y: cell.y + h + 11,
+				anchor: "end"
+			}];
+		}).concat(cells.filter((cell) => cell.column === 0).flatMap((cell) => {
+			const [low, high] = table.bounds(cell.row);
+			return [{
+				key: `l${cell.row}a`,
+				text: this.short(low),
+				x: -4,
+				y: cell.y + h - 1,
+				anchor: "end"
+			}, {
+				key: `l${cell.row}b`,
+				text: this.short(high),
+				x: -4,
+				y: cell.y + 9,
+				anchor: "end"
+			}];
+		}));
+		ctx.text(ctx.marks("edges", "text", edges, (d) => d.key).attr("text-anchor", (d) => d.anchor).attr("x", (d) => d.x).attr("y", (d) => d.y).text((d) => d.text), 9.5, "muted");
+	}
+	short(value) {
+		return Intl.NumberFormat("en", {
+			notation: "compact",
+			maximumFractionDigits: 1
+		}).format(value);
+	}
+};
+export { ScatterplotMatrix, SplomDiagonal, SplomMarker, SplomUpper };

package/dist/charts/multivariate/StarCoordinates.js

@@ -0,0 +1,130 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { AnchoredProjection } from "./AnchoredProjection.js";
+import { ProjectionOverlay } from "./MultivariateKit.js";
+import { MultivariateMath } from "./MultivariateMath.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideNormal } from "./WideTable.js";
+import { deviation } from "d3";
+// src/charts/multivariate/StarCoordinates.ts
+var StarSpan = /* @__PURE__ */ function(StarSpan) {
+	StarSpan["Full"] = "full-circle";
+	StarSpan["Half"] = "half-circle";
+	return StarSpan;
+}({});
+var StarAxisLength = /* @__PURE__ */ function(StarAxisLength) {
+	StarAxisLength["Equal"] = "equal";
+	StarAxisLength["Spread"] = "spread";
+	StarAxisLength["Loading"] = "loading";
+	return StarAxisLength;
+}({});
+/** Sum each observation's measures as vectors from a shared origin: for a quick, tunable linear view of clusters. */
+var StarCoordinates = class extends AnchoredProjection {
+	static meta = {
+		id: "star-coordinates",
+		name: "Star coordinates",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Places each observation at the vector sum of its measures along axes radiating from one origin.",
+		tags: [
+			"multivariate",
+			"radial coordinates",
+			"linear projection"
+		],
+		sample: (seed) => MultivariateSample.wide(seed),
+		variants: {
+			span: ["full-circle", "half-circle"],
+			axisLength: [
+				"equal",
+				"spread",
+				"loading"
+			],
+			normal: [WideNormal.MinMax, WideNormal.ZScore],
+			overlay: [
+				ProjectionOverlay.Points,
+				ProjectionOverlay.Hulls,
+				ProjectionOverlay.Contours
+			]
+		}
+	};
+	defaults() {
+		return {
+			group: "group",
+			span: "full-circle",
+			axisLength: "equal",
+			normal: WideNormal.MinMax,
+			overlay: ProjectionOverlay.Points
+		};
+	}
+	lengths(table, values) {
+		const { axisLength } = this.options;
+		if (axisLength === "equal") return table.dimensions.map(() => 1);
+		const raw = axisLength === "spread" ? table.dimensions.map((_, d) => deviation(values.map((row) => row[d])) ?? 0) : (() => {
+			const { loadings } = MultivariateMath.pca(values, false);
+			return table.dimensions.map((_, d) => Math.hypot(loadings[0]?.[d] ?? 0, loadings[1]?.[d] ?? 0));
+		})();
+		const top = Math.max(...raw) || 1;
+		return raw.map((value) => Math.max(.2, value / top));
+	}
+	project(table, values, radius) {
+		const half = this.options.span === "half-circle";
+		const count = table.dimensions.length;
+		const lengths = this.lengths(table, values);
+		const unit = table.dimensions.map((name, d) => {
+			const angle = half ? -Math.PI + Math.PI * (d + .5) / count : -Math.PI / 2 + Math.PI * 2 * d / count;
+			return {
+				name,
+				angle,
+				x: Math.cos(angle) * lengths[d],
+				y: Math.sin(angle) * lengths[d]
+			};
+		});
+		const raw = values.map((row) => [row.reduce((sum, value, d) => sum + value * unit[d].x, 0), row.reduce((sum, value, d) => sum + value * unit[d].y, 0)]);
+		const reach = Math.max(...raw.map((p) => Math.hypot(p[0], p[1]))) / (Math.max(...unit.map((u) => Math.hypot(u.x, u.y))) || 1) || 1;
+		const tips = unit.map((u) => ({
+			...u,
+			x: u.x * reach,
+			y: u.y * reach
+		}));
+		const xs = [
+			...raw.map((p) => p[0]),
+			...tips.map((u) => u.x),
+			0
+		], ys = [
+			...raw.map((p) => p[1]),
+			...tips.map((u) => u.y),
+			0
+		];
+		const [left, right, top, bottom] = [
+			Math.min(...xs),
+			Math.max(...xs),
+			Math.min(...ys),
+			Math.max(...ys)
+		];
+		const scale = radius * 2 / Math.max(bottom - top || 1, (right - left || 1) / 1.5);
+		const ox = -((left + right) / 2) * scale, oy = -((top + bottom) / 2) * scale;
+		return {
+			anchors: tips.map((u) => ({
+				name: u.name,
+				angle: u.angle,
+				x: ox + u.x * scale,
+				y: oy + u.y * scale
+			})),
+			points: raw.map((p) => [ox + p[0] * scale, oy + p[1] * scale]),
+			centre: [ox, oy]
+		};
+	}
+	guides(ctx, anchors, _radius, [ox, oy]) {
+		const spokes = ctx.marks("spokes", "line", anchors, (anchor) => anchor.name).attr("stroke", ctx.theme.axis).attr("stroke-width", 1.5);
+		ctx.set(spokes, {
+			x1: ox,
+			y1: oy,
+			x2: (a) => a.x,
+			y2: (a) => a.y
+		}, {
+			x2: ox,
+			y2: oy
+		});
+	}
+};
+export { StarAxisLength, StarCoordinates, StarSpan };

package/dist/charts/multivariate/SurveyPlot.js

@@ -0,0 +1,159 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideTable } from "./WideTable.js";
+import { ascending, descending, extent, mean, range, scaleBand } from "d3";
+// src/charts/multivariate/SurveyPlot.ts
+var SurveyAlign = /* @__PURE__ */ function(SurveyAlign) {
+	SurveyAlign["Centre"] = "centre";
+	SurveyAlign["Start"] = "start";
+	return SurveyAlign;
+}({});
+var SurveySort = /* @__PURE__ */ function(SurveySort) {
+	SurveySort["Dimension"] = "first-dimension";
+	SurveySort["Group"] = "group";
+	SurveySort["Given"] = "given";
+	return SurveySort;
+}({});
+var SurveyResolution = /* @__PURE__ */ function(SurveyResolution) {
+	SurveyResolution["Rows"] = "rows";
+	SurveyResolution["Bins"] = "bins";
+	return SurveyResolution;
+}({});
+/** Sort a table by one measure and spot which others move with it, from silhouettes of bars. */
+var SurveyPlot = class extends Chart2D {
+	static meta = {
+		id: "survey-plot",
+		name: "Survey plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a column for each measure with one bar per row, so that sorting by a measure reveals which others follow it.",
+		tags: [
+			"multivariate",
+			"table lens",
+			"silhouette",
+			"dense table"
+		],
+		sample: (seed) => MultivariateSample.wide(seed),
+		variants: {
+			align: ["centre", "start"],
+			sort: [
+				"first-dimension",
+				"group",
+				"given"
+			],
+			resolution: ["rows", "bins"],
+			orientation: [Orientation.Vertical, Orientation.Horizontal]
+		}
+	};
+	defaults() {
+		return {
+			group: "group",
+			align: "centre",
+			sort: "first-dimension",
+			resolution: "rows",
+			orientation: Orientation.Vertical
+		};
+	}
+	get upright() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	plotMargin() {
+		return this.upright ? {
+			top: 2,
+			right: 16,
+			bottom: 6,
+			left: 16
+		} : {
+			top: 4,
+			right: 16,
+			bottom: 6,
+			left: 54
+		};
+	}
+	strips(table) {
+		const ceilings = table.dimensions.map((_, d) => {
+			const [low = 0, high = 1] = extent(table.column(d));
+			return {
+				low: Math.min(0, low),
+				high: high === Math.min(0, low) ? high + 1 : high
+			};
+		});
+		const share = (value, d) => Number.isFinite(value) ? (value - ceilings[d].low) / (ceilings[d].high - ceilings[d].low) : 0;
+		const records = [...table.records];
+		const { sort, resolution } = this.options;
+		if (sort === "first-dimension") records.sort((a, b) => descending(a.values[0], b.values[0]));
+		if (sort === "group") records.sort((a, b) => ascending(table.groups.indexOf(a.group), table.groups.indexOf(b.group)) || descending(a.values[0], b.values[0]));
+		if (resolution === "rows") return records.map((record, lane) => ({
+			key: String(record.index),
+			lane,
+			group: record.group,
+			record,
+			raw: record.values,
+			values: record.values.map(share)
+		}));
+		const bins = Math.min(records.length, 16);
+		return range(bins).map((lane) => {
+			const own = records.slice(Math.floor(lane * records.length / bins), Math.floor((lane + 1) * records.length / bins));
+			const raw = table.dimensions.map((_, d) => mean(own, (record) => record.values[d]) ?? NaN);
+			return {
+				key: `bin${lane}`,
+				lane,
+				group: own[0]?.group ?? "",
+				raw,
+				values: raw.map(share)
+			};
+		});
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (!table.dimensions.length || !table.records.length) return;
+		table.groups.forEach(ctx.palette.color);
+		const { width, height } = ctx.plot;
+		const head = this.upright ? 18 : 0;
+		const strips = this.strips(table);
+		const span = this.upright ? height - head : height;
+		const across = scaleBand(table.dimensions, [0, this.upright ? width : height]).paddingInner(.12);
+		const lane = scaleBand(strips.map((strip) => strip.key), this.upright ? [head, span + head] : [0, width]);
+		const thick = lane.bandwidth(), trim = thick >= 4 ? thick - 1.5 : Math.max(.8, thick - .4);
+		const room = across.bandwidth();
+		const centre = this.options.align === "centre";
+		const bars = strips.flatMap((strip) => strip.values.map((share, column) => ({
+			key: `${strip.key}/${column}`,
+			strip,
+			column,
+			share
+		})));
+		const start = (d) => across(table.dimensions[d.column]) + (centre ? room * (1 - d.share) / 2 : 0);
+		const color = (d) => ctx.palette.color(d.strip.group);
+		const marks = ctx.marks("bars", "rect", bars, (d) => d.key).attr("fill", color).attr("rx", Math.min(1.5, trim / 2));
+		ctx.set(marks, this.upright ? {
+			x: start,
+			width: (d) => Math.max(.5, room * d.share),
+			y: (d) => lane(d.strip.key),
+			height: trim
+		} : {
+			y: start,
+			height: (d) => Math.max(.5, room * d.share),
+			x: (d) => lane(d.strip.key),
+			width: trim
+		});
+		ctx.hover(marks, (d) => d.strip.record ? MultivariateKit.tooltip(table, d.strip.record, color(d)) : {
+			title: `Bin ${d.strip.lane + 1}`,
+			color: color(d),
+			rows: table.dimensions.map((name, i) => [name, +d.strip.raw[i].toFixed(2)])
+		});
+		const headers = ctx.marks("headers", "text", table.dimensions, (name) => name).attr("font-weight", 600).attr("dy", "0.32em").text((name) => MultivariateKit.trim(name, this.upright ? room : 50));
+		ctx.text(headers, 11, "ink").attr("text-anchor", this.upright ? "middle" : "end");
+		ctx.set(headers, this.upright ? {
+			x: (name) => across(name) + room / 2,
+			y: 7
+		} : {
+			x: -6,
+			y: (name) => across(name) + room / 2
+		});
+	}
+};
+export { SurveyAlign, SurveyPlot, SurveyResolution, SurveySort };