@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/pictorial/SentimentStrip.js

@@ -0,0 +1,178 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Corpus } from "./Corpus.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { area, curveMonotoneX, curveMonotoneY, curveStepAfter, curveStepBefore, group, line, max, mean } from "d3";
+// src/charts/pictorial/SentimentStrip.ts
+var SentimentMark = /* @__PURE__ */ function(SentimentMark) {
+	SentimentMark["Bars"] = "bars";
+	SentimentMark["Tiles"] = "tiles";
+	SentimentMark["Ribbon"] = "ribbon";
+	SentimentMark["Steps"] = "steps";
+	return SentimentMark;
+}({});
+/** Narrative arc of a text: polarity unit by unit, the shape of a review, speech or chat. */
+var SentimentStrip = class extends Chart2D {
+	static meta = {
+		id: "sentiment-strip",
+		name: "Sentiment strip",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Runs polarity along a text as bars, tiles or a ribbon, showing how the tone rises and falls across it.",
+		tags: [
+			"polarity",
+			"narrative arc",
+			"text",
+			"diverging"
+		],
+		sample: (seed) => {
+			const series = SampleData.timeSeries(seed, 40, 3);
+			const sentences = Corpus.sample(seed, series.length);
+			return series.map((row, i) => {
+				const previous = series[i - 1];
+				const change = previous && previous.series === row.series ? Number(row.value) - Number(previous.value) : 0;
+				return {
+					text: sentences[i].text,
+					value: +change.toFixed(2),
+					group: row.series
+				};
+			});
+		},
+		variants: {
+			mark: [
+				"bars",
+				"tiles",
+				"ribbon",
+				"steps"
+			],
+			window: [
+				1,
+				5,
+				11
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			faceted: [true, false]
+		},
+		valid: ({ mark, window }) => mark !== "tiles" || window === 1
+	};
+	defaults() {
+		return {
+			text: "text",
+			value: "value",
+			group: "group",
+			mark: "bars",
+			window: 1,
+			orientation: Orientation.Horizontal,
+			faceted: true
+		};
+	}
+	lanes(length) {
+		const { data, text, value, group: group$1, faceted, window } = this.options;
+		const rows = data.filter((row) => Number.isFinite(Number(row[value])));
+		const sets = faceted ? [...group(rows, (row) => String(row[group$1] ?? "Text"))] : [["Text", rows]];
+		const thick = length / Math.max(1, sets.length);
+		const lanes = sets.map(([name, members], l) => {
+			const values = members.map((row) => Number(row[value]));
+			const half = Math.floor(window / 2);
+			return {
+				name,
+				units: members.map((row, index) => ({
+					text: String(row[text] ?? ""),
+					value: values[index],
+					index,
+					lane: name,
+					smooth: mean(values.slice(Math.max(0, index - half), index + half + 1)) ?? 0
+				})),
+				offset: l * thick,
+				thick
+			};
+		});
+		const reach = max(lanes, (lane) => max(lane.units, (unit) => Math.abs(unit.smooth))) || 1;
+		for (const unit of lanes.flatMap((lane) => lane.units)) unit.smooth /= reach;
+		return lanes;
+	}
+	draw(ctx) {
+		const { mark, orientation, value } = this.options;
+		const { width, height } = ctx.plot;
+		const horizontal = orientation === Orientation.Horizontal;
+		const lanes = this.lanes(horizontal ? height : width);
+		const showNames = lanes.length > 1;
+		const gutter = horizontal && showNames ? Math.min(width * .2, Math.max(...lanes.map((lane) => TextMetrics.width(lane.name, 11))) + 10) : 0;
+		const head = !horizontal && showNames ? 16 : 0;
+		const pitch = (horizontal ? width - gutter : height - head) / (max(lanes, (lane) => lane.units.length) || 1);
+		const point = (lane, unit, amount) => {
+			const middle = lane.offset + lane.thick / 2, swing = amount * (lane.thick - 8) / 2;
+			return horizontal ? [gutter + (unit.index + .5) * pitch, middle - swing] : [middle + swing, head + (unit.index + .5) * pitch];
+		};
+		const color = (d) => ctx.palette.diverging(Math.sign(d.smooth) * (mark === "tiles" ? .2 + .8 * Math.sqrt(Math.abs(d.smooth)) : .85));
+		const tip = (d) => ({
+			title: d.text || d.lane,
+			color: color(d),
+			rows: [[value, d.value]]
+		});
+		const units = lanes.flatMap((lane) => lane.units.map((unit) => ({
+			lane,
+			unit
+		})));
+		const gap = pitch > 3 ? 1 : 0;
+		const box = ({ lane, unit }) => {
+			const tiles = mark === "tiles";
+			const [, y] = point(lane, unit, unit.smooth), [cx] = point(lane, unit, 0), [, zero] = point(lane, unit, 0);
+			if (horizontal) return tiles ? {
+				x: cx - pitch / 2,
+				width: Math.max(1, pitch - gap),
+				y: lane.offset + 4,
+				height: lane.thick - 8
+			} : {
+				x: cx - pitch / 2,
+				width: Math.max(1, pitch - gap),
+				y: Math.min(y, zero),
+				height: Math.max(1, Math.abs(y - zero))
+			};
+			const [x, along] = point(lane, unit, unit.smooth), [base] = point(lane, unit, 0);
+			return tiles ? {
+				y: along - pitch / 2,
+				height: Math.max(1, pitch - gap),
+				x: lane.offset + 4,
+				width: lane.thick - 8
+			} : {
+				y: along - pitch / 2,
+				height: Math.max(1, pitch - gap),
+				x: Math.min(x, base),
+				width: Math.max(1, Math.abs(x - base))
+			};
+		};
+		const blocky = mark === "bars" || mark === "tiles";
+		const rects = ctx.marks("units", "rect", blocky ? units : [], (d) => `${d.lane.name}/${d.unit.index}`).attr("fill", (d) => color(d.unit)).attr("rx", Math.min(1.5, pitch / 3));
+		ctx.set(rects, {
+			x: (d) => box(d).x,
+			y: (d) => box(d).y,
+			width: (d) => box(d).width,
+			height: (d) => box(d).height
+		}, {}, 3);
+		ctx.hover(rects, (d) => tip(d.unit));
+		const sides = mark === "ribbon" ? lanes.flatMap((lane) => [1, -1].map((sign) => ({
+			lane,
+			sign
+		}))) : [];
+		const ribbon = (lane, sign) => {
+			const clipped = (unit) => sign > 0 ? Math.max(0, unit.smooth) : Math.min(0, unit.smooth);
+			return (horizontal ? area().curve(curveMonotoneX).x((u) => point(lane, u, 0)[0]).y0((u) => point(lane, u, 0)[1]).y1((u) => point(lane, u, clipped(u))[1]) : area().curve(curveMonotoneY).y((u) => point(lane, u, 0)[1]).x0((u) => point(lane, u, 0)[0]).x1((u) => point(lane, u, clipped(u))[0]))(lane.units) ?? "";
+		};
+		const fills = ctx.marks("ribbons", "path", sides, (d) => `${d.lane.name}/${d.sign}`).attr("d", (d) => ribbon(d.lane, d.sign)).attr("fill", (d) => ctx.palette.diverging(d.sign * .85));
+		ctx.hover(fills, (d) => ({
+			title: d.lane.name,
+			color: ctx.palette.diverging(d.sign * .85),
+			rows: [[d.sign > 0 ? "Positive units" : "Negative units", d.lane.units.filter((u) => u.smooth * d.sign > 0).length]]
+		}));
+		const stepLine = (lane) => line().curve(horizontal ? curveStepAfter : curveStepBefore).x((u) => point(lane, u, u.smooth)[0]).y((u) => point(lane, u, u.smooth)[1])(lane.units) ?? "";
+		const steps = ctx.marks("steps", "path", mark === "steps" ? lanes : [], (lane) => lane.name).attr("d", stepLine).attr("fill", "none").attr("stroke", ctx.palette.color(value)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.drawOn(steps);
+		const baselines = mark === "tiles" ? [] : lanes;
+		ctx.marks("zero", "line", baselines, (lane) => lane.name).attr("stroke", ctx.theme.axis).attr("x1", (lane) => horizontal ? gutter : lane.offset + lane.thick / 2).attr("x2", (lane) => horizontal ? width : lane.offset + lane.thick / 2).attr("y1", (lane) => horizontal ? lane.offset + lane.thick / 2 : head).attr("y2", (lane) => horizontal ? lane.offset + lane.thick / 2 : height);
+		ctx.text(ctx.marks("names", "text", showNames ? lanes : [], (lane) => lane.name).attr("x", (lane) => horizontal ? gutter - 8 : lane.offset + lane.thick / 2).attr("y", (lane) => horizontal ? lane.offset + lane.thick / 2 + 4 : 11).attr("text-anchor", horizontal ? "end" : "middle").text((lane) => TextMetrics.clip(lane.name, 11, horizontal ? gutter - 8 : lane.thick - 4)));
+	}
+};
+export { SentimentMark, SentimentStrip };

package/dist/charts/pictorial/ShapeGrid.js

@@ -0,0 +1,198 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { mean, scaleBand, sum, symbol } from "d3";
+// src/charts/pictorial/ShapeGrid.ts
+var ShapeEncoding = /* @__PURE__ */ function(ShapeEncoding) {
+	ShapeEncoding["Area"] = "area";
+	ShapeEncoding["Level"] = "level";
+	ShapeEncoding["Tilt"] = "tilt";
+	ShapeEncoding["Count"] = "count";
+	return ShapeEncoding;
+}({});
+var ShapeOrder = /* @__PURE__ */ function(ShapeOrder) {
+	ShapeOrder["Input"] = "input";
+	ShapeOrder["Totals"] = "totals";
+	ShapeOrder["Seriated"] = "seriated";
+	return ShapeOrder;
+}({});
+var ARRANGE = [
+	[],
+	[[0, 0]],
+	[[-.5, -.5], [.5, .5]],
+	[
+		[-.5, .5],
+		[0, -.5],
+		[.5, .5]
+	],
+	[
+		[-.5, -.5],
+		[.5, -.5],
+		[-.5, .5],
+		[.5, .5]
+	],
+	[
+		[-.5, -.5],
+		[.5, -.5],
+		[0, 0],
+		[-.5, .5],
+		[.5, .5]
+	]
+];
+/** Top and bottom reach of each d3 symbol from its centre, per √area. */
+var EXTENT = {
+	[SymbolKind.Circle]: [.564, .564],
+	[SymbolKind.Square]: [.5, .5],
+	[SymbolKind.Diamond]: [.93, .93],
+	[SymbolKind.Triangle]: [.877, .439],
+	[SymbolKind.Star]: [.944, .764],
+	[SymbolKind.Wye]: [.5, .696],
+	[SymbolKind.Cross]: [.671, .671]
+};
+var instances = 0;
+/** A matrix of shapes: unlike a heatmap it stays readable in print and for colour-blind readers. */
+var ShapeGrid = class extends Chart2D {
+	static meta = {
+		id: "shape-grid",
+		name: "Shape grid",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Matrix,
+		description: "Encodes a matrix with the area, fill level, tilt or count of a shape in each cell, and sign with colour.",
+		tags: [
+			"bertin",
+			"bubble matrix",
+			"dot matrix",
+			"glyph"
+		],
+		sample: (seed) => SampleData.matrix(seed, 8, 10),
+		variants: {
+			shape: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond,
+				SymbolKind.Triangle,
+				SymbolKind.Star,
+				SymbolKind.Wye,
+				SymbolKind.Cross
+			],
+			encoding: [
+				"area",
+				"level",
+				"tilt",
+				"count"
+			],
+			order: [
+				"input",
+				"totals",
+				"seriated"
+			]
+		},
+		valid: ({ shape, encoding }) => {
+			if (encoding === "tilt") return shape === SymbolKind.Triangle || shape === SymbolKind.Wye;
+			return encoding !== "level" || shape !== SymbolKind.Wye && shape !== SymbolKind.Cross;
+		}
+	};
+	clipId = `shape-grid-${++instances}`;
+	defaults() {
+		return {
+			shape: SymbolKind.Circle,
+			encoding: "area",
+			order: "input"
+		};
+	}
+	table() {
+		const { rows = [], columns = [], values = [] } = this.options.data ?? {};
+		return {
+			columns: ["row", ...columns],
+			rows: rows.map((row, r) => [row, ...values[r] ?? []])
+		};
+	}
+	arranged() {
+		const { data, order } = this.options;
+		const rows = (data?.rows ?? []).map((_, i) => i), columns = (data?.columns ?? []).map((_, i) => i);
+		if (order === "input") return {
+			rows,
+			columns
+		};
+		const cell = (r, c) => data.values[r]?.[c] ?? 0;
+		const rowMean = (r) => mean(columns, (c) => cell(r, c)) ?? 0, columnMean = (c) => mean(rows, (r) => cell(r, c)) ?? 0;
+		if (order === "totals") return {
+			rows: rows.sort((a, b) => rowMean(b) - rowMean(a)),
+			columns: columns.sort((a, b) => columnMean(b) - columnMean(a))
+		};
+		return {
+			rows: this.chain(rows, (a, b) => sum(columns, (c) => (cell(a, c) - cell(b, c)) ** 2)),
+			columns: this.chain(columns, (a, b) => sum(rows, (r) => (cell(r, a) - cell(r, b)) ** 2))
+		};
+	}
+	/** Nearest-neighbour chain from the first index, so like sits beside like. */
+	chain(indices, distance) {
+		const left = [...indices], chain = left.splice(0, 1);
+		while (left.length) {
+			const last = chain[chain.length - 1];
+			chain.push(...left.splice(left.reduce((best, index, i) => distance(last, index) < distance(last, left[best]) ? i : best, 0), 1));
+		}
+		return chain;
+	}
+	draw(ctx) {
+		const { data, shape, encoding } = this.options;
+		const { rows, columns } = this.arranged();
+		if (!rows.length || !columns.length) return;
+		const left = Math.min(ctx.plot.width * .2, Math.max(...data.rows.map((name) => TextMetrics.width(name, 11))) + 8), top = 16;
+		const x = scaleBand(columns.map(String), [left, ctx.plot.width]), y = scaleBand(rows.map(String), [top, ctx.plot.height]);
+		const reach = Math.max(1e-9, ...data.values.flat().map((value) => Math.abs(value || 0)));
+		const pitch = Math.min(x.bandwidth(), y.bandwidth()), full = (pitch - 2) ** 2 * .72;
+		const cells = rows.flatMap((r) => columns.map((c) => ({
+			row: data.rows[r],
+			column: data.columns[c],
+			value: data.values[r]?.[c] ?? 0,
+			x: x(String(c)) + x.bandwidth() / 2,
+			y: y(String(r)) + y.bandwidth() / 2
+		})));
+		const color = (d) => ctx.palette.diverging(Math.sign(d.value) * (.4 + .6 * Math.abs(d.value) / reach));
+		const glyph = (size) => symbol(Scales.symbol(shape), size)() ?? "";
+		const share = (d) => Math.abs(d.value) / reach;
+		const tip = (d) => ({
+			title: `${d.row} · ${d.column}`,
+			color: color(d),
+			rows: [["Value", d.value]]
+		});
+		const place = (d, spin = 0, scale = 1) => `translate(${d.x},${d.y}) rotate(${spin}) scale(${scale})`;
+		ctx.marks("clip", "clipPath", encoding === "level" ? [glyph(full)] : [], String).attr("id", this.clipId).selectAll("path").data((d) => [d]).join("path").attr("d", String);
+		const track = encoding === "level" ? cells : [];
+		ctx.marks("track", "path", track, (d) => `${d.row}/${d.column}`).attr("d", glyph(full)).attr("fill", ctx.theme.grid).attr("transform", (d) => place(d));
+		const [high, low] = EXTENT[shape].map((reachOf) => reachOf * Math.sqrt(full));
+		const levels = ctx.marks("levels", "rect", track, (d) => `${d.row}/${d.column}`).attr("fill", color).attr("clip-path", `url(#${this.clipId})`).attr("x", -pitch).attr("width", pitch * 2).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		ctx.set(levels, {
+			y: (d) => low - (low + high) * share(d),
+			height: (d) => (low + high) * share(d)
+		}, {
+			y: low,
+			height: 0
+		}, 2);
+		ctx.hover(levels, tip);
+		const counted = encoding === "count";
+		const marks = encoding === "level" ? [] : counted ? [] : cells;
+		const shapes = ctx.marks("shapes", "path", marks, (d) => `${d.row}/${d.column}`).attr("fill", color).attr("d", (d) => glyph(encoding === "tilt" ? full * .6 : Math.max(10, full * share(d))));
+		ctx.set(shapes, { transform: (d) => place(d, encoding === "tilt" ? d.value / reach * 90 : 0) }, { transform: (d) => place(d, 0, 0) }, 2);
+		ctx.hover(shapes, tip);
+		const dots = counted ? cells.flatMap((cell) => (ARRANGE[Math.max(1, Math.round(share(cell) * 5))] ?? []).map(([dx, dy], i) => ({
+			cell,
+			i,
+			x: cell.x + dx * pitch * .6,
+			y: cell.y + dy * pitch * .6
+		}))) : [];
+		const small = glyph(Math.max(9, (pitch * .3) ** 2));
+		const counts = ctx.marks("counts", "path", dots, (d) => `${d.cell.row}/${d.cell.column}/${d.i}`).attr("d", small).attr("fill", (d) => color(d.cell));
+		ctx.set(counts, { transform: (d) => `translate(${d.x},${d.y}) scale(1)` }, { transform: (d) => `translate(${d.x},${d.y}) scale(0)` });
+		ctx.hover(counts, (d) => tip(d.cell));
+		const bandY = y.bandwidth(), bandX = x.bandwidth();
+		const stepY = Math.max(1, Math.ceil(13 / bandY)), stepX = Math.max(1, Math.ceil(Math.max(...data.columns.map((name) => TextMetrics.width(name, 11))) / bandX + .2));
+		ctx.text(ctx.marks("row-labels", "text", rows.filter((_, i) => i % stepY === 0), String).attr("x", left - 6).attr("y", (r) => y(String(r)) + bandY / 2 + 4).attr("text-anchor", "end").text((r) => TextMetrics.clip(data.rows[r], 11, left - 6)));
+		ctx.text(ctx.marks("column-labels", "text", columns.filter((_, i) => i % stepX === 0), String).attr("x", (c) => x(String(c)) + bandX / 2).attr("y", 10).attr("text-anchor", "middle").text((c) => data.columns[c]));
+	}
+};
+export { ShapeEncoding, ShapeGrid, ShapeOrder };

package/dist/charts/pictorial/StarGlyphs.js

@@ -0,0 +1,89 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlyphChart, PictorialGlyphLayout, PictorialGlyphOrder } from "./GlyphChart.js";
+import { arc, curveCardinalClosed, curveLinearClosed, lineRadial } from "d3";
+// src/charts/pictorial/StarGlyphs.ts
+var StarShape = /* @__PURE__ */ function(StarShape) {
+	StarShape["Polygon"] = "polygon";
+	StarShape["Rounded"] = "rounded";
+	StarShape["Petals"] = "petals";
+	StarShape["Whiskers"] = "whiskers";
+	return StarShape;
+}({});
+var TAU = Math.PI * 2;
+/** Star glyphs: compare the profile of many rows across the same fields, one small radar per row. */
+var StarGlyphs = class extends GlyphChart {
+	static meta = {
+		id: "star-glyphs",
+		name: "Star glyphs",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws each row as a small star whose spokes follow its values, for comparing the shape of many profiles.",
+		tags: [
+			"radar",
+			"kiviat",
+			"glyph",
+			"multivariate"
+		],
+		sample: (seed) => GlyphChart.wideSample(seed),
+		variants: {
+			shape: [
+				"polygon",
+				"rounded",
+				"petals",
+				"whiskers"
+			],
+			frame: [true, false],
+			hub: [0, .25],
+			layout: [
+				PictorialGlyphLayout.Grid,
+				PictorialGlyphLayout.Hex,
+				PictorialGlyphLayout.Spiral,
+				PictorialGlyphLayout.Scatter,
+				PictorialGlyphLayout.Groups
+			],
+			order: [
+				PictorialGlyphOrder.Input,
+				PictorialGlyphOrder.Score,
+				PictorialGlyphOrder.Similarity
+			]
+		},
+		valid: ({ layout, order, hub }) => layout !== PictorialGlyphLayout.Scatter && hub === 0 || order === PictorialGlyphOrder.Input
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			shape: "polygon",
+			frame: true,
+			hub: 0
+		};
+	}
+	outline(values, radius) {
+		const { shape, hub } = this.options;
+		const n = values.length || 1;
+		const reach = (value) => radius * (hub + (1 - hub) * value);
+		if (shape === "petals") {
+			const wedge = arc().innerRadius(radius * hub).cornerRadius(1.5);
+			return values.map((value, i) => wedge({
+				outerRadius: radius * (hub + (1 - hub) * Math.sqrt(value)),
+				startAngle: i / n * TAU + .05,
+				endAngle: (i + 1) / n * TAU - .05
+			}) ?? "").join("");
+		}
+		return lineRadial().angle((_, i) => i / n * TAU).radius(reach).curve(shape === "rounded" ? curveCardinalClosed.tension(.5) : curveLinearClosed)(values) ?? "";
+	}
+	drawGlyph(ctx, cell, { glyph, radius }) {
+		const { shape, frame, hub } = this.options;
+		const fill = this.glyphFill(ctx, glyph), n = glyph.values.length || 1;
+		const tip = (value, i, r) => [Math.sin(i / n * TAU) * r * value, -Math.cos(i / n * TAU) * r * value];
+		ctx.marks("ring", "circle", frame ? [radius] : [], String, cell).attr("r", radius).attr("fill", "none").attr("stroke", ctx.theme.grid);
+		ctx.marks("spokes", "line", frame ? glyph.values : [], (_, i) => i, cell).attr("x1", 0).attr("y1", 0).attr("x2", (_, i) => tip(1, i, radius)[0]).attr("y2", (_, i) => tip(1, i, radius)[1]).attr("stroke", ctx.theme.grid);
+		const whiskers = shape === "whiskers";
+		ctx.marks("outline", "path", whiskers ? [] : [this.outline(glyph.values, radius)], (_, i) => i, cell).attr("d", String).attr("fill", fill).attr("fill-opacity", shape === "petals" ? 1 : .28).attr("stroke", shape === "petals" ? "none" : fill).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		const reach = (value) => hub + (1 - hub) * value;
+		ctx.marks("whisker", "line", whiskers ? glyph.values : [], (_, i) => i, cell).attr("stroke", fill).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("x1", (_, i) => tip(hub, i, radius)[0]).attr("y1", (_, i) => tip(hub, i, radius)[1]).attr("x2", (value, i) => tip(reach(value), i, radius)[0]).attr("y2", (value, i) => tip(reach(value), i, radius)[1]);
+		ctx.marks("hub", "circle", whiskers ? [] : hub > 0 ? [hub] : [], String, cell).attr("r", radius * hub).attr("fill", ctx.theme.surface);
+		ctx.marks("ends", "circle", whiskers ? glyph.values : [], (_, i) => i, cell).attr("fill", fill).attr("r", Math.max(1.5, radius * .07)).attr("cx", (value, i) => tip(reach(value), i, radius)[0]).attr("cy", (value, i) => tip(reach(value), i, radius)[1]);
+	}
+};
+export { StarGlyphs, StarShape };

package/dist/charts/pictorial/TagChart.js

@@ -0,0 +1,181 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { WordChart } from "./WordChart.js";
+import { ascending, scaleLinear } from "d3";
+// src/charts/pictorial/TagChart.ts
+var TagStyle = /* @__PURE__ */ function(TagStyle) {
+	TagStyle["Plain"] = "plain";
+	TagStyle["Pill"] = "pill";
+	TagStyle["Heat"] = "heat";
+	TagStyle["Meter"] = "meter";
+	return TagStyle;
+}({});
+var TagSort = /* @__PURE__ */ function(TagSort) {
+	TagSort["Alphabetical"] = "alphabetical";
+	TagSort["Weight"] = "weight";
+	return TagSort;
+}({});
+var TagAlign = /* @__PURE__ */ function(TagAlign) {
+	TagAlign["Left"] = "left";
+	TagAlign["Center"] = "center";
+	TagAlign["Justify"] = "justify";
+	return TagAlign;
+}({});
+var PAD = {
+	["plain"]: 2,
+	["pill"]: 9,
+	["heat"]: 9,
+	["meter"]: 3
+};
+/** Readable tag list: words flow in lines like text, so they scan alphabetically, unlike a word cloud. */
+var TagChart = class extends WordChart {
+	static meta = {
+		id: "tag-chart",
+		name: "Tag chart",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Flows weighted tags in reading order, so terms can be scanned and compared without a packed cloud.",
+		tags: [
+			"tag cloud",
+			"labels",
+			"chips",
+			"text"
+		],
+		sample: (seed) => SampleData.words(seed),
+		variants: {
+			tagStyle: [
+				"plain",
+				"pill",
+				"heat",
+				"meter"
+			],
+			sort: ["alphabetical", "weight"],
+			align: [
+				"left",
+				"center",
+				"justify"
+			],
+			scale: [ScaleKind.Sqrt, ScaleKind.Linear]
+		},
+		valid: ({ tagStyle, scale }) => scale === ScaleKind.Sqrt || tagStyle === "plain" || tagStyle === "pill"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			tagStyle: "plain",
+			sort: "alphabetical",
+			align: "left",
+			scale: ScaleKind.Sqrt
+		};
+	}
+	sized(words, largest) {
+		const { tagStyle, scale } = this.options;
+		if (tagStyle === "heat" || tagStyle === "meter") return () => Math.min(12, largest);
+		const sizes = Scales.continuous(scale).domain(this.domain(words)).range([10, Math.max(11, largest)]).clamp(true);
+		return (word) => sizes(word.value);
+	}
+	flow(words, width, largest) {
+		const { tagStyle, align } = this.options;
+		const size = this.sized(words, largest);
+		const pad = PAD[tagStyle], gap = tagStyle === "plain" ? 9 : 6;
+		const chrome = tagStyle === "plain" ? 1.08 : tagStyle === "meter" ? 1.6 : 1.55;
+		const tags = words.map((word) => {
+			const font = size(word);
+			return {
+				word,
+				x: 0,
+				y: 0,
+				size: font,
+				width: Math.min(width, TextMetrics.width(word.text, font, 500) + pad * 2),
+				height: font * chrome
+			};
+		});
+		const lines = [[]];
+		let used = 0;
+		for (const tag of tags) {
+			if (used && used + tag.width > width) {
+				lines.push([]);
+				used = 0;
+			}
+			lines[lines.length - 1].push(tag);
+			used += tag.width + gap;
+		}
+		let y = 0;
+		for (const line of lines) {
+			const tall = Math.max(...line.map((tag) => tag.height));
+			const spare = width - line.reduce((sum, tag) => sum + tag.width + gap, -gap);
+			const extra = align === "justify" && line.length > 1 && spare < width * .3 ? spare / (line.length - 1) : 0;
+			let x = align === "center" ? spare / 2 : 0;
+			for (const tag of line) {
+				tag.x = x;
+				tag.y = y + (tall - tag.height) / 2;
+				x += tag.width + gap + extra;
+			}
+			y += tall + gap * .7;
+		}
+		return {
+			tags,
+			height: y
+		};
+	}
+	arranged(words) {
+		return this.options.sort === "alphabetical" ? [...words].sort((a, b) => ascending(a.text, b.text)) : [...words];
+	}
+	/** Largest type that fits; only when even the smallest overflows do the lightest words drop. */
+	fitted(words, width, height) {
+		let kept = words;
+		for (;;) {
+			for (let largest = Math.min(40, height / 4); largest >= 12; largest *= .88) {
+				const laid = this.flow(this.arranged(kept), width, largest);
+				if (laid.height <= height) return laid;
+			}
+			if (kept.length <= 1) return this.flow(kept, width, 12);
+			kept = kept.slice(0, -1);
+		}
+	}
+	draw(ctx) {
+		const { tagStyle, value } = this.options;
+		const { width, height } = ctx.plot;
+		const words = this.words();
+		const { tags: final, height: used } = words.length ? this.fitted(words, width, height) : {
+			tags: [],
+			height: 0
+		};
+		const top = (height - used) / 2;
+		const [, high] = this.domain(words);
+		const share = scaleLinear([0, high], [0, 1]).clamp(true);
+		const filled = tagStyle === "pill" || tagStyle === "heat";
+		const fill = (tag) => tagStyle === "pill" ? ctx.palette.sequential(.12 + .2 * share(tag.word.value)) : ctx.palette.sequential(.08 + .92 * share(tag.word.value));
+		const pills = ctx.marks("pills", "rect", filled ? final : [], (tag) => tag.word.text).attr("rx", (tag) => tag.height / 2).attr("fill", fill);
+		ctx.set(pills, {
+			x: (tag) => tag.x,
+			y: (tag) => top + tag.y,
+			width: (tag) => tag.width,
+			height: (tag) => tag.height
+		}, { width: 0 }, 6);
+		ctx.hover(pills, (tag) => ({
+			title: tag.word.text,
+			rows: [[value, tag.word.value]]
+		}));
+		const meters = ctx.marks("meters", "rect", tagStyle === "meter" ? final : [], (tag) => tag.word.text).attr("rx", 1.5).attr("fill", ctx.palette.color(value));
+		ctx.set(meters, {
+			x: (tag) => tag.x,
+			y: (tag) => top + tag.y + tag.height - 3,
+			width: (tag) => Math.max(2, tag.width * share(tag.word.value)),
+			height: 3
+		}, { width: 0 }, 6);
+		const labels = ctx.marks("labels", "text", final, (tag) => tag.word.text).attr("text-anchor", "middle").attr("font-family", ctx.theme.fontFamily).attr("font-weight", 500).attr("font-size", (tag) => tag.size).attr("fill", (tag) => filled ? TextMetrics.ink(ctx, fill(tag)) : ctx.theme.ink).attr("pointer-events", filled ? "none" : null).text((tag) => TextMetrics.clip(tag.word.text, tag.size, tag.width, 500));
+		ctx.set(labels, {
+			x: (tag) => tag.x + tag.width / 2,
+			y: (tag) => top + tag.y + tag.height / 2 + tag.size * .34 - (tagStyle === "meter" ? 3 : 0)
+		});
+		if (!filled) ctx.hover(labels, (tag) => ({
+			title: tag.word.text,
+			rows: [[value, tag.word.value]]
+		}));
+	}
+};
+export { TagAlign, TagChart, TagSort, TagStyle };

package/dist/charts/pictorial/TextMetrics.js

@@ -0,0 +1,31 @@
+import { color } from "d3";
+// src/charts/pictorial/TextMetrics.ts
+var NARROW = /* @__PURE__ */ new Set("fijlrtI.,:;'!|()[]/ ");
+var WIDE = /* @__PURE__ */ new Set("mwMW@");
+var advance = (char) => {
+	if (NARROW.has(char)) return .33;
+	if (WIDE.has(char)) return .86;
+	return char >= "A" && char <= "Z" ? .68 : .56;
+};
+/** Layout-time text estimates: they need no DOM, so SSR, tests and browsers agree. */
+var TextMetrics = class {
+	static width(text, size, weight = 400) {
+		let units = 0;
+		for (const char of text) units += advance(char);
+		return units * size * (weight >= 600 ? 1.07 : 1);
+	}
+	/** The longest prefix that fits `room`, with an ellipsis, or `''` when even one letter would not. */
+	static clip(text, size, room, weight = 400) {
+		if (this.width(text, size, weight) <= room) return text;
+		for (let end = text.length - 1; end > 0; end--) {
+			const short = `${text.slice(0, end).trimEnd()}…`;
+			if (this.width(short, size, weight) <= room) return end >= 2 ? short : "";
+		}
+		return "";
+	}
+	/** `palette.inkOn` for any CSS colour, including the `rgb()` strings the sequential ramp returns. */
+	static ink(ctx, fill) {
+		return ctx.palette.inkOn(color(fill)?.formatHex() ?? fill);
+	}
+};
+export { TextMetrics };