@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/pictorial/ColorSwatchChart.js

@@ -0,0 +1,219 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { arc, ascending, color, descending, hierarchy, hsl, sum, treemap } from "d3";
+// src/charts/pictorial/ColorSwatchChart.ts
+var SwatchLayout = /* @__PURE__ */ function(SwatchLayout) {
+	SwatchLayout["Tiles"] = "tiles";
+	SwatchLayout["Strip"] = "strip";
+	SwatchLayout["Treemap"] = "treemap";
+	SwatchLayout["Bars"] = "bars";
+	SwatchLayout["Wheel"] = "wheel";
+	return SwatchLayout;
+}({});
+var SwatchSort = /* @__PURE__ */ function(SwatchSort) {
+	SwatchSort["Input"] = "input";
+	SwatchSort["Hue"] = "hue";
+	SwatchSort["Lightness"] = "lightness";
+	SwatchSort["Value"] = "value";
+	return SwatchSort;
+}({});
+var TAU = Math.PI * 2;
+/** Colour as the data itself: audit a palette or show the colour make-up of an image or product line. */
+var ColorSwatchChart = class extends Chart2D {
+	static meta = {
+		id: "color-swatch",
+		name: "Colour swatches",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Displays colours from the data as tiles, strips, bars or a hue wheel, sized by how much of each is used.",
+		tags: [
+			"palette",
+			"colour",
+			"color",
+			"proportion"
+		],
+		sample: (seed) => SampleData.words(seed).slice(0, 14).map((word, i) => ({
+			name: word.text,
+			value: word.value,
+			color: hsl(i * 137.508 % 360, .5 + Number(word.value) % 3 * .1, .36 + i % 4 * .1).formatHex()
+		})),
+		variants: {
+			layout: [
+				"tiles",
+				"strip",
+				"treemap",
+				"bars",
+				"wheel"
+			],
+			sort: [
+				"value",
+				"hue",
+				"lightness",
+				"input"
+			],
+			codes: [true, false]
+		},
+		valid: ({ layout, sort, codes }) => (layout !== "treemap" && layout !== "wheel" || sort === "value") && (layout !== "wheel" || codes === true)
+	};
+	defaults() {
+		return {
+			color: "color",
+			name: "name",
+			value: "value",
+			layout: "tiles",
+			sort: "value",
+			codes: true
+		};
+	}
+	swatches() {
+		const { data, color: color$1, name, value, sort } = this.options;
+		const list = data.flatMap((row, i) => {
+			const parsed = color(String(row[color$1] ?? ""));
+			if (!parsed) return [];
+			const shade = hsl(parsed);
+			return [{
+				key: `${i}`,
+				name: String(row[name] ?? row[color$1]),
+				fill: parsed.formatHex(),
+				hex: parsed.formatHex().toUpperCase(),
+				value: Math.abs(Number(row[value] ?? 1)) || 0,
+				hue: Number.isNaN(shade.h) ? 0 : shade.h,
+				lightness: shade.l,
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			}];
+		});
+		if (sort === "hue") list.sort((a, b) => ascending(a.hue, b.hue));
+		if (sort === "lightness") list.sort((a, b) => descending(a.lightness, b.lightness));
+		if (sort === "value") list.sort((a, b) => descending(a.value, b.value));
+		return list;
+	}
+	tiles(list, width, height) {
+		const columns = Math.max(1, Math.round(Math.sqrt(list.length * width / height)));
+		const lines = Math.ceil(list.length / columns), cellWidth = width / columns, cellHeight = height / lines;
+		const top = Math.max(...list.map((d) => d.value), 1);
+		list.forEach((d, i) => {
+			const side = Math.sqrt(d.value / top), wide = (cellWidth - 2) * side, tall = (cellHeight - 2) * side;
+			Object.assign(d, {
+				x: i % columns * cellWidth + (cellWidth - 2 - wide) / 2,
+				y: Math.floor(i / columns) * cellHeight + (cellHeight - 2 - tall) / 2,
+				width: wide,
+				height: tall
+			});
+		});
+	}
+	strip(list, width, height) {
+		const total = sum(list, (d) => d.value) || 1;
+		let x = 0;
+		for (const d of list) {
+			const share = d.value / total * width;
+			Object.assign(d, {
+				x,
+				y: height * .12,
+				width: Math.max(1, share - 2),
+				height: height * .76
+			});
+			x += share;
+		}
+	}
+	bars(list, width, height) {
+		const left = Math.min(width * .28, Math.max(...list.map((d) => TextMetrics.width(d.name, 11))) + 10);
+		const top = Math.max(...list.map((d) => d.value), 1), band = height / list.length;
+		list.forEach((d, i) => Object.assign(d, {
+			x: left,
+			y: i * band,
+			width: Math.max(2, (width - left - 4) * d.value / top),
+			height: Math.max(2, band - 2)
+		}));
+		return left;
+	}
+	tree(list, width, height) {
+		const root = treemap().size([width, height]).paddingInner(2)(hierarchy({ children: list.map((item) => ({ item })) }).sum((d) => d.item?.value ?? 0));
+		for (const leaf of root.leaves()) if (leaf.data.item) Object.assign(leaf.data.item, {
+			x: leaf.x0,
+			y: leaf.y0,
+			width: leaf.x1 - leaf.x0,
+			height: leaf.y1 - leaf.y0
+		});
+	}
+	wheel(ctx, list) {
+		const { width, height } = ctx.plot, radius = Math.min(width, height) / 2 - 2;
+		const top = Math.max(...list.map((d) => d.value), 1);
+		const ring = arc().innerRadius(radius * .32).outerRadius((d) => radius * (.42 + .58 * Math.sqrt(d.value / top))).cornerRadius(3).startAngle((d) => d.hue / 360 * TAU - .13).endAngle((d) => d.hue / 360 * TAU + .13);
+		const marks = ctx.marks("wheel", "path", list, (d) => d.key).attr("fill", (d) => d.fill).attr("transform", `translate(${width / 2},${height / 2})`);
+		ctx.set(marks, { d: (d) => ring(d) ?? "" }, { d: "" }, 15);
+		ctx.hover(marks, (d) => this.describe(d));
+	}
+	describe(d) {
+		return {
+			title: d.name,
+			color: d.fill,
+			rows: [["Colour", d.hex], [this.options.value, d.value]]
+		};
+	}
+	draw(ctx) {
+		const { layout, codes } = this.options;
+		const { width, height } = ctx.plot;
+		const list = this.swatches();
+		const wheel = layout === "wheel";
+		let left = 0;
+		if (list.length) {
+			if (layout === "tiles") this.tiles(list, width, height);
+			else if (layout === "strip") this.strip(list, width, height);
+			else if (layout === "bars") left = this.bars(list, width, height);
+			else if (layout === "treemap") this.tree(list, width, height);
+			else this.wheel(ctx, list);
+		}
+		if (!wheel) ctx.marks("wheel", "path", []);
+		const rects = ctx.marks("swatches", "rect", wheel ? [] : list, (d) => d.key).attr("rx", 4).attr("fill", (d) => d.fill);
+		ctx.set(rects, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.width,
+			height: (d) => d.height
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: 0,
+			height: (d) => d.height
+		}, 15);
+		ctx.hover(rects, (d) => this.describe(d));
+		const names = layout === "bars" ? list : [];
+		ctx.text(ctx.marks("names", "text", names, (d) => d.key).attr("x", left - 8).attr("y", (d) => d.y + d.height / 2 + 4).attr("text-anchor", "end").text((d) => TextMetrics.clip(d.name, 11, left - 8)));
+		const lines = wheel ? [] : list.flatMap((d) => {
+			const name = TextMetrics.clip(d.name, 11, d.width - 10), code = codes && TextMetrics.width(d.hex, 9.5) <= d.width - 10 && d.height >= (layout === "bars" ? 11 : 34);
+			if (layout === "bars") return code ? [{
+				d,
+				text: d.hex,
+				size: 9.5,
+				x: d.x + 8,
+				y: d.y + d.height / 2 + 3.5,
+				key: "hex"
+			}] : [];
+			if (name !== d.name || d.height < 20) return [];
+			const bottom = d.y + d.height - 8;
+			return [{
+				d,
+				text: name,
+				size: 11,
+				x: d.x + 6,
+				y: code ? bottom - 12 : bottom,
+				key: "name"
+			}, ...code ? [{
+				d,
+				text: d.hex,
+				size: 9.5,
+				x: d.x + 6,
+				y: bottom,
+				key: "hex"
+			}] : []];
+		});
+		ctx.marks("swatch-text", "text", lines, (line) => `${line.d.key}/${line.key}`).attr("x", (line) => line.x).attr("y", (line) => line.y).attr("pointer-events", "none").attr("font-size", (line) => line.size).attr("font-family", ctx.theme.fontFamily).attr("fill", (line) => TextMetrics.ink(ctx, line.d.fill)).text((line) => line.text);
+	}
+};
+export { ColorSwatchChart, SwatchLayout, SwatchSort };

package/dist/charts/pictorial/ConcordanceChart.js

@@ -0,0 +1,209 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Corpus } from "./Corpus.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { bin, max, scaleLinear } from "d3";
+// src/charts/pictorial/ConcordanceChart.ts
+var ConcordanceView = /* @__PURE__ */ function(ConcordanceView) {
+	ConcordanceView["Lines"] = "lines";
+	ConcordanceView["Dispersion"] = "dispersion";
+	ConcordanceView["Combined"] = "combined";
+	return ConcordanceView;
+}({});
+var ConcordanceSort = /* @__PURE__ */ function(ConcordanceSort) {
+	ConcordanceSort["Right"] = "right";
+	ConcordanceSort["Left"] = "left";
+	ConcordanceSort["Position"] = "position";
+	return ConcordanceSort;
+}({});
+var ConcordanceDispersion = /* @__PURE__ */ function(ConcordanceDispersion) {
+	ConcordanceDispersion["Ticks"] = "ticks";
+	ConcordanceDispersion["Bins"] = "bins";
+	return ConcordanceDispersion;
+}({});
+var SIZE = 11;
+var LINE = 17;
+var SPACE = 3.4;
+/** Keyword-in-context: the corpus linguist's view of how a term is really used, aligned on the term. */
+var ConcordanceChart = class extends Chart2D {
+	static meta = {
+		id: "concordance",
+		name: "Concordance",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Aligns every occurrence of a word with its context, and plots where the top terms occur across the text.",
+		tags: [
+			"kwic",
+			"keyword in context",
+			"lexical dispersion",
+			"text"
+		],
+		sample: (seed) => Corpus.sample(seed),
+		variants: {
+			view: [
+				"lines",
+				"combined",
+				"dispersion"
+			],
+			sort: [
+				"right",
+				"left",
+				"position"
+			],
+			window: [
+				4,
+				2,
+				3
+			],
+			dispersion: ["ticks", "bins"]
+		},
+		valid: ({ view, sort, window, dispersion }) => {
+			if (view === "lines") return dispersion === "ticks";
+			if (view === "dispersion") return sort === "right" && window === 4;
+			return true;
+		}
+	};
+	defaults() {
+		return {
+			text: "text",
+			view: "lines",
+			sort: "right",
+			window: 4,
+			dispersion: "ticks"
+		};
+	}
+	hits(sentences, word) {
+		const { sort, window } = this.options;
+		let index = 0;
+		const hits = sentences.flatMap((tokens, s) => tokens.flatMap((token, i) => token === word ? [{
+			left: tokens.slice(Math.max(0, i - window), i),
+			right: tokens.slice(i + 1, i + 1 + window),
+			position: s + i / tokens.length,
+			index: index++
+		}] : []));
+		const key = (hit) => sort === "right" ? hit.right.join(" ") : [...hit.left].reverse().join(" ");
+		return sort === "position" ? hits : hits.sort((a, b) => key(a).localeCompare(key(b)) || a.index - b.index);
+	}
+	tokens(hits, word, width, height) {
+		const center = width / 2, half = TextMetrics.width(word, SIZE, 600) / 2 + 6;
+		const rows = Math.max(1, Math.floor(height / LINE));
+		return hits.slice(0, rows).flatMap((hit, row) => {
+			const y = (row + .5) * LINE + 4;
+			const out = [];
+			let x = center + half;
+			hit.right.forEach((text, i) => {
+				const w = TextMetrics.width(text, SIZE);
+				if (x + w > width) return;
+				out.push({
+					key: `${hit.index}r${i}`,
+					text,
+					x,
+					y,
+					anchor: "start",
+					near: i === 0 && !Corpus.isStop(text)
+				});
+				x += w + SPACE;
+			});
+			x = center - half;
+			[...hit.left].reverse().forEach((text, i) => {
+				const w = TextMetrics.width(text, SIZE);
+				if (x - w < 0) return;
+				out.push({
+					key: `${hit.index}l${i}`,
+					text,
+					x,
+					y,
+					anchor: "end",
+					near: i === 0 && !Corpus.isStop(text)
+				});
+				x -= w + SPACE;
+			});
+			return out;
+		});
+	}
+	drawLines(ctx, sentences, word, width, height) {
+		const hits = this.hits(sentences, word);
+		const shown = hits.slice(0, Math.max(1, Math.floor(height / LINE)));
+		const tokens = this.tokens(hits, word, width, height);
+		const marks = ctx.marks("context", "text", tokens, (d) => d.key).attr("text-anchor", (d) => d.anchor).text((d) => d.text);
+		ctx.text(marks, SIZE, "secondary").attr("fill", (d) => d.near ? ctx.theme.ink : ctx.theme.inkMuted);
+		ctx.set(marks, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const keys = ctx.marks("keys", "text", shown, (hit) => hit.index).attr("text-anchor", "middle").attr("font-weight", 600).text(word);
+		ctx.text(keys, SIZE, "ink");
+		ctx.set(keys, {
+			x: width / 2,
+			y: (_, i) => (i + .5) * LINE + 4
+		}, {}, 12);
+		ctx.hover(keys, (hit) => ({
+			title: word,
+			rows: [
+				["Line", Math.floor(hit.position) + 1],
+				["Before", hit.left.join(" ") || "—"],
+				["After", hit.right.join(" ") || "—"]
+			]
+		}));
+	}
+	drawDispersion(ctx, sentences, x0, width, height, foot) {
+		const terms = Corpus.keywords(sentences).slice(0, Math.max(1, Math.min(8, Math.floor(height / 24)))).map(([term]) => term);
+		const gutter = Math.min(width * .42, Math.max(...terms.map((term) => TextMetrics.width(term, SIZE))) + 8);
+		const span = sentences.length;
+		const x = scaleLinear([0, span], [x0 + gutter, x0 + width]);
+		const band = (height - foot) / terms.length;
+		const places = terms.map((term) => sentences.flatMap((tokens, s) => tokens.flatMap((token, i) => token === term ? [s + i / tokens.length] : [])));
+		ctx.text(ctx.marks("terms", "text", terms, String).attr("x", x0 + gutter - 8).attr("y", (_, i) => band * (i + .5) + 4).attr("text-anchor", "end").text((term) => TextMetrics.clip(term, SIZE, gutter - 8)));
+		ctx.marks("lanes", "line", terms, String).attr("x1", x(0)).attr("x2", x(span)).attr("y1", (_, i) => band * (i + .5)).attr("y2", (_, i) => band * (i + .5)).attr("stroke", ctx.theme.grid);
+		const color = ctx.palette.color("Occurrences");
+		const ticks = this.options.dispersion === "ticks";
+		const hits = ticks ? terms.flatMap((term, t) => places[t].map((place, i) => ({
+			term,
+			t,
+			place,
+			i
+		}))) : [];
+		const marks = ctx.marks("ticks", "line", hits, (d) => `${d.term}/${d.i}`).attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("x1", (d) => x(d.place)).attr("x2", (d) => x(d.place)).attr("y1", (d) => band * (d.t + .5) - Math.min(band * .36, 9)).attr("y2", (d) => band * (d.t + .5) + Math.min(band * .36, 9));
+		ctx.hover(marks, (d) => ({
+			title: d.term,
+			color,
+			rows: [["Line", Math.floor(d.place) + 1]]
+		}));
+		const binner = bin().domain([0, span]).thresholds(Math.max(4, Math.floor((width - gutter) / 18)));
+		const bins = ticks ? [] : terms.flatMap((term, t) => binner(places[t]).map((group, i) => ({
+			term,
+			t,
+			i,
+			x0: group.x0 ?? 0,
+			x1: group.x1 ?? 0,
+			count: group.length
+		})));
+		const tallest = max(bins, (d) => d.count) || 1;
+		const bars = ctx.marks("bins", "rect", bins, (d) => `${d.term}/${d.i}`).attr("fill", color).attr("rx", 1.5);
+		ctx.set(bars, {
+			x: (d) => x(d.x0),
+			width: (d) => Math.max(1, x(d.x1) - x(d.x0) - 2),
+			y: (d) => band * (d.t + .5) + band * .4 - band * .8 * d.count / tallest,
+			height: (d) => band * .8 * d.count / tallest
+		});
+		ctx.hover(bars, (d) => ({
+			title: d.term,
+			color,
+			rows: [["Occurrences", d.count]]
+		}));
+		ctx.text(ctx.marks("span", "text", foot ? ["start of text", "end of text"] : [], String).attr("x", (_, i) => i ? x(span) : x(0)).attr("y", height - 3).attr("text-anchor", (_, i) => i ? "end" : "start").text(String), 10, "muted");
+	}
+	draw(ctx) {
+		const { text, keyword, view } = this.options;
+		const { width, height } = ctx.plot;
+		const sentences = Corpus.sentences(this.options.data, text);
+		const wanted = keyword?.toLowerCase();
+		const word = wanted && sentences.some((tokens) => tokens.includes(wanted)) ? wanted : Corpus.keywords(sentences)[0]?.[0];
+		if (!word) return;
+		const combined = view === "combined";
+		if (view !== "dispersion") this.drawLines(ctx, sentences, word, combined ? width * .62 : width, height);
+		if (view !== "lines") this.drawDispersion(ctx, sentences, combined ? width * .66 : 0, combined ? width * .34 : width, height, combined ? 0 : 16);
+	}
+};
+export { ConcordanceChart, ConcordanceDispersion, ConcordanceSort, ConcordanceView };

package/dist/charts/pictorial/Corpus.js

@@ -0,0 +1,49 @@
+import { SampleData } from "../../data/SampleData.js";
+import { randomLcg } from "d3";
+// src/charts/pictorial/Corpus.ts
+var STOP = new Set("a an and are as at be but by every for from has in is it its of on or that the their this to was were which with".split(" "));
+var VERBS = [
+	"shapes",
+	"reveals",
+	"drives",
+	"follows",
+	"explains"
+];
+var FORMS = [
+	(a, b, c, verb) => `the ${a} of the ${b} ${verb} the ${c}`,
+	(a, b, c, verb) => `every ${a} ${verb} the ${b} of the ${c}`,
+	(a, b, c, verb) => `the ${a} and the ${b} ${verb} every ${c}`,
+	(a, b, c) => `a ${a} of ${b} and ${c}`,
+	(a, b, c, verb) => `${a} ${verb} the ${b} and the ${c}`
+];
+/** Tokenises rows of free text for the text-analysis charts. */
+var Corpus = class {
+	static tokens(text) {
+		return text.toLowerCase().match(/[\p{L}\p{N}][\p{L}\p{N}'-]*/gu) ?? [];
+	}
+	static isStop(token) {
+		return STOP.has(token);
+	}
+	static sentences(rows, field) {
+		return rows.map((row) => this.tokens(String(row[field] ?? ""))).filter((tokens) => tokens.length > 0);
+	}
+	/** Content words by descending frequency, ties alphabetical. */
+	static keywords(sentences) {
+		const counts = /* @__PURE__ */ new Map();
+		for (const token of sentences.flat()) if (!STOP.has(token)) counts.set(token, (counts.get(token) ?? 0) + 1);
+		return [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+	}
+	/** `{ text, value }` sentences reshaped from `SampleData.words`, heavy words recurring as they would in prose. */
+	static sample(seed, count = 64) {
+		const words = SampleData.words(seed).sort((a, b) => +b.value - +a.value).slice(0, 12).map((word) => String(word.text));
+		const random = randomLcg(seed * .37 % 1);
+		const pick = () => words[Math.floor(random() ** 2 * words.length)];
+		return Array.from({ length: count }, () => {
+			return {
+				text: FORMS[Math.floor(random() * FORMS.length)](pick(), pick(), pick(), VERBS[Math.floor(random() * VERBS.length)]),
+				value: 1
+			};
+		});
+	}
+};
+export { Corpus };

package/dist/charts/pictorial/FaceGlyphs.js

@@ -0,0 +1,125 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlyphChart, PictorialGlyphLayout, PictorialGlyphOrder } from "./GlyphChart.js";
+import { TextMetrics } from "./TextMetrics.js";
+// src/charts/pictorial/FaceGlyphs.ts
+var FaceHead = /* @__PURE__ */ function(FaceHead) {
+	FaceHead["Oval"] = "oval";
+	FaceHead["Egg"] = "egg";
+	FaceHead["Jowl"] = "jowl";
+	FaceHead["Block"] = "block";
+	return FaceHead;
+}({});
+var FaceDetail = /* @__PURE__ */ function(FaceDetail) {
+	FaceDetail["Minimal"] = "minimal";
+	FaceDetail["Standard"] = "standard";
+	FaceDetail["Full"] = "full";
+	return FaceDetail;
+}({});
+var FEATURES = [
+	"face width",
+	"eye size",
+	"eye spacing",
+	"brow slant",
+	"smile",
+	"nose length",
+	"gaze",
+	"ear size"
+];
+/** Chernoff faces: use when readers must spot unusual rows of many variables at a glance. */
+var FaceGlyphs = class extends GlyphChart {
+	static meta = {
+		id: "face-glyphs",
+		name: "Chernoff faces",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Encodes each row as a cartoon face whose features follow its values, so outliers stand out as odd expressions.",
+		tags: [
+			"chernoff",
+			"glyph",
+			"multivariate"
+		],
+		sample: (seed) => GlyphChart.wideSample(seed),
+		variants: {
+			head: [
+				"oval",
+				"egg",
+				"jowl",
+				"block"
+			],
+			detail: [
+				"standard",
+				"minimal",
+				"full"
+			],
+			layout: [
+				PictorialGlyphLayout.Grid,
+				PictorialGlyphLayout.Hex,
+				PictorialGlyphLayout.Spiral,
+				PictorialGlyphLayout.Scatter,
+				PictorialGlyphLayout.Groups
+			],
+			order: [
+				PictorialGlyphOrder.Input,
+				PictorialGlyphOrder.Score,
+				PictorialGlyphOrder.Similarity
+			]
+		},
+		valid: ({ layout, order }) => layout !== PictorialGlyphLayout.Scatter || order === PictorialGlyphOrder.Input
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			head: "oval",
+			detail: "standard"
+		};
+	}
+	headPath(width, height) {
+		const top = {
+			["oval"]: 1,
+			["egg"]: 1.08,
+			["jowl"]: .82,
+			["block"]: 1
+		}[this.options.head];
+		const chin = {
+			["oval"]: 1,
+			["egg"]: .68,
+			["jowl"]: 1.14,
+			["block"]: 1
+		}[this.options.head];
+		if (this.options.head === "block") {
+			const c = width * .42;
+			return `M${-width + c},${-height}H${width - c}Q${width},${-height} ${width},${-height + c}V${height - c}Q${width},${height} ${width - c},${height}H${-width + c}Q${-width},${height} ${-width},${height - c}V${-height + c}Q${-width},${-height} ${-width + c},${-height}Z`;
+		}
+		const k = .56;
+		return `M0,${-height}C${width * k * top},${-height} ${width * top},${-height * k} ${width},0C${width * chin},${height * k} ${width * k * chin},${height} 0,${height}C${-width * k * chin},${height} ${-width * chin},${height * k} ${-width},0C${-width * top},${-height * k} ${-width * k * top},${-height} 0,${-height}Z`;
+	}
+	drawGlyph(ctx, cell, { glyph, radius }) {
+		const { detail } = this.options;
+		const feature = (index) => glyph.values.length ? glyph.values[index % glyph.values.length] : .5;
+		const r = radius, standard = detail !== "minimal", full = detail === "full";
+		const width = r * (full ? .62 : .7) + r * .22 * feature(0), height = r * (1 - .1 * feature(0));
+		const fill = this.glyphFill(ctx, glyph), ink = TextMetrics.ink(ctx, fill);
+		const stroke = Math.max(1, r * .07);
+		const eyeY = -height * .22, eyeX = width * (.3 + .28 * feature(2)), eye = r * (.08 + .13 * feature(1));
+		const ears = full ? [-1, 1].map((side) => `M${side * width * .94},${-r * .2}a${r * (.12 + .14 * feature(7))},${r * .24} 0 1 ${side > 0 ? 1 : 0} 0,${r * .42}Z`) : [];
+		ctx.marks("ears", "path", ears, String, cell).attr("d", String).attr("fill", fill);
+		ctx.marks("head", "path", [this.headPath(width, height)], (_, i) => i, cell).attr("d", String).attr("fill", fill);
+		ctx.marks("eyes", "ellipse", [-1, 1], String, cell).attr("cx", (side) => side * eyeX).attr("cy", eyeY).attr("rx", eye).attr("ry", eye * 1.1).attr("fill", ink);
+		const look = (feature(6) - .5) * eye * .9;
+		ctx.marks("pupils", "circle", full ? [-1, 1] : [], String, cell).attr("cx", (side) => side * eyeX + look).attr("cy", eyeY).attr("r", eye * .48).attr("fill", fill);
+		const slant = (feature(3) - .5) * r * .36;
+		const browY = eyeY - eye - r * .1;
+		const brows = standard ? [-1, 1].map((side) => `M${side * (eyeX - r * .2)},${browY + slant}L${side * (eyeX + r * .2)},${browY - slant}`) : [];
+		ctx.marks("brows", "path", brows, String, cell).attr("d", String).attr("fill", "none").attr("stroke", ink).attr("stroke-width", stroke).attr("stroke-linecap", "round");
+		const noseTop = eyeY + r * .06, noseBottom = noseTop + r * (.12 + .26 * feature(5));
+		const nose = standard ? [`M0,${noseTop}L${r * .09},${noseBottom}L${-r * .03},${noseBottom}`] : [];
+		ctx.marks("nose", "path", nose, String, cell).attr("d", String).attr("fill", "none").attr("stroke", ink).attr("stroke-width", stroke * .8).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		const mouthY = height * .56, reach = width * .46, smile = (feature(4) - .5) * r * .62;
+		ctx.marks("mouth", "path", [`M${-reach},${mouthY}Q0,${mouthY + smile} ${reach},${mouthY}`], (_, i) => i, cell).attr("d", String).attr("fill", "none").attr("stroke", ink).attr("stroke-width", stroke).attr("stroke-linecap", "round");
+	}
+	glyphRows(glyph) {
+		return super.glyphRows(glyph).map(([field, value], i) => [`${field} · ${FEATURES[i % FEATURES.length]}`, value]);
+	}
+};
+export { FaceDetail, FaceGlyphs, FaceHead };