@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/pictorial/TextTreemap.js

@@ -0,0 +1,142 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { WordChart } from "./WordChart.js";
+import { hierarchy, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify } from "d3";
+// src/charts/pictorial/TextTreemap.ts
+var TextTreemapTile = /* @__PURE__ */ function(TextTreemapTile) {
+	TextTreemapTile["Squarify"] = "squarify";
+	TextTreemapTile["Binary"] = "binary";
+	TextTreemapTile["Slice"] = "slice";
+	TextTreemapTile["Dice"] = "dice";
+	TextTreemapTile["SliceDice"] = "slice-dice";
+	return TextTreemapTile;
+}({});
+var TILES = {
+	["squarify"]: treemapSquarify,
+	["binary"]: treemapBinary,
+	["slice"]: treemapSlice,
+	["dice"]: treemapDice,
+	["slice-dice"]: treemapSliceDice
+};
+var WEIGHT = 600;
+/** A treemap whose cells are their own labels: reads as a sized list of terms, where area is the weight. */
+var TextTreemap = class extends WordChart {
+	static meta = {
+		id: "text-treemap",
+		name: "Text treemap",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Fills treemap cells with their own word at the largest size that fits, so area and text both show weight.",
+		tags: [
+			"word treemap",
+			"text",
+			"tile"
+		],
+		sample: (seed) => {
+			const groups = [...new Set(SampleData.categories(seed, 4, 1).map((row) => String(row.category)))];
+			return SampleData.words(seed).map((word, i) => ({
+				...word,
+				group: groups[i % groups.length]
+			}));
+		},
+		variants: {
+			tile: [
+				"squarify",
+				"binary",
+				"slice",
+				"dice",
+				"slice-dice"
+			],
+			nested: [true, false],
+			turnText: [true, false],
+			showValues: [false, true]
+		},
+		valid: ({ tile, turnText, nested }) => {
+			if (tile === "slice") return turnText === true && nested === false;
+			if (tile === "dice") return turnText === true;
+			return nested === true || tile !== "slice-dice";
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			tile: "squarify",
+			nested: true,
+			turnText: true,
+			showValues: false
+		};
+	}
+	fit(cell, text, ctx) {
+		const width = cell.x1 - cell.x0, height = cell.y1 - cell.y0;
+		const unit = TextMetrics.width(text, 1, WEIGHT), room = this.options.showValues ? .62 : .8;
+		const flat = Math.min((width - 8) / unit, height * room);
+		const upright = this.options.turnText ? Math.min((height - 8) / unit, width * room) : 0;
+		const turned = upright > flat * 1.2;
+		const size = Math.min(ctx.plot.height / 3, turned ? upright : flat);
+		if (size < 9) return null;
+		return {
+			cell,
+			text,
+			size,
+			turned,
+			x: (cell.x0 + cell.x1) / 2,
+			y: (cell.y0 + cell.y1) / 2
+		};
+	}
+	draw(ctx) {
+		const { width, height } = ctx.plot;
+		const { nested, tile, showValues, value } = this.options;
+		const words = this.words();
+		const byGroup = nested && this.grouped(words);
+		const groups = [...new Set(words.map((word) => word.group ?? "—"))];
+		const tree = byGroup ? {
+			name: "root",
+			children: groups.map((name) => ({
+				name,
+				children: words.filter((word) => (word.group ?? "—") === name).map((word) => ({
+					name: word.text,
+					word
+				}))
+			}))
+		} : {
+			name: "root",
+			children: words.map((word) => ({
+				name: word.text,
+				word
+			}))
+		};
+		const root = treemap().size([width, height]).tile(TILES[tile]).paddingInner(2).paddingTop((d) => byGroup && d.depth === 1 ? 16 : 0)(hierarchy(tree).sum((d) => d.word?.value ?? 0).sort((a, b) => (b.value ?? 0) - (a.value ?? 0)));
+		const leaves = root.leaves().filter((leaf) => leaf.data.word);
+		const top = Math.max(1, ...words.map((word) => word.value));
+		const fill = (d) => byGroup ? ctx.palette.color(d.parent.data.name) : ctx.palette.sequential(.15 + .75 * Math.sqrt(d.data.word.value / top));
+		const cells = ctx.marks("cells", "rect", leaves, (d) => d.data.name).attr("rx", 4).attr("fill", fill);
+		ctx.set(cells, {
+			x: (d) => d.x0,
+			y: (d) => d.y0,
+			width: (d) => Math.max(0, d.x1 - d.x0),
+			height: (d) => Math.max(0, d.y1 - d.y0)
+		}, {
+			width: 0,
+			height: 0,
+			x: (d) => d.x0,
+			y: (d) => d.y0
+		}, 8);
+		ctx.hover(cells, (d) => ({
+			title: d.data.name,
+			color: fill(d),
+			rows: [[value, d.data.word.value]]
+		}));
+		const headers = byGroup ? root.children ?? [] : [];
+		ctx.text(ctx.marks("headers", "text", headers, (d) => d.data.name).attr("x", (d) => d.x0 + 1).attr("y", (d) => d.y0 + 11).text((d) => TextMetrics.clip(d.data.name, 11, d.x1 - d.x0 - 2)));
+		const labels = leaves.flatMap((leaf) => this.fit(leaf, leaf.data.name, ctx) ?? []);
+		const place = (d) => `translate(${d.x},${d.y}) rotate(${d.turned ? -90 : 0})`;
+		const wordMarks = ctx.marks("words", "text", labels, (d) => d.text).attr("text-anchor", "middle").attr("pointer-events", "none").attr("font-family", ctx.theme.fontFamily).attr("font-weight", WEIGHT).attr("font-size", (d) => d.size).attr("dy", (d) => showValues ? -d.size * .05 : d.size * .35).attr("fill", (d) => TextMetrics.ink(ctx, fill(d.cell))).text((d) => d.text);
+		ctx.set(wordMarks, { transform: place });
+		const roomy = labels.filter((d) => showValues && (d.turned ? d.cell.x1 - d.cell.x0 : d.cell.y1 - d.cell.y0) >= d.size * 1.1 + 13);
+		const values = ctx.marks("values", "text", roomy, (d) => d.text).attr("text-anchor", "middle").attr("pointer-events", "none").attr("font-family", ctx.theme.fontFamily).attr("font-size", 10).attr("dy", (d) => Math.min(d.size * .6, 14) + 3).attr("fill", (d) => TextMetrics.ink(ctx, fill(d.cell))).text((d) => d.cell.data.word.value);
+		ctx.set(values, { transform: place });
+	}
+};
+export { TextTreemap, TextTreemapTile };

package/dist/charts/pictorial/UnitChart.js

@@ -0,0 +1,49 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ICON_PATHS } from "./PictorialIcons.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { select } from "d3";
+// src/charts/pictorial/UnitChart.ts
+var ICON_BOX = 24;
+var NICE = [
+	1,
+	2,
+	2.5,
+	5
+];
+var instances = 0;
+/** Charts that count with repeated icons: unit choice, the unit key, partial icons and entry motion. */
+var UnitChart = class extends Chart2D {
+	uid = `unit-${++instances}`;
+	/** Smallest round unit that keeps `largest` under `room` icons. */
+	unitFor(largest, room) {
+		if (this.options.unit && this.options.unit > 0) return this.options.unit;
+		if (largest <= 0) return 1;
+		const least = largest / Math.max(1, room);
+		const decade = 10 ** Math.floor(Math.log10(least));
+		for (const scale of [decade, decade * 10]) for (const step of NICE) if (step * scale >= least && Number.isInteger(step * scale)) return step * scale;
+		return Math.ceil(least);
+	}
+	drawIcons(ctx, name, icons) {
+		const placed = (d, scale = d.size / 24) => `translate(${d.x},${d.y}) scale(${scale})`;
+		const ghosts = icons.filter((d) => d.ghost || d.part < 1);
+		const solids = icons.filter((d) => !d.ghost && d.part > 0);
+		const clips = solids.filter((d) => d.part < 1);
+		const clipId = (d) => `${this.uid}-${name}-${clips.indexOf(d)}`;
+		ctx.marks(`${name}-clip`, "clipPath", clips, (d) => d.key).attr("id", clipId).each(function(d) {
+			select(this).selectAll("rect").data([d]).join("rect").attr("width", d.part * 24).attr("height", 24);
+		});
+		const ghost = ctx.marks(`${name}-ghost`, "path", ghosts, (d) => d.key).attr("fill", ctx.theme.grid).attr("d", (d) => ICON_PATHS[d.icon]);
+		ctx.set(ghost, { transform: (d) => placed(d) }, { transform: (d) => placed(d, 0) });
+		const marks = ctx.marks(`${name}-solid`, "path", solids, (d) => d.key).attr("fill", (d) => d.fill).attr("d", (d) => ICON_PATHS[d.icon]).attr("clip-path", (d) => d.part < 1 ? `url(#${clipId(d)})` : null);
+		ctx.set(marks, { transform: (d) => placed(d) }, { transform: (d) => placed(d, 0) }, 2);
+		ctx.hover(marks, (d) => d.tip);
+	}
+	/** The key every unit chart owes its reader: what one icon is worth. */
+	drawUnitKey(ctx, unit, icon, fill, x, y) {
+		const label = `= ${unit.toLocaleString("en")}`;
+		const size = 12;
+		ctx.marks("unit-key-icon", "path", [icon], String).attr("d", ICON_PATHS[icon]).attr("fill", fill).attr("transform", `translate(${x - TextMetrics.width(label, 11) - size - 4},${y - size + 2}) scale(${size / 24})`);
+		ctx.text(ctx.marks("unit-key-text", "text", [label], String).attr("x", x).attr("y", y).attr("text-anchor", "end").text(String));
+	}
+};
+export { ICON_BOX, UnitChart };

package/dist/charts/pictorial/WeatherGlyphs.js

@@ -0,0 +1,199 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { GlyphChart, PictorialGlyphLayout, PictorialGlyphOrder } from "./GlyphChart.js";
+import { arc } from "d3";
+// src/charts/pictorial/WeatherGlyphs.ts
+var WeatherSymbol = /* @__PURE__ */ function(WeatherSymbol) {
+	WeatherSymbol["Station"] = "station";
+	WeatherSymbol["Barb"] = "barb";
+	WeatherSymbol["Forecast"] = "forecast";
+	WeatherSymbol["Compass"] = "compass";
+	return WeatherSymbol;
+}({});
+var WeatherHemisphere = /* @__PURE__ */ function(WeatherHemisphere) {
+	WeatherHemisphere["North"] = "north";
+	WeatherHemisphere["South"] = "south";
+	return WeatherHemisphere;
+}({});
+var OKTA = Math.PI * 2 / 8;
+/** Meteorological station plots: wind barbs, sky cover and temperature in one mark per observation. */
+var WeatherGlyphs = class extends GlyphChart {
+	static meta = {
+		id: "weather-glyphs",
+		name: "Weather glyphs",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots weather observations as station models, wind barbs or forecast icons, one glyph per site.",
+		tags: [
+			"station model",
+			"wind barb",
+			"meteorology",
+			"glyph"
+		],
+		sample: (seed) => SampleData.cities(seed).slice(0, 15).map((city) => {
+			const value = Number(city.value), lat = Number(city.lat), lon = Number(city.lon);
+			return {
+				name: city.name,
+				lon,
+				lat,
+				group: lat >= 0 ? "Northern" : "Southern",
+				temperature: Math.round(32 - Math.abs(lat) * .55 + value % 7 - 3),
+				windSpeed: Math.round(value * 1.7 % 72),
+				windDirection: Math.round(value * 37 % 360),
+				cloud: value % 9,
+				precipitation: +(value * 13 % 100 / 12 - 2).toFixed(1)
+			};
+		}),
+		variants: {
+			symbol: [
+				"station",
+				"barb",
+				"forecast",
+				"compass"
+			],
+			layout: [
+				PictorialGlyphLayout.Grid,
+				PictorialGlyphLayout.Hex,
+				PictorialGlyphLayout.Scatter,
+				PictorialGlyphLayout.Groups
+			],
+			order: [PictorialGlyphOrder.Input, PictorialGlyphOrder.Score],
+			hemisphere: ["north", "south"],
+			readings: [true, false]
+		},
+		valid: ({ layout, order, symbol, hemisphere, readings }) => (layout !== PictorialGlyphLayout.Scatter || order === PictorialGlyphOrder.Input) && (hemisphere === "north" || symbol === "station" || symbol === "barb") && (readings === true || symbol === "station" || symbol === "forecast")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			label: "name",
+			x: "lon",
+			y: "lat",
+			temperature: "temperature",
+			windSpeed: "windSpeed",
+			windDirection: "windDirection",
+			cloud: "cloud",
+			precipitation: "precipitation",
+			symbol: "station",
+			hemisphere: "north",
+			readings: true
+		};
+	}
+	/** Station models, barbs and forecast icons are drawn in ink, so identity colour only reaches the compass. */
+	legendItems() {
+		return this.options.symbol === "compass" ? super.legendItems() : [];
+	}
+	fieldNames() {
+		const { temperature, windSpeed, windDirection, cloud, precipitation } = this.options;
+		return [
+			temperature,
+			windSpeed,
+			windDirection,
+			cloud,
+			precipitation
+		];
+	}
+	/** Staff from the origin toward the wind's origin, feathered in 50/10/5 knot marks. */
+	barbs(knots, length, start) {
+		const side = this.options.hemisphere === "north" ? 1 : -1;
+		const feather = length * .36, step = length * .15;
+		let rest = Math.round(Math.max(0, knots) / 5) * 5, y = -length;
+		let d = `M0,${-start}V${-length}`;
+		while (rest >= 50) {
+			d += `M0,${y}L${side * feather},${y + step * .5}L0,${y + step}Z`;
+			y += step * 1.25;
+			rest -= 50;
+		}
+		while (rest >= 10) {
+			d += `M0,${y}L${side * feather},${y - step * .6}`;
+			y += step;
+			rest -= 10;
+		}
+		if (rest >= 5) {
+			if (y === -length) y += step;
+			d += `M0,${y}L${side * feather * .5},${y - step * .3}`;
+		}
+		return d;
+	}
+	sky(oktas, radius) {
+		const filled = Math.max(0, Math.min(8, Math.round(oktas)));
+		return filled ? arc()({
+			innerRadius: 0,
+			outerRadius: radius,
+			startAngle: 0,
+			endAngle: filled * OKTA
+		}) ?? "" : "";
+	}
+	reading(ctx, cell, values, x, y, anchor) {
+		ctx.text(ctx.marks("reading", "text", values, String, cell).attr("x", x).attr("y", y).attr("text-anchor", anchor).text(String), 10, "ink");
+	}
+	forecast(ctx, cell, oktas, rain, radius) {
+		const r = radius * .34, overcast = oktas >= 6, clear = oktas <= 2;
+		const sun = overcast ? [] : [{
+			x: clear ? 0 : -radius * .28,
+			y: clear ? 0 : -radius * .26
+		}];
+		const rays = sun.flatMap((at) => Array.from({ length: 8 }, (_, i) => {
+			const angle = i * OKTA, near = r * 1.3, far = r * 1.75;
+			return `M${at.x + Math.cos(angle) * near},${at.y + Math.sin(angle) * near}L${at.x + Math.cos(angle) * far},${at.y + Math.sin(angle) * far}`;
+		}));
+		const warm = ctx.theme.categorical[3];
+		ctx.marks("rays", "path", rays, String, cell).attr("d", String).attr("stroke", warm).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.marks("sun", "circle", sun, (_, i) => i, cell).attr("cx", (d) => d.x).attr("cy", (d) => d.y).attr("r", r).attr("fill", warm);
+		const puffs = clear ? [] : [
+			[
+				-.3,
+				.12,
+				.28
+			],
+			[
+				.02,
+				-.02,
+				.36
+			],
+			[
+				.34,
+				.14,
+				.26
+			]
+		];
+		const shade = ctx.theme.inkMuted;
+		ctx.marks("puffs", "circle", puffs, (_, i) => i, cell).attr("cx", (d) => d[0] * radius).attr("cy", (d) => d[1] * radius + radius * .1).attr("r", (d) => d[2] * radius).attr("fill", shade);
+		ctx.marks("base", "rect", clear ? [0] : [], String, cell).attr("x", -radius * .58).attr("y", radius * .26).attr("width", radius * 1.16).attr("height", radius * .2).attr("rx", radius * .1).attr("fill", shade);
+		const drops = rain > 0 && !clear ? Array.from({ length: Math.min(4, Math.ceil(rain / 2)) }, (_, i) => -.42 + i * .28) : [];
+		ctx.marks("drops", "path", drops, String, cell).attr("d", (d) => `M${d * radius + 2},${radius * .58}l-3,${radius * .3}`).attr("stroke", ctx.palette.sequential(.6)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+	}
+	compass(ctx, cell, knots, radius) {
+		const ticks = Array.from({ length: 8 }, (_, i) => `M0,${-radius}V${-radius * (i % 2 ? .92 : .84)}`);
+		ctx.marks("ticks", "path", ticks, String, cell).attr("d", String).attr("stroke", ctx.theme.axis).attr("transform", (_, i) => `rotate(${i * 45})`);
+		ctx.marks("ring", "circle", [radius], String, cell).attr("r", radius).attr("fill", "none").attr("stroke", ctx.theme.axis);
+		ctx.text(ctx.marks("speed", "text", radius >= 14 ? [Math.round(knots)] : [], String, cell).attr("text-anchor", "middle").attr("y", 4).text(String), 10, "ink");
+	}
+	drawGlyph(ctx, cell, { glyph, radius }) {
+		const { symbol, readings, temperature, windSpeed, windDirection, cloud, precipitation } = this.options;
+		const value = (field) => Number(glyph.row[field] ?? 0) || 0;
+		const knots = value(windSpeed), from = value(windDirection), oktas = value(cloud);
+		const fill = this.glyphFill(ctx, glyph);
+		if (symbol === "forecast") {
+			this.forecast(ctx, cell, oktas, value(precipitation), radius);
+			if (readings && radius >= 18) this.reading(ctx, cell, [`${value(temperature)}°`], radius, -radius + 9, "end");
+			return;
+		}
+		if (symbol === "compass") {
+			this.compass(ctx, cell, knots, radius);
+			const needle = `M0,${-radius * .94}L${radius * .14},${-radius * .6}L${-radius * .14},${-radius * .6}Z`;
+			ctx.marks("needle", "path", [needle], String, cell).attr("d", String).attr("fill", fill).attr("transform", `rotate(${from})`);
+			return;
+		}
+		const station = symbol === "station";
+		const hub = station ? Math.max(4, radius * .24) : Math.max(1.5, radius * .06);
+		ctx.marks("staff", "path", [this.barbs(knots, radius * .96, hub)], String, cell).attr("d", String).attr("transform", `rotate(${from})`).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.ink).attr("stroke-width", 1.5).attr("stroke-linecap", "round");
+		ctx.marks("hub", "circle", [hub], String, cell).attr("r", hub).attr("fill", station ? ctx.theme.surface : ctx.theme.ink).attr("stroke", ctx.theme.ink).attr("stroke-width", station ? 1.5 : 0);
+		ctx.marks("sky", "path", station ? [this.sky(oktas, hub)] : [], String, cell).attr("d", String).attr("fill", ctx.theme.ink);
+		const legible = readings && station && radius >= 18;
+		const left = from > 180;
+		this.reading(ctx, cell, legible ? [`${value(temperature)}°`] : [], left ? hub + 3 : -hub - 3, -hub - 2, left ? "start" : "end");
+	}
+};
+export { WeatherGlyphs, WeatherHemisphere, WeatherSymbol };

package/dist/charts/pictorial/WordChart.js

@@ -0,0 +1,41 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { extent } from "d3";
+// src/charts/pictorial/WordChart.ts
+/** Charts of weighted words: merges duplicate words, drops blanks and ranks by weight. */
+var WordChart = class extends Chart2D {
+	defaults() {
+		return {
+			text: "text",
+			value: "value",
+			group: "group",
+			limit: 80
+		};
+	}
+	words() {
+		const { data, text, value, group, limit } = this.options;
+		const merged = /* @__PURE__ */ new Map();
+		for (const row of data) {
+			const word = String(row[text] ?? "").trim();
+			const weight = Math.abs(Number(row[value] ?? 0));
+			if (!word || !Number.isFinite(weight)) continue;
+			const hit = merged.get(word);
+			if (hit) hit.value += weight;
+			else merged.set(word, {
+				text: word,
+				value: weight,
+				group: row[group] == null ? null : String(row[group])
+			});
+		}
+		return [...merged.values()].sort((a, b) => b.value - a.value).slice(0, limit);
+	}
+	/** Weight extent that is safe to hand to any scale: positive and never degenerate. */
+	domain(words) {
+		const [low = 1, high = 1] = extent(words, (word) => word.value);
+		const floor = Math.max(low, 1e-6);
+		return [floor, high > floor ? high : floor * 2];
+	}
+	grouped(words) {
+		return words.some((word) => word.group !== null);
+	}
+};
+export { WordChart };

package/dist/charts/pictorial/WordCloudChart.js

@@ -0,0 +1,141 @@
+import CloudLayout from "../../vendor/d3-cloud/src/layout.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BoxCanvas } from "./BoxCanvas.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { WordChart } from "./WordChart.js";
+import { randomLcg } from "d3";
+// src/charts/pictorial/WordCloudChart.ts
+var WordCloudSpiral = /* @__PURE__ */ function(WordCloudSpiral) {
+	WordCloudSpiral["Archimedean"] = "archimedean";
+	WordCloudSpiral["Rectangular"] = "rectangular";
+	return WordCloudSpiral;
+}({});
+var WordCloudRotation = /* @__PURE__ */ function(WordCloudRotation) {
+	WordCloudRotation["Level"] = "level";
+	WordCloudRotation["RightAngle"] = "right-angle";
+	WordCloudRotation["Diagonal"] = "diagonal";
+	WordCloudRotation["Fan"] = "fan";
+	return WordCloudRotation;
+}({});
+var ANGLES = {
+	["level"]: [0],
+	["right-angle"]: [
+		0,
+		0,
+		90
+	],
+	["diagonal"]: [
+		-45,
+		0,
+		45
+	],
+	["fan"]: [
+		-60,
+		-30,
+		0,
+		30,
+		60
+	]
+};
+var WEIGHT = 600;
+var LEAST = 10;
+var canvas = () => typeof CanvasRenderingContext2D === "function" ? document.createElement("canvas") : new BoxCanvas();
+/** Word cloud on d3-cloud: use it for a gist of prominent terms, not for precise comparison. */
+var WordCloudChart = class extends WordChart {
+	static meta = {
+		id: "word-cloud",
+		name: "Word cloud",
+		family: ChartFamily.Text,
+		dimension: Dimension.Two,
+		shape: DataShape.Text,
+		description: "Packs weighted words so the most frequent terms dominate, giving a quick gist of a body of text.",
+		tags: [
+			"tag cloud",
+			"wordle",
+			"text",
+			"d3-cloud"
+		],
+		sample: (seed) => SampleData.words(seed),
+		variants: {
+			spiral: ["archimedean", "rectangular"],
+			rotation: [
+				"level",
+				"right-angle",
+				"diagonal",
+				"fan"
+			],
+			scale: [
+				ScaleKind.Sqrt,
+				ScaleKind.Linear,
+				ScaleKind.Log
+			],
+			padding: [2, 5]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			spiral: "archimedean",
+			rotation: "level",
+			scale: ScaleKind.Sqrt,
+			padding: 2,
+			seed: 1
+		};
+	}
+	layout(words, width, height, largest) {
+		const { spiral, rotation, scale, padding, seed } = this.options;
+		const random = randomLcg(seed * .2718 % 1);
+		const font = this.theme.fontFamily;
+		const sizes = Scales.continuous(scale).domain(this.domain(words)).range([LEAST, largest]).clamp(true);
+		const angles = ANGLES[rotation];
+		const cloud = new CloudLayout().size([width, height]).overflow(false).strategy(spiral).random(random).canvas(canvas);
+		return words.flatMap((word) => {
+			const sprite = cloud.getSprite(word.text, {
+				font,
+				weight: WEIGHT,
+				size: Math.round(sizes(word.value)),
+				rotate: angles[Math.floor(random() * angles.length)],
+				padding,
+				datum: word
+			});
+			const at = sprite && cloud.place(sprite);
+			return at ? [{
+				word,
+				x: at.x,
+				y: at.y,
+				size: at.size,
+				rotate: at.rotate
+			}] : [];
+		});
+	}
+	/** Shrinks the type until every word lands, so no word is dropped silently. */
+	fitted(words, width, height) {
+		const longest = Math.max(...words.map((word) => TextMetrics.width(word.text, 1, WEIGHT)));
+		let largest = Math.max(14, Math.min(height / 3.2, width * .8 / longest));
+		let best = [];
+		for (let attempt = 0; attempt < 6; attempt++) {
+			const placed = this.layout(words, width, height, largest);
+			if (placed.length > best.length) best = placed;
+			if (placed.length === words.length) break;
+			largest = Math.max(12, largest * .84);
+		}
+		return best;
+	}
+	draw(ctx) {
+		const words = this.words();
+		const { width, height } = ctx.plot;
+		const placed = words.length ? this.fitted(words, width - 12, height - 12) : [];
+		const top = placed[0]?.word.value ?? 1;
+		const tone = (word) => word.value >= top * .6 ? ctx.theme.ink : word.value >= top * .3 ? ctx.theme.inkSecondary : ctx.theme.inkMuted;
+		const at = (d, scale = 1) => `translate(${width / 2 + d.x},${height / 2 + d.y}) rotate(${d.rotate}) scale(${scale})`;
+		const marks = ctx.marks("words", "text", placed, (d) => d.word.text).attr("text-anchor", "middle").attr("font-family", ctx.theme.fontFamily).attr("font-weight", WEIGHT).attr("font-size", (d) => d.size).attr("fill", (d) => tone(d.word)).text((d) => d.word.text);
+		ctx.set(marks, { transform: (d) => at(d) }, { transform: (d) => at(d, 0) }, 8);
+		ctx.hover(marks, (d) => ({
+			title: d.word.text,
+			rows: [[this.options.value, d.word.value]]
+		}));
+	}
+};
+export { WordCloudChart, WordCloudRotation, WordCloudSpiral };