@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/multivariate/CrossfilterHistograms.js

@@ -0,0 +1,247 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MultivariateKit, PanelLayout } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideTable } from "./WideTable.js";
+import { area, bin, brushX, curveStepAfter, line, max, pointer, scaleLinear, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from "d3";
+// src/charts/multivariate/CrossfilterHistograms.ts
+var CrossfilterBinning = /* @__PURE__ */ function(CrossfilterBinning) {
+	CrossfilterBinning["Sturges"] = "sturges";
+	CrossfilterBinning["Scott"] = "scott";
+	CrossfilterBinning["FreedmanDiaconis"] = "freedman-diaconis";
+	return CrossfilterBinning;
+}({});
+var CrossfilterForm = /* @__PURE__ */ function(CrossfilterForm) {
+	CrossfilterForm["Bars"] = "bars";
+	CrossfilterForm["Area"] = "area";
+	CrossfilterForm["Steps"] = "steps";
+	return CrossfilterForm;
+}({});
+var RULES = {
+	["sturges"]: thresholdSturges,
+	["scott"]: thresholdScott,
+	["freedman-diaconis"]: thresholdFreedmanDiaconis
+};
+var HEAD = 16;
+var AXIS = 16;
+var GUTTER = 66;
+/** Explore a table by dragging across any histogram: the rest redraw to show only the selected rows. */
+var CrossfilterHistograms = class extends Chart2D {
+	static meta = {
+		id: "crossfilter-histograms",
+		name: "Crossfilter histograms",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Links a histogram per measure so that brushing a range in one filters the observations shown in all the others.",
+		tags: [
+			"multivariate",
+			"coordinated views",
+			"brushing",
+			"dashboard"
+		],
+		sample: (seed) => MultivariateSample.wide(seed, 320).map(({ Cost: _cost, ...row }) => row),
+		variants: {
+			form: [
+				"bars",
+				"area",
+				"steps"
+			],
+			layout: [
+				PanelLayout.Wrap,
+				PanelLayout.Row,
+				PanelLayout.Column
+			],
+			binning: [
+				"sturges",
+				"scott",
+				"freedman-diaconis"
+			],
+			preselect: [false, true]
+		}
+	};
+	ranges = /* @__PURE__ */ new Map();
+	seeded = false;
+	defaults() {
+		return {
+			group: "group",
+			binning: "sturges",
+			layout: PanelLayout.Wrap,
+			form: "bars",
+			preselect: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 2,
+			right: 16,
+			bottom: 6,
+			left: 16
+		};
+	}
+	legendItems() {
+		return [];
+	}
+	panes(ctx, table) {
+		const panels = MultivariateKit.panels(table.dimensions.length, ctx.plot.width, ctx.plot.height, this.options.layout, 14);
+		return table.dimensions.map((name, column) => {
+			const panel = panels[column];
+			const values = table.column(column);
+			const domain = table.bounds(column);
+			const stacked = this.options.layout === PanelLayout.Column;
+			const gutter = stacked ? GUTTER : 0;
+			const x = scaleLinear(domain, [gutter, panel.width]);
+			const count = Math.max(4, Math.min(Math.floor(panel.width / 7), Math.ceil(RULES[this.options.binning](values, domain[0], domain[1]))));
+			const thresholds = Array.from({ length: count + 1 }, (_, i) => domain[0] + (domain[1] - domain[0]) * i / count);
+			const bins = bin().domain(domain).thresholds(thresholds.slice(1, -1))(values);
+			const top = max(bins, (b) => b.length) || 1;
+			return {
+				name,
+				column,
+				panel,
+				gutter,
+				x,
+				thresholds,
+				bins,
+				y: scaleLinear([0, top], [panel.height - (stacked ? 2 : AXIS), stacked ? 2 : HEAD])
+			};
+		});
+	}
+	selected(table, skip) {
+		return table.records.filter((record) => table.dimensions.every((name, d) => {
+			const range = this.ranges.get(name);
+			return d === skip || !range || record.values[d] >= range[0] && record.values[d] <= range[1];
+		}));
+	}
+	counts(table, pane) {
+		return bin().domain(pane.x.domain()).thresholds(pane.thresholds.slice(1, -1))(table.column(pane.column, this.selected(table, pane.column))).map((b) => b.length);
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (!table.dimensions.length || !table.records.length) return;
+		if (this.options.preselect && !this.seeded) {
+			const [low, high] = table.bounds(0);
+			this.ranges.set(table.dimensions[0], [low + (high - low) * 2 / 3, high]);
+		}
+		this.seeded = true;
+		const panes = this.panes(ctx, table);
+		const color = ctx.palette.color("selected");
+		const nests = panes.map((pane) => ctx.nest(`translate(${pane.panel.x},${pane.panel.y})`, `pane-${pane.column}`));
+		const paintAll = (still) => panes.forEach((pane, i) => this.paintSelection(nests[i], table, pane, color, still));
+		panes.forEach((pane, i) => {
+			const nest = nests[i];
+			this.frame(nest, pane);
+			this.ghost(nest, pane);
+			this.paintSelection(nest, table, pane, color, false);
+			this.brush(nest, table, pane, paintAll);
+		});
+	}
+	frame(ctx, pane) {
+		const { panel, x, name, gutter } = pane;
+		const base = pane.y.range()[0];
+		const rule = ctx.marks("base", "line", [base]).attr("stroke", ctx.theme.axis);
+		ctx.set(rule, {
+			x1: gutter,
+			x2: panel.width,
+			y1: base,
+			y2: base
+		});
+		const [low, high] = x.domain();
+		const short = (value) => Intl.NumberFormat("en", {
+			notation: "compact",
+			maximumFractionDigits: 1
+		}).format(value);
+		const ticks = gutter ? [] : [{
+			text: short(low),
+			at: 0,
+			anchor: "start"
+		}, {
+			text: short(high),
+			at: panel.width,
+			anchor: "end"
+		}];
+		ctx.text(ctx.marks("ticks", "text", ticks, (d) => d.anchor).attr("x", (d) => d.at).attr("y", base + 12).attr("text-anchor", (d) => d.anchor).text((d) => d.text), 10);
+		ctx.text(ctx.marks("name", "text", [name]).attr("font-weight", 600).attr("y", 10).text(MultivariateKit.trim(name, gutter ? gutter - 8 : panel.width - 60)), 11, "ink");
+	}
+	ghost(ctx, pane) {
+		const { bins, x, y } = pane;
+		const base = y.range()[0];
+		const bars = ctx.marks("ghost", "rect", bins.filter((b) => b.x0 < b.x1), (b) => b.x0).attr("fill", ctx.theme.grid).attr("rx", 1.5);
+		ctx.set(bars, {
+			x: (b) => x(b.x0),
+			width: (b) => Math.max(1, x(b.x1) - x(b.x0) - 2),
+			y: (b) => y(b.length),
+			height: (b) => base - y(b.length)
+		}, {
+			y: base,
+			height: 0
+		});
+	}
+	/** Foreground counts: runs on first draw and on every brush move. */
+	paintSelection(ctx, table, pane, color, still) {
+		const { bins, x, y } = pane;
+		const counts = this.counts(table, pane);
+		const base = y.range()[0];
+		const form = this.options.form;
+		const usable = bins.map((b, i) => ({
+			low: b.x0,
+			high: b.x1,
+			count: counts[i] ?? 0
+		})).filter((b) => b.low < b.high);
+		const rects = ctx.marks("front-bars", "rect", form === "bars" ? usable : [], (b) => b.low).attr("fill", color).attr("rx", 1.5).style("pointer-events", "none");
+		const final = {
+			x: (b) => x(b.low),
+			width: (b) => Math.max(1, x(b.high) - x(b.low) - 2),
+			y: (b) => y(b.count),
+			height: (b) => base - y(b.count)
+		};
+		if (still) for (const [key, value] of Object.entries(final)) rects.attr(key, value);
+		else ctx.set(rects, final, {
+			y: base,
+			height: 0
+		}, 6);
+		const steps = [...usable.map((b) => ({
+			at: x(b.low),
+			count: b.count
+		})), {
+			at: x(usable[usable.length - 1]?.high ?? 0),
+			count: usable[usable.length - 1]?.count ?? 0
+		}];
+		const fillPath = form === "bars" ? [] : [area().x((s) => s.at).y0(base).y1((s) => y(s.count)).curve(curveStepAfter)(steps) ?? ""];
+		const outline = form === "bars" ? [] : [line().x((s) => s.at).y((s) => y(s.count)).curve(curveStepAfter)(steps) ?? ""];
+		ctx.marks("front-area", "path", form === "area" ? fillPath : []).attr("d", (d) => d).attr("fill", color).attr("fill-opacity", .75).style("pointer-events", "none");
+		ctx.marks("front-line", "path", form === "steps" ? outline : []).attr("d", (d) => d).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).style("pointer-events", "none");
+		const shown = table.column(pane.column, this.selected(table, -1)).length;
+		const total = table.column(pane.column).length;
+		ctx.text(ctx.marks("tally", "text", [`${shown} of ${total}`]).attr("text-anchor", pane.gutter ? "start" : "end").attr("x", pane.gutter ? 0 : pane.panel.width).attr("y", pane.gutter ? 23 : 10).text((d) => d), 10, "muted");
+	}
+	brush(ctx, table, pane, paintAll) {
+		const { panel, x, y, name, gutter } = pane;
+		const base = y.range()[0];
+		const brush = brushX().extent([[gutter, y.range()[1]], [panel.width, base]]).on("brush end", (event) => {
+			if (!event.sourceEvent) return;
+			const span = event.selection;
+			if (span) this.ranges.set(name, [x.invert(span[0]), x.invert(span[1])]);
+			else this.ranges.delete(name);
+			paintAll(true);
+		});
+		const layer = ctx.group("brush").call(brush);
+		const range = this.ranges.get(name);
+		layer.call(brush.move, range ? [x(range[0]), x(range[1])] : null);
+		layer.select(".selection").attr("fill", ctx.theme.ink).attr("fill-opacity", .08).attr("stroke", ctx.theme.axis);
+		layer.on("pointermove.tip", (event) => {
+			const value = x.invert(pointer(event, layer.node())[0]);
+			const hit = pane.bins.find((b) => value >= b.x0 && value < b.x1);
+			if (hit) this.tip(event, {
+				title: name,
+				color: ctx.palette.color("selected"),
+				rows: [
+					["Range", `${+hit.x0.toFixed(1)} – ${+hit.x1.toFixed(1)}`],
+					["Selected", this.counts(table, pane)[pane.bins.indexOf(hit)] ?? 0],
+					["All", hit.length]
+				]
+			});
+		}).on("pointerleave.tip", () => this.untip());
+	}
+};
+export { CrossfilterBinning, CrossfilterForm, CrossfilterHistograms };

package/dist/charts/multivariate/DimensionalStacking.js

@@ -0,0 +1,205 @@
+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 { WideTable } from "./WideTable.js";
+import { extent, max, rollup, scaleLinear } from "d3";
+// src/charts/multivariate/DimensionalStacking.ts
+var StackingOrder = /* @__PURE__ */ function(StackingOrder) {
+	StackingOrder["Given"] = "given";
+	StackingOrder["Swapped"] = "swapped";
+	StackingOrder["Reversed"] = "reversed";
+	return StackingOrder;
+}({});
+var StackingMark = /* @__PURE__ */ function(StackingMark) {
+	StackingMark["Tile"] = "tile";
+	StackingMark["Disc"] = "disc";
+	return StackingMark;
+}({});
+var StackingAspect = /* @__PURE__ */ function(StackingAspect) {
+	StackingAspect["Fill"] = "fill";
+	StackingAspect["Square"] = "square";
+	return StackingAspect;
+}({});
+var ORDERS = {
+	["given"]: [
+		0,
+		1,
+		2,
+		3
+	],
+	["swapped"]: [
+		2,
+		3,
+		0,
+		1
+	],
+	["reversed"]: [
+		1,
+		0,
+		3,
+		2
+	]
+};
+/** LeBlanc's stacking: nest two binned axes inside two others to read a four-way distribution on one flat grid. */
+var DimensionalStacking = class extends Chart2D {
+	static meta = {
+		id: "dimensional-stacking",
+		name: "Dimensional stacking",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Bins four measures and nests one pair of axes inside each cell of the other, showing a four-way distribution on a flat grid.",
+		tags: [
+			"multivariate",
+			"nested axes",
+			"leblanc",
+			"binned"
+		],
+		sample: (seed) => MultivariateSample.wide(seed, 420),
+		variants: {
+			bins: [
+				4,
+				3,
+				5
+			],
+			stackOrder: [
+				"given",
+				"swapped",
+				"reversed"
+			],
+			mark: ["tile", "disc"],
+			aspect: ["fill", "square"]
+		}
+	};
+	defaults() {
+		return {
+			group: "group",
+			bins: 4,
+			stackOrder: "given",
+			mark: "tile",
+			aspect: "fill"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 16,
+			bottom: 6,
+			left: 22
+		};
+	}
+	legendItems() {
+		return [];
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (table.dimensions.length < 4 || !table.complete.length) return;
+		const b = Math.max(2, Math.round(this.options.bins));
+		const order = ORDERS[this.options.stackOrder];
+		const names = order.map((d) => table.dimensions[d]);
+		const cut = order.map((d) => {
+			const [low, high] = table.bounds(d);
+			return (value) => Math.min(b - 1, Math.floor((value - low) / (high - low) * b));
+		});
+		const counts = rollup(table.complete, (own) => own.length, (record) => order.map((d, i) => cut[i](record.values[d])).join());
+		const { width, height } = ctx.plot;
+		const head = 18, foot = 16;
+		const outerGap = 5, innerGap = 1.5;
+		const fitW = (width - outerGap * (b - 1) - innerGap * b * (b - 1)) / (b * b), fitH = (height - head - foot - outerGap * (b - 1) - innerGap * b * (b - 1)) / (b * b);
+		const square = this.options.aspect === "square";
+		const w = square ? Math.min(fitW, fitH) : fitW, h = square ? Math.min(fitW, fitH) : fitH;
+		const blockW = b * w + (b - 1) * innerGap, blockH = b * h + (b - 1) * innerGap;
+		const tile = (i, j, cell, gap, block) => i * (block + outerGap) + j * (cell + gap);
+		const tiles = [];
+		for (let a = 0; a < b; a++) for (let c = 0; c < b; c++) for (let e = 0; e < b; e++) for (let f = 0; f < b; f++) {
+			const count = counts.get([
+				a,
+				c,
+				e,
+				f
+			].join()) ?? 0;
+			tiles.push({
+				key: `${a}${c}${e}${f}`,
+				count,
+				column: a * b + e,
+				row: c * b + f,
+				x: tile(a, e, w, innerGap, blockW),
+				y: head + tile(c, f, h, innerGap, blockH),
+				bins: [
+					a,
+					c,
+					e,
+					f
+				]
+			});
+		}
+		const top = max(tiles, (d) => d.count) || 1;
+		const blocks = Array.from({ length: b * b }, (_, i) => ({
+			x: i % b * (blockW + outerGap),
+			y: head + Math.floor(i / b) * (blockH + outerGap)
+		}));
+		const plates = ctx.marks("blocks", "rect", blocks, (_, i) => i).attr("fill", ctx.theme.grid).attr("fill-opacity", .45).attr("rx", 2);
+		ctx.set(plates, {
+			x: (d) => d.x - .5,
+			y: (d) => d.y - .5,
+			width: blockW + 1,
+			height: blockH + 1
+		});
+		const heat = scaleLinear([0, top], [.1, 1]);
+		const fill = (d) => ctx.palette.sequential(heat(d.count));
+		const tip = (d) => ({
+			title: `${d.count} observations`,
+			color: fill(d),
+			rows: names.map((name, i) => [name, `level ${d.bins[i] + 1} of ${b}`])
+		});
+		const filled = tiles.filter((d) => d.count > 0);
+		if (this.options.mark === "tile") {
+			const rects = ctx.marks("tiles", "rect", filled, (d) => d.key).attr("fill", fill).attr("rx", Math.min(1.5, w / 4));
+			ctx.set(rects, {
+				x: (d) => d.x,
+				y: (d) => d.y,
+				width: w,
+				height: h
+			}, {
+				width: 0,
+				height: 0
+			}, 1);
+			ctx.hover(rects, tip);
+		} else {
+			const radius = (d) => Math.max(.8, Math.sqrt(d.count / top) * (Math.min(w, h) / 2));
+			const discs = ctx.marks("tiles", "circle", filled, (d) => d.key).attr("fill", fill);
+			ctx.set(discs, {
+				cx: (d) => d.x + w / 2,
+				cy: (d) => d.y + h / 2,
+				r: radius
+			}, { r: 0 }, 1);
+			ctx.hover(discs, tip);
+		}
+		const span = (d) => extent(table.bounds(d));
+		const fmt = (value) => Math.abs(value) >= 100 ? value.toFixed(0) : value.toFixed(1);
+		const totalW = b * blockW + (b - 1) * outerGap, totalH = b * blockH + (b - 1) * outerGap;
+		const notes = [
+			{
+				key: "x",
+				text: MultivariateKit.trim(`${names[0]} ${fmt(span(order[0])[0])} → ${fmt(span(order[0])[1])}`, totalW),
+				transform: `translate(0,10)`,
+				anchor: "start"
+			},
+			{
+				key: "y",
+				text: MultivariateKit.trim(`← ${names[1]}`, totalH),
+				transform: `translate(-8,${head + totalH}) rotate(-90)`,
+				anchor: "start"
+			},
+			{
+				key: "inner",
+				text: MultivariateKit.trim(`Within each block: ${names[2]} →, ${names[3]} ↓`, width),
+				transform: `translate(0,${height - 3})`,
+				anchor: "start"
+			}
+		];
+		ctx.text(ctx.marks("notes", "text", notes, (d) => d.key).attr("text-anchor", (d) => d.anchor).attr("transform", (d) => d.transform).text((d) => d.text), 10.5);
+	}
+};
+export { DimensionalStacking, StackingAspect, StackingMark, StackingOrder };

package/dist/charts/multivariate/GlyphPlot.js

@@ -0,0 +1,212 @@
+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 { ascending, descending, scaleLinear, sum } from "d3";
+// src/charts/multivariate/GlyphPlot.ts
+var GlyphKind = /* @__PURE__ */ function(GlyphKind) {
+	GlyphKind["Star"] = "star";
+	GlyphKind["Whisker"] = "whisker";
+	GlyphKind["Petal"] = "petal";
+	GlyphKind["Profile"] = "profile";
+	GlyphKind["Face"] = "face";
+	return GlyphKind;
+}({});
+var GlyphLayout = /* @__PURE__ */ function(GlyphLayout) {
+	GlyphLayout["Grid"] = "grid";
+	GlyphLayout["Scatter"] = "scatter";
+	return GlyphLayout;
+}({});
+var GlyphOrder = /* @__PURE__ */ function(GlyphOrder) {
+	GlyphOrder["Given"] = "given";
+	GlyphOrder["Group"] = "group";
+	GlyphOrder["Magnitude"] = "magnitude";
+	return GlyphOrder;
+}({});
+var FACE = [
+	"Head",
+	"Eyes",
+	"Brows",
+	"Mouth",
+	"Nose"
+];
+var FLOOR = .1;
+var n2 = (value) => +value.toFixed(2);
+/** Give each observation its own small multivariate shape, then scan for families of similar shapes. */
+var GlyphPlot = class extends Chart2D {
+	static meta = {
+		id: "glyph-plot",
+		name: "Glyph plot",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Encodes every observation as a small composite shape, such as a star or a Chernoff face, so that similar rows look alike.",
+		tags: [
+			"multivariate",
+			"star plot",
+			"chernoff faces",
+			"icons",
+			"whisker"
+		],
+		sample: (seed) => MultivariateSample.wide(seed, 24),
+		variants: {
+			glyph: [
+				"star",
+				"whisker",
+				"petal",
+				"profile",
+				"face"
+			],
+			layout: ["grid", "scatter"],
+			order: [
+				"given",
+				"group",
+				"magnitude"
+			]
+		},
+		valid: (values) => values.layout === "grid" || values.order === "given"
+	};
+	defaults() {
+		return {
+			group: "group",
+			glyph: "star",
+			layout: "grid",
+			order: "given"
+		};
+	}
+	get scatter() {
+		return this.options.layout === "scatter";
+	}
+	get keyWidth() {
+		return this.size.width >= 300 ? 92 : 0;
+	}
+	plotMargin() {
+		return this.scatter ? {
+			top: 8,
+			right: 16,
+			bottom: 24,
+			left: 34
+		} : {
+			top: 6,
+			right: 16,
+			bottom: 10,
+			left: 16
+		};
+	}
+	outline(values, r) {
+		const n = values.length;
+		const polar = (i, length) => {
+			const angle = -Math.PI / 2 + i / n * Math.PI * 2;
+			return [n2(Math.cos(angle) * length), n2(Math.sin(angle) * length)];
+		};
+		switch (this.options.glyph) {
+			case "whisker": return `${values.map((value, i) => `M0,0L${polar(i, r * value)}`).join("")}M0,-1.5a1.5,1.5 0 1,0 .01,0`;
+			case "petal": {
+				const spread = Math.PI / n * .8;
+				return values.map((value, i) => {
+					const length = r * Math.sqrt(value), base = -Math.PI / 2 + i / n * Math.PI * 2;
+					const side = (turn) => `${n2(Math.cos(base + turn) * length * .7)},${n2(Math.sin(base + turn) * length * .7)}`;
+					return `M0,0Q${side(-spread)} ${polar(i, length)}Q${side(spread)} 0,0Z`;
+				}).join("");
+			}
+			case "profile": {
+				const w = r * 1.9 / n;
+				return values.map((value, i) => {
+					const x = n2(-r * .95 + i * w), h = n2(r * 1.8 * value), bar = n2(Math.max(1, w - 1.5));
+					return `M${x},${n2(r * .9)}v${-h}h${bar}v${h}Z`;
+				}).join("");
+			}
+			case "face": return this.face(values, r);
+			default: return `M${values.map((value, i) => polar(i, r * value)).join("L")}Z`;
+		}
+	}
+	face(values, r) {
+		const [head = .5, eyes = .5, brows = .5, mouth = .5, nose = .5] = values;
+		const rx = n2(r * (.62 + .36 * head)), ry = n2(r * .96);
+		const eye = n2(r * (.06 + .12 * eyes)), ex = n2(rx * .42), ey = n2(-r * .2);
+		const tilt = n2(r * .22 * (brows - .5)), by = n2(ey - r * .2);
+		const smile = n2(r * .7 * (mouth - .5)), mx = n2(rx * .5), my = n2(r * .48);
+		const circle = (cx, cy, radius) => `M${n2(cx - radius)},${cy}a${radius},${radius} 0 1,0 ${n2(radius * 2)},0a${radius},${radius} 0 1,0 ${n2(-radius * 2)},0`;
+		return [
+			`M${-rx},0a${rx},${ry} 0 1,0 ${n2(rx * 2)},0a${rx},${ry} 0 1,0 ${n2(-rx * 2)},0`,
+			circle(-ex, ey, eye),
+			circle(ex, ey, eye),
+			`M${n2(-ex - eye)},${n2(by + tilt)}L${n2(-ex + eye)},${n2(by - tilt)}M${n2(ex - eye)},${n2(by - tilt)}L${n2(ex + eye)},${n2(by + tilt)}`,
+			`M0,${n2(-r * .05)}v${n2(r * (.12 + .22 * nose))}`,
+			`M${-mx},${my}Q0,${n2(my + smile * 2)} ${mx},${my}`
+		].join("");
+	}
+	sorted(table) {
+		const records = table.complete;
+		const unit = table.normalised(WideNormal.MinMax, records);
+		const items = records.map((record, i) => ({
+			record,
+			values: unit[i].map((value) => FLOOR + .9 * value)
+		}));
+		if (this.options.order === "group") return items.sort((a, b) => ascending(table.groups.indexOf(a.record.group), table.groups.indexOf(b.record.group)));
+		if (this.options.order === "magnitude") return items.sort((a, b) => descending(sum(a.values), sum(b.values)));
+		return items;
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (!table.dimensions.length || !table.complete.length) return;
+		table.groups.forEach(ctx.palette.color);
+		const items = this.sorted(table);
+		const encoded = this.scatter && table.dimensions.length > 4 ? 2 : 0;
+		const names = table.dimensions.slice(encoded);
+		const glyphs = this.scatter ? this.placeScatter(ctx, table, items, encoded) : this.placeGrid(ctx, items);
+		const filled = this.options.glyph !== "whisker";
+		const color = (d) => ctx.palette.color(d.record.group);
+		const marks = ctx.marks("glyphs", "path", glyphs, (d) => d.record.index).attr("fill", (d) => filled ? color(d) : "none").attr("fill-opacity", .28).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+		ctx.set(marks, {
+			d: (d) => d.d,
+			transform: (d) => `translate(${d.x},${d.y})`
+		}, {}, 8);
+		ctx.hover(marks, (d) => MultivariateKit.tooltip(table, d.record, color(d)));
+		if (this.keyWidth) this.drawKey(ctx, names);
+	}
+	drawKey(ctx, names) {
+		const { glyph } = this.options;
+		const heading = {
+			["star"]: "Clockwise",
+			["whisker"]: "Clockwise",
+			["petal"]: "Clockwise",
+			["profile"]: "Left to right",
+			["face"]: "Features"
+		}[glyph];
+		const entries = glyph === "face" ? names.slice(0, FACE.length).map((name, i) => `${FACE[i]}: ${name}`) : names;
+		MultivariateKit.key(ctx, heading, entries, ctx.plot.width - this.keyWidth + 12, this.keyWidth - 12);
+	}
+	placeGrid(ctx, items) {
+		const width = ctx.plot.width - this.keyWidth, { height } = ctx.plot;
+		const columns = Math.max(1, Math.ceil(Math.sqrt(items.length * (width / height))));
+		const rows = Math.ceil(items.length / columns);
+		const cw = width / columns, ch = height / rows, r = Math.min(cw, ch) / 2 - 2;
+		return items.map(({ record, values }, i) => ({
+			record,
+			values,
+			x: cw * (i % columns) + cw / 2,
+			y: ch * Math.floor(i / columns) + ch / 2,
+			d: this.outline(values, r)
+		}));
+	}
+	placeScatter(ctx, table, items, encoded) {
+		const width = ctx.plot.width - this.keyWidth, { height } = ctx.plot;
+		const r = Math.max(7, Math.min(16, Math.min(width, height) / 12));
+		const x = scaleLinear(table.bounds(0), [r, width - r]).nice(), y = scaleLinear(table.bounds(Math.min(1, table.dimensions.length - 1)), [height - r, r]).nice();
+		MultivariateKit.axes(ctx, x, y, {
+			width,
+			height,
+			xTicks: 5
+		});
+		return items.map(({ record, values }) => ({
+			record,
+			values,
+			x: x(record.values[0]),
+			y: y(record.values[Math.min(1, record.values.length - 1)]),
+			d: this.outline(values.slice(encoded), r)
+		}));
+	}
+};
+export { GlyphKind, GlyphLayout, GlyphOrder, GlyphPlot };