@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/pictorial/GlyphChart.js

@@ -0,0 +1,232 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { ascending, extent, forceCollide, forceSimulation, forceX, forceY, group, mean, rollups, scaleLinear, select, sum } from "d3";
+// src/charts/pictorial/GlyphChart.ts
+var PictorialGlyphLayout = /* @__PURE__ */ function(PictorialGlyphLayout) {
+	PictorialGlyphLayout["Grid"] = "grid";
+	PictorialGlyphLayout["Hex"] = "hex";
+	PictorialGlyphLayout["Scatter"] = "scatter";
+	PictorialGlyphLayout["Spiral"] = "spiral";
+	PictorialGlyphLayout["Groups"] = "groups";
+	return PictorialGlyphLayout;
+}({});
+var PictorialGlyphOrder = /* @__PURE__ */ function(PictorialGlyphOrder) {
+	PictorialGlyphOrder["Input"] = "input";
+	PictorialGlyphOrder["Score"] = "score";
+	PictorialGlyphOrder["Similarity"] = "similarity";
+	return PictorialGlyphOrder;
+}({});
+var LABEL = 14;
+/** Small multiples of one glyph per row: normalises fields, orders rows and lays out the slots. */
+var GlyphChart = class extends Chart2D {
+	defaults() {
+		return {
+			label: "category",
+			group: "group",
+			layout: "grid",
+			order: "input"
+		};
+	}
+	/** Twelve named rows in six numeric columns, grouped by overall level. */
+	static wideSample(seed) {
+		return rollups(SampleData.categories(seed, 12, 6), (rows) => Object.fromEntries(rows.map((row) => [String(row.series), row.value])), (row) => String(row.category)).map(([category, values]) => {
+			const total = sum(Object.values(values));
+			return {
+				category,
+				group: total > 390 ? "High" : total > 340 ? "Middle" : "Low",
+				...values
+			};
+		});
+	}
+	fieldNames() {
+		const { data, fields, label, group } = this.options;
+		if (fields?.length) return fields;
+		return [...new Set(data.flatMap((row) => Object.keys(row)))].filter((key) => key !== label && key !== group).filter((key) => data.some((row) => typeof row[key] === "number"));
+	}
+	glyphs() {
+		const { data, label, group, order } = this.options;
+		const fields = this.fieldNames();
+		const scales = fields.map((field) => {
+			const [low = 0, high = 1] = extent(data, (row) => Number.isFinite(Number(row[field])) && row[field] != null ? Number(row[field]) : void 0);
+			return (value) => value == null || !Number.isFinite(Number(value)) ? 0 : high > low ? (Number(value) - low) / (high - low) : .5;
+		});
+		const glyphs = data.map((row, i) => {
+			const values = fields.map((field, f) => scales[f](row[field]));
+			return {
+				row,
+				label: String(row[label] ?? i + 1),
+				group: row[group] == null ? null : String(row[group]),
+				values,
+				score: mean(values) ?? 0
+			};
+		});
+		if (order === "score") return [...glyphs].sort((a, b) => b.score - a.score);
+		return order === "similarity" ? this.seriated(glyphs) : glyphs;
+	}
+	/** Nearest-neighbour chain from the strongest row, so like rows sit together. */
+	seriated(glyphs) {
+		const left = [...glyphs].sort((a, b) => b.score - a.score);
+		const chain = left.splice(0, 1);
+		const distance = (a, b) => sum(a.values, (value, i) => (value - b.values[i]) ** 2);
+		while (left.length) {
+			const last = chain[chain.length - 1];
+			const next = left.reduce((best, glyph, i) => distance(last, glyph) < distance(last, left[best]) ? i : best, 0);
+			chain.push(...left.splice(next, 1));
+		}
+		return chain;
+	}
+	frame(ctx, glyphs) {
+		const { width, height } = ctx.plot;
+		const n = glyphs.length;
+		const plain = {
+			slots: [],
+			headings: [],
+			axes: null
+		};
+		if (!n) return plain;
+		const layout = this.options.layout;
+		if (layout === "scatter") return this.scatter(glyphs, width, height);
+		if (layout === "spiral") {
+			const reach = Math.min(width, height) / 2;
+			const pitch = reach / (Math.sqrt(n) + .45);
+			const radius = Math.min(pitch * .84, reach);
+			return {
+				...plain,
+				slots: glyphs.map((glyph, i) => ({
+					glyph,
+					radius,
+					labelled: false,
+					x: width / 2 + Math.cos(i * 2.39996) * pitch * Math.sqrt(i + .5),
+					y: height / 2 + Math.sin(i * 2.39996) * pitch * Math.sqrt(i + .5)
+				}))
+			};
+		}
+		if (layout === "groups") return this.rows(glyphs, width, height);
+		const hex = layout === "hex";
+		const columns = Math.max(1, Math.round(Math.sqrt(n * width / height)));
+		const lines = Math.ceil(n / columns);
+		const cellWidth = width / (columns + (hex ? .5 : 0)), cellHeight = height / lines;
+		const labelled = cellWidth >= 44 && cellHeight >= 46;
+		const room = labelled ? LABEL : 0;
+		const radius = Math.max(4, Math.min(cellWidth, cellHeight - room) / 2 - 2);
+		return {
+			...plain,
+			slots: glyphs.map((glyph, i) => {
+				const line = Math.floor(i / columns);
+				return {
+					glyph,
+					radius,
+					labelled,
+					x: cellWidth * (i % columns + .5 + (hex && line % 2 ? .5 : 0)),
+					y: cellHeight * line + (cellHeight - room) / 2
+				};
+			})
+		};
+	}
+	scatter(glyphs, width, height) {
+		const [xField = "", yField = ""] = [this.options.x ?? this.fieldNames()[0], this.options.y ?? this.fieldNames()[1] ?? this.fieldNames()[0]];
+		const radius = Math.max(8, Math.min(30, Math.sqrt(width * height / glyphs.length) * .3));
+		const place = (field, range) => {
+			const [low = 0, high = 1] = extent(glyphs, (glyph) => Number(glyph.row[field]) || 0);
+			return scaleLinear([low, high > low ? high : low + 1], range);
+		};
+		const fx = place(xField, [radius, width - radius]), fy = place(yField, [height - radius - 14, radius]);
+		const nodes = glyphs.map((glyph) => {
+			const tx = fx(Number(glyph.row[xField]) || 0), ty = fy(Number(glyph.row[yField]) || 0);
+			return {
+				glyph,
+				tx,
+				ty,
+				x: tx,
+				y: ty
+			};
+		});
+		forceSimulation(nodes).force("x", forceX((d) => d.tx).strength(.4)).force("y", forceY((d) => d.ty).strength(.4)).force("collide", forceCollide(radius + 2)).stop().tick(80);
+		return {
+			slots: nodes.map((node) => ({
+				glyph: node.glyph,
+				radius,
+				labelled: false,
+				x: Math.max(radius, Math.min(width - radius, node.x)),
+				y: Math.max(radius, Math.min(height - radius - 14, node.y))
+			})),
+			headings: [],
+			axes: [xField, yField]
+		};
+	}
+	/** One band per group, wrapping within the band at the column count that gives the largest glyphs. */
+	rows(glyphs, width, height) {
+		const groups = [...group(glyphs, (glyph) => glyph.group ?? "—")].sort(([a], [b]) => ascending(a, b));
+		const gutter = Math.min(width * .22, Math.max(...groups.map(([name]) => TextMetrics.width(name, 11))) + 12);
+		const widest = Math.max(...groups.map(([, members]) => members.length));
+		const fit = (columns) => {
+			const lines = sum(groups, ([, members]) => Math.ceil(members.length / columns));
+			return Math.min((width - gutter) / columns, height / lines);
+		};
+		const columns = Array.from({ length: widest }, (_, i) => i + 1).reduce((best, count) => fit(count) >= fit(best) ? count : best, 1);
+		const cell = fit(columns), lineHeight = height / sum(groups, ([, members]) => Math.ceil(members.length / columns));
+		const radius = Math.max(4, cell / 2 - 2);
+		let line = 0;
+		const headings = [], slots = [];
+		for (const [name, members] of groups) {
+			const lines = Math.ceil(members.length / columns);
+			headings.push({
+				text: name,
+				y: lineHeight * (line + lines / 2) + 4
+			});
+			members.forEach((glyph, i) => slots.push({
+				glyph,
+				radius,
+				labelled: false,
+				x: gutter + cell * (i % columns + .5),
+				y: lineHeight * (line + Math.floor(i / columns) + .5)
+			}));
+			line += lines;
+		}
+		return {
+			axes: null,
+			headings,
+			slots
+		};
+	}
+	/** Identity when the data is grouped, otherwise overall level. */
+	glyphFill(ctx, glyph) {
+		return glyph.group === null ? ctx.palette.sequential(.25 + .65 * glyph.score) : ctx.palette.color(glyph.group);
+	}
+	glyphRows(glyph) {
+		return this.fieldNames().map((field) => [field, Number(glyph.row[field] ?? 0)]);
+	}
+	draw(ctx) {
+		const { slots, headings, axes } = this.frame(ctx, this.glyphs());
+		const { width, height } = ctx.plot;
+		const place = (d, scale = 1) => `translate(${d.x},${d.y}) scale(${scale})`;
+		const cells = ctx.marks("glyphs", "g", slots, (d) => d.glyph.label);
+		ctx.set(cells, { transform: (d) => place(d) }, { transform: (d) => place(d, 0) }, 10);
+		const chart = this;
+		cells.each(function(slot) {
+			chart.drawGlyph(ctx, select(this), slot);
+		});
+		ctx.hover(cells, (d) => ({
+			title: d.glyph.label,
+			color: this.glyphFill(ctx, d.glyph),
+			rows: this.glyphRows(d.glyph)
+		}));
+		const names = slots.filter((slot) => slot.labelled);
+		ctx.text(ctx.marks("names", "text", names, (d) => d.glyph.label).attr("text-anchor", "middle").attr("x", (d) => d.x).attr("y", (d) => d.y + d.radius + 12).text((d) => TextMetrics.clip(d.glyph.label, 11, d.radius * 2 + 4)));
+		ctx.text(ctx.marks("headings", "text", headings, (d) => d.text).attr("x", 0).attr("y", (d) => d.y).text((d) => d.text));
+		const axisLabels = axes ? [{
+			text: `${axes[0]} →`,
+			x: width,
+			y: height - 2,
+			anchor: "end"
+		}, {
+			text: `↑ ${axes[1]}`,
+			x: 0,
+			y: height - 2,
+			anchor: "start"
+		}] : [];
+		ctx.text(ctx.marks("axis-names", "text", axisLabels, (d) => d.text).attr("x", (d) => d.x).attr("y", (d) => d.y).attr("text-anchor", (d) => d.anchor).text((d) => d.text), 11, "muted");
+	}
+};
+export { GlyphChart, PictorialGlyphLayout, PictorialGlyphOrder };

package/dist/charts/pictorial/IconArray.js

@@ -0,0 +1,207 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PictorialIcon } from "./PictorialIcons.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { UnitChart } from "./UnitChart.js";
+import { randomLcg, rollup, shuffler, sum } from "d3";
+// src/charts/pictorial/IconArray.ts
+var IconArrayFill = /* @__PURE__ */ function(IconArrayFill) {
+	IconArrayFill["Rows"] = "rows";
+	IconArrayFill["Columns"] = "columns";
+	IconArrayFill["Scatter"] = "scatter";
+	IconArrayFill["Center"] = "center";
+	return IconArrayFill;
+}({});
+var IconArrayShape = /* @__PURE__ */ function(IconArrayShape) {
+	IconArrayShape["Grid"] = "grid";
+	IconArrayShape["Staggered"] = "staggered";
+	IconArrayShape["Rings"] = "rings";
+	return IconArrayShape;
+}({});
+var IconArrayFacet = /* @__PURE__ */ function(IconArrayFacet) {
+	IconArrayFacet["Together"] = "together";
+	IconArrayFacet["PerCategory"] = "per-category";
+	return IconArrayFacet;
+}({});
+/** Risk-communication array: "23 in 100". Use it when a share must read as countable people or things. */
+var IconArray = class extends UnitChart {
+	static meta = {
+		id: "icon-array",
+		name: "Icon array",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows shares of a fixed population as coloured icons, the clearest way to communicate risk and frequency.",
+		tags: [
+			"risk",
+			"frequency",
+			"unit chart",
+			"waffle",
+			"people"
+		],
+		sample: (seed) => SampleData.categories(seed, 3, 1),
+		variants: {
+			fillOrder: [
+				"rows",
+				"columns",
+				"scatter",
+				"center"
+			],
+			shape: [
+				"grid",
+				"staggered",
+				"rings"
+			],
+			icon: [
+				PictorialIcon.Person,
+				PictorialIcon.Dot,
+				PictorialIcon.Square
+			],
+			facet: ["together", "per-category"],
+			total: [100, 200]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			total: 100,
+			fillOrder: "rows",
+			shape: "grid",
+			icon: PictorialIcon.Person,
+			facet: "together",
+			seed: 1
+		};
+	}
+	/** Largest-remainder rounding, so the counts always add up to `total`. */
+	shares() {
+		const { data, category, value, total } = this.options;
+		const entries = [...rollup(data, (rows) => sum(rows, (row) => Math.max(0, Number(row[value] ?? 0) || 0)), (row) => String(row[category] ?? "—"))].map(([name, amount]) => ({
+			category: name,
+			value: amount,
+			count: 0,
+			rest: 0
+		}));
+		const whole = sum(entries, (entry) => entry.value);
+		if (whole <= 0) return [];
+		for (const entry of entries) {
+			const exact = entry.value / whole * total;
+			entry.count = Math.floor(exact);
+			entry.rest = exact - entry.count;
+		}
+		const missing = total - sum(entries, (entry) => entry.count);
+		for (const entry of [...entries].sort((a, b) => b.rest - a.rest).slice(0, missing)) entry.count += 1;
+		return entries;
+	}
+	spots(count, box) {
+		const { width, height } = box;
+		if (this.options.shape === "rings") {
+			const pitch = Math.sqrt(Math.PI * Math.min(width, height) ** 2 / 4 / count) * .92;
+			const spots = [{
+				x: 0,
+				y: 0
+			}];
+			for (let ring = 1; spots.length < count; ring++) {
+				const seats = Math.round(2 * Math.PI * ring);
+				for (let seat = 0; seat < seats && spots.length < count; seat++) {
+					const angle = seat / seats * 2 * Math.PI - Math.PI / 2;
+					spots.push({
+						x: Math.cos(angle) * ring * pitch,
+						y: Math.sin(angle) * ring * pitch
+					});
+				}
+			}
+			return {
+				spots: spots.map((spot) => ({
+					x: box.x + width / 2 + spot.x,
+					y: box.y + height / 2 + spot.y
+				})),
+				size: pitch * .92
+			};
+		}
+		const staggered = this.options.shape === "staggered";
+		const stretch = staggered ? .88 : 1;
+		const fit = (cols) => Math.abs(Math.log(cols * cols * stretch / count / (width / height)));
+		const columns = Array.from({ length: count }, (_, i) => i + 1).filter((cols) => count % cols === 0).reduce((best, cols) => fit(cols) < fit(best) ? cols : best, 1);
+		const lines = Math.ceil(count / columns);
+		const pitch = Math.min(width / (columns + (staggered ? .5 : 0)), height / (lines * stretch));
+		const left = box.x + (width - pitch * (columns + (staggered ? .5 : 0))) / 2 + pitch / 2;
+		const top = box.y + (height - pitch * lines * stretch) / 2 + pitch * stretch / 2;
+		return {
+			spots: Array.from({ length: count }, (_, i) => {
+				const line = Math.floor(i / columns);
+				return {
+					x: left + i % columns * pitch + (staggered && line % 2 ? pitch / 2 : 0),
+					y: top + line * pitch * stretch
+				};
+			}),
+			size: pitch * .92
+		};
+	}
+	ordered(spots, box) {
+		const { fillOrder, seed } = this.options;
+		const list = [...spots];
+		const middle = {
+			x: box.x + box.width / 2,
+			y: box.y + box.height / 2
+		};
+		if (fillOrder === "rows") return list.sort((a, b) => a.y - b.y || a.x - b.x);
+		if (fillOrder === "columns") return list.sort((a, b) => a.x - b.x || a.y - b.y);
+		if (fillOrder === "center") return list.sort((a, b) => Math.hypot(a.x - middle.x, a.y - middle.y) - Math.hypot(b.x - middle.x, b.y - middle.y) || a.y - b.y || a.x - b.x);
+		return shuffler(randomLcg(seed * .413 % 1))(list);
+	}
+	array(ctx, box, prefix, slots) {
+		const { spots, size } = this.spots(slots.length, box);
+		const order = this.ordered(spots, box);
+		return slots.map((share, i) => {
+			const fill = share ? ctx.palette.color(share.category) : ctx.theme.grid;
+			return {
+				key: `${prefix}/${i}`,
+				icon: this.options.icon,
+				size,
+				fill,
+				part: 1,
+				ghost: !share,
+				x: order[i].x - size / 2,
+				y: order[i].y - size / 2,
+				tip: share ? {
+					title: share.category,
+					color: fill,
+					rows: [[this.options.value, share.value], ["Icons", `${share.count} of ${this.options.total}`]]
+				} : {}
+			};
+		});
+	}
+	draw(ctx) {
+		const { width, height } = ctx.plot;
+		const shares = this.shares();
+		if (this.options.facet === "together") {
+			const slots = shares.flatMap((share) => Array.from({ length: share.count }, () => share));
+			this.drawIcons(ctx, "icons", this.array(ctx, {
+				x: 0,
+				y: 0,
+				width,
+				height
+			}, "all", slots));
+			ctx.marks("facet-label", "text", []);
+			return;
+		}
+		const columns = shares.length ? Math.min(shares.length, Math.ceil(Math.sqrt(shares.length * width / height))) : 1;
+		const rows = Math.ceil(shares.length / columns);
+		const cellWidth = width / columns, cellHeight = height / rows;
+		const box = (i) => ({
+			x: i % columns * cellWidth + 6,
+			y: Math.floor(i / columns) * cellHeight + 18,
+			width: cellWidth - 12,
+			height: cellHeight - 22
+		});
+		const icons = shares.flatMap((share, i) => {
+			const slots = Array.from({ length: this.options.total }, (_, n) => n < share.count ? share : null);
+			return this.array(ctx, box(i), share.category, slots);
+		});
+		this.drawIcons(ctx, "icons", icons);
+		const labels = ctx.marks("facet-label", "text", shares, (share) => share.category).attr("x", (_, i) => box(i).x).attr("y", (_, i) => box(i).y - 6).text((share) => TextMetrics.clip(`${share.category}  ${share.count} in ${this.options.total}`, 11, cellWidth - 12));
+		ctx.text(labels);
+	}
+};
+export { IconArray, IconArrayFacet, IconArrayFill, IconArrayShape };

package/dist/charts/pictorial/IsotypeChart.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PictorialIcon } from "./PictorialIcons.js";
+import { TextMetrics } from "./TextMetrics.js";
+import { UnitChart } from "./UnitChart.js";
+import { descending, group, sum } from "d3";
+// src/charts/pictorial/IsotypeChart.ts
+var IsotypeLayout = /* @__PURE__ */ function(IsotypeLayout) {
+	IsotypeLayout["Sequence"] = "sequence";
+	IsotypeLayout["Lines"] = "lines";
+	IsotypeLayout["Mirror"] = "mirror";
+	return IsotypeLayout;
+}({});
+var IsotypeIcons = /* @__PURE__ */ function(IsotypeIcons) {
+	IsotypeIcons["Shared"] = "shared";
+	IsotypeIcons["PerSeries"] = "per-series";
+	return IsotypeIcons;
+}({});
+var SERIES_ICONS = [
+	PictorialIcon.Person,
+	PictorialIcon.Car,
+	PictorialIcon.House,
+	PictorialIcon.Tree,
+	PictorialIcon.Leaf,
+	PictorialIcon.Drop,
+	PictorialIcon.Bolt,
+	PictorialIcon.Heart
+];
+/** Neurath's picture statistics: whole icons, never scaled, compared by count across series. */
+var IsotypeChart = class extends UnitChart {
+	static meta = {
+		id: "isotype",
+		name: "Isotype",
+		family: ChartFamily.Pictorial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows quantities per category and series as counted whole icons, in the Isotype picture-statistics tradition.",
+		tags: [
+			"neurath",
+			"picture statistics",
+			"unit chart",
+			"pyramid"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 2),
+		variants: {
+			layout: [
+				"sequence",
+				"lines",
+				"mirror"
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			block: [
+				1,
+				5,
+				10
+			],
+			icons: ["shared", "per-series"],
+			ranked: [false, true]
+		},
+		valid: ({ layout, block }) => layout !== "mirror" || block !== 10
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			layout: "sequence",
+			orientation: Orientation.Horizontal,
+			block: 1,
+			icons: "shared",
+			ranked: false,
+			icon: PictorialIcon.Person
+		};
+	}
+	rows() {
+		const { data, category, series, value, ranked } = this.options;
+		const rows = [...group(data, (row) => String(row[category] ?? "—"))].map(([name, members]) => {
+			const parts = members.map((row) => ({
+				series: String(row[series] ?? "—"),
+				value: Math.max(0, Number(row[value] ?? 0) || 0)
+			}));
+			return {
+				category: name,
+				parts,
+				total: sum(parts, (part) => part.value)
+			};
+		});
+		return ranked ? rows.sort((a, b) => descending(a.total, b.total)) : rows;
+	}
+	draw(ctx) {
+		const { layout, orientation, block, icons: iconing, icon } = this.options;
+		const rows = this.rows();
+		if (!rows.length) return;
+		const horizontal = orientation === Orientation.Horizontal;
+		const { width, height } = ctx.plot;
+		const mirror = layout === "mirror", lines = layout === "lines";
+		const names = [...new Set(rows.flatMap((row) => row.parts.map((part) => part.series)))];
+		const side = (name) => mirror ? name === names[0] ? 0 : 1 : 0;
+		const gutter = horizontal ? Math.min(width * .26, Math.max(...rows.map((row) => TextMetrics.width(row.category, 11))) + 10) : 0;
+		const foot = horizontal ? 18 : 32;
+		const across = (horizontal ? height - foot : width) / rows.length;
+		const tracks = lines ? names.length : 1;
+		const thick = across * .9 / tracks;
+		const along = (horizontal ? width - gutter : height - foot) - 2;
+		const reach = (row, track) => sum(row.parts.filter((part) => mirror ? side(part.series) === Number(track) : !lines || part.series === track), (part) => part.value);
+		const largest = Math.max(...rows.flatMap((row) => mirror ? [reach(row, "0"), reach(row, "1")] : lines ? names.map((name) => reach(row, name)) : [row.total]));
+		const span = mirror ? along / 2 : along;
+		const gap = (i) => block > 1 ? Math.floor(i / block) * 3 : 0;
+		const unit = this.unitFor(largest, Math.floor(span / Math.max(9, Math.min(thick, 15))));
+		const count = Math.max(1, Math.ceil(largest / unit));
+		const size = Math.min(thick, (span - gap(count - 1)) / count);
+		const symbolOf = (name) => iconing === "per-series" ? SERIES_ICONS[names.indexOf(name) % SERIES_ICONS.length] : icon;
+		const placed = rows.flatMap((row, index) => {
+			const out = [];
+			const cursors = /* @__PURE__ */ new Map();
+			let cumulative = 0, drawn = 0;
+			for (const part of row.parts) {
+				cumulative += part.value;
+				const whole = Math.round(cumulative / unit) - drawn;
+				drawn += whole;
+				const track = mirror ? String(side(part.series)) : lines ? part.series : "all";
+				const fill = ctx.palette.color(part.series);
+				for (let i = 0; i < whole; i++) {
+					const step = cursors.get(track) ?? 0;
+					cursors.set(track, step + 1);
+					const offset = step * size + gap(step);
+					const lane = across * index + (across - thick * tracks) / 2 + (lines ? names.indexOf(part.series) * thick : 0);
+					const run = mirror ? track === "0" ? span - offset - size : span + 2 + offset : offset;
+					out.push({
+						key: `${row.category}/${part.series}/${i}`,
+						icon: symbolOf(part.series),
+						size,
+						fill,
+						part: 1,
+						x: horizontal ? gutter + run : lane + (thick - size) / 2,
+						y: horizontal ? lane + (thick - size) / 2 : height - foot - run - size,
+						tip: {
+							title: row.category,
+							color: fill,
+							rows: [[part.series, part.value], ["Icons", whole]]
+						}
+					});
+				}
+			}
+			return out;
+		});
+		this.drawIcons(ctx, "icons", placed);
+		const labels = ctx.marks("labels", "text", rows, (row) => row.category).attr("x", (_, i) => horizontal ? gutter - 8 : across * (i + .5)).attr("y", (_, i) => horizontal ? across * (i + .5) + 4 : height - foot + 14).attr("text-anchor", horizontal ? "end" : "middle").text((row) => TextMetrics.clip(row.category, 11, horizontal ? gutter - 8 : across - 4));
+		ctx.text(labels);
+		const spine = mirror ? [gutter * Number(horizontal) + span + 1] : [];
+		ctx.marks("spine", "line", spine, String).attr("stroke", ctx.theme.axis).attr("x1", (d) => horizontal ? d : 0).attr("x2", (d) => horizontal ? d : width).attr("y1", (d) => horizontal ? 0 : height - foot - d).attr("y2", (d) => horizontal ? height - foot : height - foot - d);
+		this.drawUnitKey(ctx, unit, icon, ctx.theme.inkMuted, width, height - 3);
+	}
+};
+export { IsotypeChart, IsotypeIcons, IsotypeLayout };