@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/density/QuadtreeChart.js

@@ -0,0 +1,147 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { ascending, max, quantile } from "d3";
+// src/charts/density/QuadtreeChart.ts
+/** The space-partitioning algorithm. */
+var SpatialPartition = /* @__PURE__ */ function(SpatialPartition) {
+	SpatialPartition["Quadtree"] = "quadtree";
+	SpatialPartition["PointQuadtree"] = "point-quadtree";
+	SpatialPartition["KdAlternating"] = "kd-alternating";
+	SpatialPartition["KdWidest"] = "kd-widest";
+	return SpatialPartition;
+}({});
+var PartitionMark = /* @__PURE__ */ function(PartitionMark) {
+	PartitionMark["Tile"] = "tile";
+	PartitionMark["Outline"] = "outline";
+	PartitionMark["Bubble"] = "bubble";
+	return PartitionMark;
+}({});
+var MAX_DEPTH = 10;
+var BUBBLE_SCALE = 1.8;
+/** Adaptive binning: cells shrink where data is dense. Use it for data with very uneven density, where fixed bins fail. */
+var QuadtreeChart = class extends PointDensityChart {
+	static meta = {
+		id: "density-quadtree",
+		name: "Quadtree density",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Splits space recursively until each cell holds few points, so resolution follows density, using quadtree or k-d partitions.",
+		tags: [
+			"adaptive binning",
+			"k-d tree",
+			"spatial index"
+		],
+		sample: (seed) => SampleData.points(seed, 480, 3),
+		variants: {
+			partition: Object.values(SpatialPartition),
+			capacity: [
+				6,
+				2,
+				16
+			],
+			mark: [
+				"tile",
+				"outline",
+				"bubble"
+			],
+			sites: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			partition: "quadtree",
+			capacity: 6,
+			mark: "tile",
+			sites: false
+		};
+	}
+	get sizeEncoded() {
+		return this.options.mark !== "tile";
+	}
+	split(points, x0, y0, x1, y1, depth, key, out) {
+		const { capacity, partition } = this.options;
+		if (points.length <= capacity || depth >= MAX_DEPTH) {
+			out.push({
+				key,
+				x0,
+				y0,
+				x1,
+				y1,
+				depth,
+				count: points.length,
+				density: points.length / Math.max(1, (x1 - x0) * (y1 - y0))
+			});
+			return;
+		}
+		const middle = (values, low, high) => {
+			const cut = quantile(values.sort(ascending), .5) ?? (low + high) / 2;
+			return cut > low && cut < high ? cut : (low + high) / 2;
+		};
+		const px = points.map((d) => d.px), py = points.map((d) => d.py);
+		const halve = (vertical) => {
+			const cut = vertical ? middle(px, x0, x1) : middle(py, y0, y1);
+			const first = points.filter((d) => (vertical ? d.px : d.py) < cut), second = points.filter((d) => (vertical ? d.px : d.py) >= cut);
+			if (vertical) {
+				this.split(first, x0, y0, cut, y1, depth + 1, `${key}0`, out);
+				this.split(second, cut, y0, x1, y1, depth + 1, `${key}1`, out);
+			} else {
+				this.split(first, x0, y0, x1, cut, depth + 1, `${key}0`, out);
+				this.split(second, x0, cut, x1, y1, depth + 1, `${key}1`, out);
+			}
+		};
+		if (partition === "kd-alternating") return halve(depth % 2 === 0);
+		if (partition === "kd-widest") return halve(x1 - x0 >= y1 - y0);
+		const mx = partition === "point-quadtree" ? middle(px, x0, x1) : (x0 + x1) / 2;
+		const my = partition === "point-quadtree" ? middle(py, y0, y1) : (y0 + y1) / 2;
+		const quadrant = (right, below, a0, b0, a1, b1) => this.split(points.filter((d) => d.px >= mx === right && d.py >= my === below), a0, b0, a1, b1, depth + 1, `${key}${+right}${+below}`, out);
+		quadrant(false, false, x0, y0, mx, my);
+		quadrant(true, false, mx, y0, x1, my);
+		quadrant(false, true, x0, my, mx, y1);
+		quadrant(true, true, mx, my, x1, y1);
+	}
+	drawDensity(ctx, _axes, points) {
+		const { mark, sites } = this.options;
+		const { width, height } = ctx.plot;
+		const leaves = [];
+		this.split(points, 0, 0, width, height, 0, "r", leaves);
+		const peak = Math.sqrt(max(leaves, (d) => d.density) || 1);
+		const tone = (d) => d.count ? ctx.palette.sequential(.1 + .9 * Math.sqrt(d.density) / peak) : ctx.theme.grid;
+		const tile = mark === "tile", bubble = mark === "bubble";
+		const gap = (d) => Math.min(tile ? 2 : 0, (d.x1 - d.x0) / 2, (d.y1 - d.y0) / 2);
+		const cells = ctx.marks("cells", "rect", leaves, (d) => d.key).attr("fill", (d) => tile ? tone(d) : "transparent").attr("fill-opacity", (d) => tile && !d.count ? .5 : 1).attr("stroke", tile ? "none" : bubble ? ctx.theme.grid : ctx.theme.axis).attr("stroke-width", .75);
+		this.reveal(ctx, cells, {
+			x: (d) => d.x0 + gap(d) / 2,
+			y: (d) => d.y0 + gap(d) / 2,
+			width: (d) => d.x1 - d.x0 - gap(d),
+			height: (d) => d.y1 - d.y0 - gap(d)
+		}, 1);
+		const counted = bubble ? leaves.filter((d) => d.count) : [];
+		const radius = (d) => BUBBLE_SCALE * Math.sqrt(d.count);
+		const fill = ctx.palette.sequential(.72);
+		const bubbles = ctx.marks("bubbles", "circle", counted, (d) => d.key).attr("fill", fill);
+		ctx.set(bubbles, {
+			cx: (d) => (d.x0 + d.x1) / 2,
+			cy: (d) => (d.y0 + d.y1) / 2,
+			r: radius
+		}, {
+			cx: (d) => (d.x0 + d.x1) / 2,
+			cy: (d) => (d.y0 + d.y1) / 2,
+			r: 0
+		}, 1);
+		for (const marks of [cells, bubbles]) ctx.hover(marks, (d) => ({
+			color: tone(d),
+			rows: [["Points", d.count], ["Depth", d.depth]]
+		}));
+		const dots = ctx.marks("sites", "circle", sites ? points : [], (_, i) => i).attr("fill", ctx.palette.sequential(.85)).attr("fill-opacity", .8).style("pointer-events", "none");
+		ctx.set(dots, {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: 1.5
+		});
+		this.showRamp(ctx, 1, (t) => ctx.palette.sequential(.1 + .9 * t), (t) => `${Math.round(t * t * 100)}%`);
+	}
+};
+export { PartitionMark, QuadtreeChart, SpatialPartition };

package/dist/charts/density/RasterDensity.js

@@ -0,0 +1,140 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DensityBandwidth, DensityKernel, DensityTransform } from "./DensityEnums.js";
+import { KernelField } from "./KernelField.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { ShadeRaster } from "./ShadeRaster.js";
+// src/charts/density/RasterDensity.ts
+/** How estimates turn into pixels: a few flat shades, many fine shades, or an ordered dither of two tones per cell. */
+var RasterShading = /* @__PURE__ */ function(RasterShading) {
+	RasterShading["Quantized"] = "quantized";
+	RasterShading["Continuous"] = "continuous";
+	RasterShading["Dithered"] = "dithered";
+	return RasterShading;
+}({});
+var BAYER = [
+	0,
+	8,
+	2,
+	10,
+	12,
+	4,
+	14,
+	6,
+	3,
+	11,
+	1,
+	9,
+	15,
+	7,
+	13,
+	5
+].map((v) => (v + .5) / 16);
+var LOG_GAIN = 31;
+var STEPS = {
+	["quantized"]: 7,
+	["continuous"]: 28,
+	["dithered"]: 4
+};
+/** A pixel-grid density image. Use it for very large point sets, or when exact smooth tone matters more than outlines. */
+var RasterDensity = class extends PointDensityChart {
+	static meta = {
+		id: "density-raster",
+		name: "Raster density",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Rasterises a kernel density into a fixed pixel grid, with quantised, continuous or dithered tone and a choice of tone transform.",
+		tags: [
+			"heat",
+			"image",
+			"datashader",
+			"dither"
+		],
+		sample: (seed) => SampleData.points(seed, 480, 3),
+		variants: {
+			resolution: [
+				64,
+				32,
+				96
+			],
+			shading: [
+				"quantized",
+				"continuous",
+				"dithered"
+			],
+			transform: [
+				DensityTransform.Linear,
+				DensityTransform.Sqrt,
+				DensityTransform.Log
+			],
+			bandwidth: [
+				DensityBandwidth.Scott,
+				DensityBandwidth.Narrow,
+				DensityBandwidth.Wide
+			],
+			kernel: [DensityKernel.Gaussian, DensityKernel.Box]
+		},
+		valid: ({ kernel, shading }) => kernel === DensityKernel.Gaussian || shading === "quantized"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			resolution: 64,
+			shading: "quantized",
+			transform: DensityTransform.Linear,
+			kernel: DensityKernel.Gaussian,
+			bandwidth: DensityBandwidth.Scott
+		};
+	}
+	/** Forward tone mapping of `share` of peak, and its inverse for the legend. */
+	mapper() {
+		switch (this.options.transform) {
+			case DensityTransform.Sqrt: return {
+				tone: Math.sqrt,
+				share: (t) => t * t
+			};
+			case DensityTransform.Log: return {
+				tone: (v) => Math.log1p(v * LOG_GAIN) / Math.log1p(LOG_GAIN),
+				share: (t) => Math.expm1(t * Math.log1p(LOG_GAIN)) / LOG_GAIN
+			};
+			default: return {
+				tone: (v) => v,
+				share: (t) => t
+			};
+		}
+	}
+	drawDensity(ctx, _axes, points) {
+		const { resolution, shading, kernel, bandwidth } = this.options;
+		const { width, height } = ctx.plot;
+		const columns = resolution, rows = Math.max(2, Math.round(columns * height / width));
+		const field = new KernelField(points.map(({ px, py }) => ({
+			px,
+			py
+		})), width, height, {
+			kernel,
+			bandwidth,
+			cell: width / columns
+		});
+		const steps = STEPS[shading], top = field.max || 1, map = this.mapper();
+		const dithered = shading === "dithered";
+		const shades = Int16Array.from({ length: columns * rows }, (_, k) => {
+			const i = k % columns, j = Math.floor(k / columns);
+			const value = field.at((i + .5) * width / columns, (j + .5) * height / rows);
+			const level = map.tone(value / top);
+			if (value <= 0 || level < .02) return -1;
+			const scaled = level * steps + (dithered ? BAYER[i % 4 + j % 4 * 4] - .5 : -.5);
+			return Math.max(0, Math.min(steps - 1, Math.round(scaled)));
+		});
+		const layers = ShadeRaster.layers(shades, columns, rows, width, height);
+		const tone = (shade) => ctx.palette.sequential((shade + 1) / steps);
+		const raster = ctx.marks("raster", "path", layers, (d) => d.shade).attr("fill", (d) => tone(d.shade)).attr("shape-rendering", "crispEdges");
+		this.reveal(ctx, raster, { d: (d) => d.d }, 20);
+		ctx.hover(raster, (d) => ({
+			color: tone(d.shade),
+			rows: [["Tone", `${d.shade + 1} of ${steps}`]]
+		}));
+		this.showRamp(ctx, 1, ctx.palette.sequential, (t) => `${Math.round(map.share(t) * 100)}%`);
+	}
+};
+export { RasterDensity, RasterShading };

package/dist/charts/density/ShadeRaster.js

@@ -0,0 +1,27 @@
+// src/charts/density/ShadeRaster.ts
+/** Turns a `columns × rows` grid of shade indexes into one crisp path per shade, merging horizontal runs. Negative shades are left empty. */
+var ShadeRaster = class {
+	static layers(shades, columns, rows, width, height) {
+		const paths = /* @__PURE__ */ new Map();
+		const edgeX = (i) => Math.round(i * width / columns), edgeY = (j) => Math.round(j * height / rows);
+		for (let j = 0; j < rows; j++) {
+			let i = 0;
+			while (i < columns) {
+				const shade = shades[i + j * columns];
+				let end = i + 1;
+				while (end < columns && shades[end + j * columns] === shade) end++;
+				if (shade >= 0) {
+					const list = paths.get(shade) ?? [];
+					list.push(`M${edgeX(i)} ${edgeY(j)}H${edgeX(end)}V${edgeY(j + 1)}H${edgeX(i)}Z`);
+					paths.set(shade, list);
+				}
+				i = end;
+			}
+		}
+		return [...paths].sort(([a], [b]) => a - b).map(([shade, list]) => ({
+			shade,
+			d: list.join("")
+		}));
+	}
+};
+export { ShadeRaster };

package/dist/charts/density/StippleDensity.js

@@ -0,0 +1,121 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DensityBandwidth, DensityTransform } from "./DensityEnums.js";
+import { KernelField } from "./KernelField.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { Delaunay, randomLcg } from "d3";
+// src/charts/density/StippleDensity.ts
+var TIERS = 5;
+var RADIUS = 1.1;
+/** Weighted Voronoi stippling, the pen-and-ink way to draw a density. Use it for editorial graphics and print. */
+var StippleDensity = class extends PointDensityChart {
+	static meta = {
+		id: "density-stipple",
+		name: "Stipple density",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Redraws a kernel density as evenly spaced ink dots using weighted Voronoi stippling, so tone comes from dot spacing alone.",
+		tags: [
+			"stippling",
+			"lloyd",
+			"pointillism",
+			"print"
+		],
+		sample: (seed) => SampleData.points(seed, 480, 3),
+		variants: {
+			stipples: [
+				900,
+				1600,
+				450
+			],
+			iterations: [
+				8,
+				0,
+				24
+			],
+			sized: [false, true],
+			transform: [DensityTransform.Linear, DensityTransform.Sqrt],
+			bandwidth: [
+				DensityBandwidth.Scott,
+				DensityBandwidth.Narrow,
+				DensityBandwidth.Wide
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			stipples: 900,
+			iterations: 8,
+			sized: false,
+			transform: DensityTransform.Linear,
+			bandwidth: DensityBandwidth.Scott
+		};
+	}
+	seed(field, weight, stream) {
+		const { width, height, max } = field, peak = weight(max);
+		const stipples = [];
+		for (let tries = 0; stipples.length < this.options.stipples && tries < this.options.stipples * 60; tries++) {
+			const x = stream() * width, y = stream() * height;
+			if (stream() * peak < weight(field.at(x, y))) stipples.push([x, y]);
+		}
+		return stipples;
+	}
+	refine(stipples, field, weight) {
+		let current = stipples;
+		for (let pass = 0; pass < this.options.iterations && current.length > 2; pass++) {
+			const mesh = Delaunay.from(current);
+			const mass = new Float64Array(current.length), sumX = new Float64Array(current.length), sumY = new Float64Array(current.length);
+			let hint = 0;
+			for (let j = 0; j < field.rows; j++) for (let i = 0; i < field.columns; i++) {
+				const w = weight(field.values[i + j * field.columns]);
+				if (!w) continue;
+				const x = (i + .5) * field.cellWidth, y = (j + .5) * field.cellHeight;
+				hint = mesh.find(x, y, hint);
+				mass[hint] += w;
+				sumX[hint] += w * x;
+				sumY[hint] += w * y;
+			}
+			current = current.map((stipple, k) => mass[k] ? [sumX[k] / mass[k], sumY[k] / mass[k]] : stipple);
+		}
+		return current;
+	}
+	drawDensity(ctx, _axes, points) {
+		const { sized, transform, bandwidth } = this.options;
+		const { width, height } = ctx.plot;
+		const field = new KernelField(points.map(({ px, py }) => ({
+			px,
+			py
+		})), width, height, {
+			bandwidth,
+			cell: 3
+		});
+		const weight = transform === DensityTransform.Sqrt ? Math.sqrt : (v) => v;
+		const stipples = field.max ? this.refine(this.seed(field, weight, randomLcg(.417)), field, weight) : [];
+		const tiers = Array.from({ length: TIERS }, (_, tier) => ({
+			tier,
+			d: [],
+			count: 0
+		}));
+		for (const [x, y] of stipples) {
+			const share = field.at(x, y) / (field.max || 1);
+			const tier = tiers[Math.min(4, Math.floor(share * TIERS))];
+			const r = sized ? +(RADIUS * (.7 + .25 * tier.tier * 1.4)).toFixed(2) : RADIUS;
+			tier.d.push(`M${(x - r).toFixed(1)},${y.toFixed(1)}a${r},${r} 0 1,0 ${r * 2},0a${r},${r} 0 1,0 ${-r * 2},0`);
+			tier.count++;
+		}
+		const fill = ctx.palette.sequential(.85);
+		const layers = tiers.filter((tier) => tier.count);
+		const marks = ctx.marks("stipples", "path", layers, (d) => d.tier).attr("fill", fill);
+		this.reveal(ctx, marks, { d: (d) => d.d.join("") }, 60);
+		ctx.hover(marks, (d) => ({
+			color: fill,
+			rows: [["Stipples", d.count], ["Density", `${d.tier * 20}-${(d.tier + 1) * 20}% of peak`]]
+		}));
+	}
+	get sizeEncoded() {
+		return true;
+	}
+};
+export { StippleDensity };

package/dist/charts/density/SunflowerPlot.js

@@ -0,0 +1,94 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DotLattice, LatticeKind } from "./DotLattice.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { max } from "d3";
+// src/charts/density/SunflowerPlot.ts
+var SunflowerPetal = /* @__PURE__ */ function(SunflowerPetal) {
+	SunflowerPetal["Line"] = "line";
+	SunflowerPetal["Leaf"] = "leaf";
+	return SunflowerPetal;
+}({});
+var MAX_PETALS = 30;
+/** Cleveland's sunflower plot: every petal is a count. Use it when overplotted data must stay countable by eye. */
+var SunflowerPlot = class extends PointDensityChart {
+	static meta = {
+		id: "density-sunflower",
+		name: "Sunflower plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Replaces overplotted points with a flower at each bin whose petals count the points there.",
+		tags: [
+			"overplotting",
+			"cleveland",
+			"glyph"
+		],
+		sample: (seed) => SampleData.points(seed, 320, 3),
+		variants: {
+			bins: [
+				14,
+				10,
+				20
+			],
+			lattice: [LatticeKind.Hexagonal, LatticeKind.Square],
+			petal: ["line", "leaf"],
+			unit: [
+				1,
+				3,
+				6
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			bins: 14,
+			lattice: LatticeKind.Hexagonal,
+			petal: "line",
+			unit: 1
+		};
+	}
+	get sizeEncoded() {
+		return true;
+	}
+	flower(node, petals, length, leaf) {
+		return Array.from({ length: petals }, (_, k) => {
+			const angle = k / petals * 2 * Math.PI - Math.PI / 2;
+			const ux = Math.cos(angle), uy = Math.sin(angle);
+			const x0 = node.cx + ux * 2.5, y0 = node.cy + uy * 2.5, x1 = node.cx + ux * length, y1 = node.cy + uy * length;
+			if (!leaf) return `M${x0.toFixed(1)},${y0.toFixed(1)}L${x1.toFixed(1)},${y1.toFixed(1)}`;
+			const midX = (x0 + x1) / 2, midY = (y0 + y1) / 2, side = Math.min(2.4, Math.PI * length / (petals * 2.2));
+			return `M${x0.toFixed(1)},${y0.toFixed(1)}Q${(midX - uy * side).toFixed(1)},${(midY + ux * side).toFixed(1)} ${x1.toFixed(1)},${y1.toFixed(1)}Q${(midX + uy * side).toFixed(1)},${(midY - ux * side).toFixed(1)} ${x0.toFixed(1)},${y0.toFixed(1)}Z`;
+		}).join("");
+	}
+	drawDensity(ctx, _axes, points) {
+		const { bins, lattice, petal, unit } = this.options;
+		const { width, height } = ctx.plot;
+		const step = width / bins;
+		const nodes = new DotLattice(lattice, step, width, height).bin(points, (d) => [d.px, d.py]).filter((node) => node.members.length);
+		const top = max(nodes, (node) => node.members.length) ?? 1;
+		const perPetal = Math.max(unit, Math.ceil(top / MAX_PETALS));
+		const leaf = petal === "leaf";
+		const tone = ctx.palette.sequential(.72);
+		const petals = (d) => Math.ceil(d.members.length / perPetal);
+		const flowers = ctx.marks("flowers", "path", nodes, (d) => d.key).attr("stroke-linecap", "round").attr("fill", leaf ? tone : "none").attr("stroke", leaf ? "none" : tone).attr("stroke-width", 1.5);
+		const flower = (length) => (d) => this.flower(d, petals(d) > 1 || perPetal > 1 ? petals(d) : 0, length, leaf);
+		ctx.set(flowers, { d: flower(step * .47) }, { d: flower(3) }, 3);
+		ctx.hover(flowers, (d) => ({
+			color: tone,
+			rows: [["Points", d.members.length], ["Points per petal", perPetal]]
+		}));
+		const seeds = ctx.marks("seeds", "circle", nodes, (d) => d.key).attr("fill", ctx.palette.sequential(1));
+		ctx.set(seeds, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: 2.5
+		}, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: 0
+		});
+	}
+};
+export { SunflowerPetal, SunflowerPlot };

package/dist/charts/density/TileMapDensity.js

@@ -0,0 +1,119 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ZoomAxis } from "../../core/ChartViewport.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DotLattice, LatticeKind } from "./DotLattice.js";
+import { PlaneGeometry } from "./PlaneGeometry.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { max } from "d3";
+// src/charts/density/TileMapDensity.ts
+var LEVEL = 4;
+var TileShape = /* @__PURE__ */ function(TileShape) {
+	TileShape["Square"] = "square";
+	TileShape["Circle"] = "circle";
+	TileShape["Diamond"] = "diamond";
+	TileShape["Hexagon"] = "hexagon";
+	return TileShape;
+}({});
+/** Tone on a full tile, or a tile whose area follows the count. */
+var TileFit = /* @__PURE__ */ function(TileFit) {
+	TileFit["Full"] = "full";
+	TileFit["Area"] = "area";
+	return TileFit;
+}({});
+/** A slippy-map style tile grid of counts. Use it for a stylised, labelled overview of where activity falls. */
+var TileMapDensity = class extends PointDensityChart {
+	static meta = {
+		id: "density-tile-map",
+		name: "Tile map density",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Aggregates points into separate tiles at a chosen zoom level, like a map tile pyramid, with tone or area showing the count.",
+		tags: [
+			"tile grid",
+			"mosaic",
+			"zoom level"
+		],
+		sample: (seed) => SampleData.points(seed, 700, 3),
+		variants: {
+			zoom: [
+				4,
+				3,
+				5
+			],
+			tile: [
+				"square",
+				"circle",
+				"diamond",
+				"hexagon"
+			],
+			arrangement: [LatticeKind.Square, LatticeKind.Brick],
+			fit: ["full", "area"],
+			labels: [true, false]
+		},
+		valid: ({ labels, fit, zoom }) => !labels || fit === "full" && zoom !== 5
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			zoom: LEVEL,
+			tile: "square",
+			arrangement: LatticeKind.Square,
+			fit: "full",
+			labels: true
+		};
+	}
+	get level() {
+		return typeof this.options.zoom === "number" ? this.options.zoom : LEVEL;
+	}
+	/** `zoom` is the tile level here, so an interactive `zoom: true` is refused rather than read as a level. */
+	zoomAxes() {
+		return typeof this.options.zoom === "number" ? ZoomAxis.XY : null;
+	}
+	get sizeEncoded() {
+		return this.options.fit === "area";
+	}
+	outline(cx, cy, half) {
+		switch (this.options.tile) {
+			case "circle": return PlaneGeometry.disc(cx, cy, half, 24);
+			case "diamond": return [
+				[cx, cy - half],
+				[cx + half, cy],
+				[cx, cy + half],
+				[cx - half, cy]
+			];
+			case "hexagon": return PlaneGeometry.hexagon(cx, cy, half);
+			default: return PlaneGeometry.rounded([
+				[cx - half, cy - half],
+				[cx + half, cy - half],
+				[cx + half, cy + half],
+				[cx - half, cy + half]
+			], 1).map(([x, y]) => [x, y]);
+		}
+	}
+	drawDensity(ctx, _axes, points) {
+		const { arrangement, fit, labels } = this.options;
+		const { width, height } = ctx.plot;
+		const step = width / 2 ** this.level;
+		const nodes = new DotLattice(arrangement, step, width, height).bin(points, (d) => [d.px, d.py]);
+		const top = max(nodes, (node) => node.members.length) || 1;
+		const half = step / 2 - 1;
+		const tone = (d) => d.members.length ? ctx.palette.sequential(fit === "full" ? .12 + .88 * d.members.length / top : .72) : ctx.theme.grid;
+		const size = (d) => fit === "full" || !d.members.length ? half : Math.max(1.5, half * Math.sqrt(d.members.length / top));
+		const path = (d, radius) => PlaneGeometry.path(this.outline(d.cx, d.cy, radius));
+		const tiles = ctx.marks("tiles", "path", nodes, (d) => d.key).attr("fill", tone).attr("fill-opacity", (d) => d.members.length ? 1 : .55);
+		ctx.set(tiles, { d: (d) => path(d, size(d)) }, { d: (d) => path(d, .5) }, 2);
+		ctx.hover(tiles, (d) => ({
+			color: tone(d),
+			rows: [["Points", d.members.length]]
+		}));
+		const room = labels ? nodes.filter((d) => d.members.length && String(d.members.length).length * 6.2 < step - 6) : [];
+		const text = ctx.marks("tile-labels", "text", room, (d) => d.key).attr("text-anchor", "middle").attr("dy", "0.34em").attr("font-size", 10.5).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => this.inkOn(ctx, tone(d))).style("pointer-events", "none").text((d) => d.members.length);
+		ctx.set(text, {
+			x: (d) => d.cx,
+			y: (d) => d.cy
+		});
+		this.showRamp(ctx, top, (t) => ctx.palette.sequential(.12 + .88 * t));
+	}
+};
+export { TileFit, TileMapDensity, TileShape };