@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scatter/ScatterBase.js

@@ -0,0 +1,283 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { Scales } from "../../core/Scales.js";
+import { ScaleKind, SymbolKind } from "../../core/enums.js";
+import { extent, scaleUtc, symbol } from "d3";
+// src/charts/scatter/ScatterBase.ts
+var ScatterScaling = /* @__PURE__ */ function(ScatterScaling) {
+	ScatterScaling["Linear"] = "linear";
+	ScatterScaling["SemilogX"] = "semilog-x";
+	ScatterScaling["SemilogY"] = "semilog-y";
+	ScatterScaling["LogLog"] = "log-log";
+	ScatterScaling["SqrtX"] = "sqrt-x";
+	ScatterScaling["SqrtY"] = "sqrt-y";
+	ScatterScaling["SqrtSqrt"] = "sqrt-sqrt";
+	return ScatterScaling;
+}({});
+var X_KIND = {
+	["semilog-x"]: ScaleKind.Log,
+	["log-log"]: ScaleKind.Log,
+	["sqrt-x"]: ScaleKind.Sqrt,
+	["sqrt-sqrt"]: ScaleKind.Sqrt
+};
+var Y_KIND = {
+	["semilog-y"]: ScaleKind.Log,
+	["log-log"]: ScaleKind.Log,
+	["sqrt-y"]: ScaleKind.Sqrt,
+	["sqrt-sqrt"]: ScaleKind.Sqrt
+};
+var ScatterDomain = /* @__PURE__ */ function(ScatterDomain) {
+	ScatterDomain["Tight"] = "tight";
+	ScatterDomain["Zero"] = "zero";
+	return ScatterDomain;
+}({});
+var ScatterMarker = /* @__PURE__ */ function(ScatterMarker) {
+	ScatterMarker["Circle"] = "circle";
+	ScatterMarker["PerGroup"] = "per-group";
+	ScatterMarker["Diamond"] = "diamond";
+	ScatterMarker["Square"] = "square";
+	return ScatterMarker;
+}({});
+var GROUP_SYMBOLS = [
+	SymbolKind.Circle,
+	SymbolKind.Square,
+	SymbolKind.Diamond,
+	SymbolKind.Triangle,
+	SymbolKind.Wye,
+	SymbolKind.Star,
+	SymbolKind.Cross
+];
+var SCATTER_ALL = "All";
+var scatterNumber = (value) => value === null || value === void 0 || value === "" ? NaN : +value;
+var scatterKey = (point) => point.index;
+/** Decades crowd a log axis: above one decade of span, label only 1, 2 and 5 of each. */
+function thinLogTicks(scale, format) {
+	if (!format || !("base" in scale)) return format;
+	const [low, high] = scale.domain();
+	if (high / low < 8) return format;
+	return (value) => {
+		const lead = +value / 10 ** Math.floor(Math.log10(+value) + 1e-9);
+		return [
+			1,
+			2,
+			5
+		].some((mantissa) => Math.abs(lead - mantissa) < 1e-6) ? format(value) : "";
+	};
+}
+/** Shared pipeline of x/y point charts: clean rows, fit scales inside a frame, draw identity-coloured dots. */
+var ScatterBase = class extends CartesianChart {
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			group: "group",
+			size: "size",
+			label: "label",
+			scaling: "linear",
+			xScale: ScaleKind.Linear,
+			yScale: ScaleKind.Linear,
+			domain: "tight",
+			marker: "circle",
+			radius: 5
+		};
+	}
+	get xKind() {
+		return X_KIND[this.options.scaling] ?? this.options.xScale;
+	}
+	get yKind() {
+		return Y_KIND[this.options.scaling] ?? this.options.yScale;
+	}
+	/** Rows with usable coordinates; a log axis cannot place values at or below zero. */
+	points() {
+		const { data, x, y, group, size, label } = this.options;
+		const xLog = this.xKind === ScaleKind.Log, yLog = this.yKind === ScaleKind.Log;
+		return (data ?? []).flatMap((row, index) => {
+			const px = scatterNumber(row[x]), py = scatterNumber(row[y]);
+			if (!Number.isFinite(px) || !Number.isFinite(py)) return [];
+			if (xLog && px <= 0 || yLog && py <= 0) return [];
+			const magnitude = scatterNumber(row[size]);
+			return [{
+				x: px,
+				y: py,
+				group: String(row[group] ?? "All"),
+				size: Number.isFinite(magnitude) ? magnitude : 0,
+				label: String(row[label] ?? ""),
+				row,
+				index
+			}];
+		});
+	}
+	/** Plot rectangle available to the point cloud. Override to reserve room for marginals. */
+	frame(ctx) {
+		return {
+			left: 0,
+			right: ctx.plot.width,
+			top: 0,
+			bottom: ctx.plot.height
+		};
+	}
+	/** Extra px between the frame and the data, for marks wider than a dot. */
+	inset() {
+		return 0;
+	}
+	/** Values the x axis must show. Override to include error extents and the like. */
+	xValues(points) {
+		return points.map((point) => point.x);
+	}
+	yValues(points) {
+		return points.map((point) => point.y);
+	}
+	scales(ctx) {
+		const points = this.points(), { left, right, top, bottom } = this.frame(ctx), inset = this.inset();
+		return {
+			x: this.axisScale(this.options.x, this.xValues(points), this.xKind, [left + inset, right - inset]),
+			y: this.axisScale(this.options.y, this.yValues(points), this.yKind, [bottom - inset, top + inset])
+		};
+	}
+	axisScale(column, values, kind, range) {
+		const [low = 0, high = 1] = extent(values);
+		const pad = (high - low) * .06 || Math.abs(high) * .1 || 1;
+		if (this.options.data?.find((row) => row[column] !== null && row[column] !== void 0)?.[column] instanceof Date) return scaleUtc([low - pad, high + pad], range);
+		if (kind === ScaleKind.Log) {
+			const start = low > 0 ? low / 1.12 : 1;
+			return Scales.continuous(kind).domain([start, high > low ? high * 1.12 : start * 10]).range(range);
+		}
+		const zero = this.options.domain === "zero";
+		return Scales.continuous(kind).domain([zero ? Math.min(0, low) : low - pad, zero ? Math.max(0, high + pad) : high + pad]).range(range).nice();
+	}
+	tickFormat(scale) {
+		return thinLogTicks(scale, super.tickFormat(scale));
+	}
+	plotMarks(ctx, axes) {
+		this.drawFrameGrid(ctx, axes);
+		const clean = this.points();
+		this.registerColors(ctx, clean);
+		this.plotPoints(ctx, axes, clean.map((point) => ({
+			...point,
+			px: axes.x(point.x),
+			py: axes.y(point.y)
+		})));
+	}
+	/** Fixes first-seen colour order to the data order, whatever order the marks draw in. */
+	registerColors(ctx, points) {
+		points.forEach((point) => this.hue(ctx, point));
+	}
+	drawFrameGrid(ctx, axes) {
+		const { left, right, top, bottom } = this.frame(ctx);
+		ctx.group("grid").selectAll("line").attr("x1", left).attr("x2", right);
+		const ticks = this.options.grid === false ? [] : axes.x.ticks(Math.min(this.xTicks(), Math.floor(ctx.plot.width / 80)));
+		ctx.marks("grid-x", "line", ticks.map(Number)).attr("stroke", ctx.theme.grid).attr("stroke-width", 1).attr("x1", (tick) => axes.x(tick)).attr("x2", (tick) => axes.x(tick)).attr("y1", top).attr("y2", bottom);
+		ctx.group("grid-x").lower();
+	}
+	/** Identity colour by group, in first-seen order. Registers the group for the legend. */
+	hue(ctx, point) {
+		return ctx.palette.color(point.group);
+	}
+	tooltip(ctx, point) {
+		const { x, y, size } = this.options;
+		const rows = [[x, this.show(point.x, x)], [y, this.show(point.y, y)]];
+		if (point.size) rows.push([size, point.size]);
+		return {
+			title: point.label || point.group,
+			color: this.hue(ctx, point),
+			rows
+		};
+	}
+	show(value, column) {
+		return this.options.data?.[0]?.[column] instanceof Date ? new Date(value).toISOString().slice(0, 10) : value;
+	}
+	/** Dots or symbols with the 2px surface ring, entering from zero size. */
+	drawDots(ctx, points, style = {}) {
+		const { name = "dots", radius = this.options.radius, fill = (point) => this.hue(ctx, point), marker = this.options.marker } = style;
+		const size = typeof radius === "function" ? radius : () => radius;
+		const stagger = Math.min(4, 400 / (points.length || 1));
+		if (marker === "circle") {
+			const dots = ctx.marks(name, "circle", points, scatterKey).attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+			ctx.set(dots, {
+				cx: (d) => d.px,
+				cy: (d) => d.py,
+				r: size
+			}, {
+				cx: (d) => d.px,
+				cy: (d) => d.py,
+				r: 0
+			}, stagger);
+			return ctx.hover(dots, (d) => this.tooltip(ctx, d));
+		}
+		const groups = [...new Set(points.map((point) => point.group))];
+		const kind = (point) => marker === "per-group" ? GROUP_SYMBOLS[groups.indexOf(point.group) % GROUP_SYMBOLS.length] : marker === "square" ? SymbolKind.Square : SymbolKind.Diamond;
+		const glyphs = ctx.marks(`${name}-glyphs`, "path", points, scatterKey).attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("d", (d) => symbol(Scales.symbol(kind(d)), Math.PI * size(d) ** 2 * 1.15)());
+		ctx.set(glyphs, { transform: (d) => `translate(${d.px},${d.py}) scale(1)` }, { transform: (d) => `translate(${d.px},${d.py}) scale(0)` }, stagger);
+		return ctx.hover(glyphs, (d) => this.tooltip(ctx, d));
+	}
+	/** Surface halo so a label stays readable over marks and grid. */
+	halo(labels, ctx) {
+		labels.attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").attr("stroke-linejoin", "round");
+	}
+	/** Small sequential key for binned counts, placed where the data leaves room. */
+	drawCountKey(ctx, points, peak, shade = ctx.palette.sequential) {
+		const corner = this.quietCorner(ctx, points), cells = [
+			.2,
+			.4,
+			.6,
+			.8,
+			1
+		], cell = 14;
+		const start = corner.anchor === "start" ? corner.x : corner.x - cell * cells.length;
+		const swatches = ctx.marks("count-key", "rect", cells).attr("fill", (t) => shade(t));
+		ctx.set(swatches, {
+			x: (_, i) => start + i * cell,
+			y: corner.y - 4,
+			width: 13,
+			height: 6
+		});
+		const notes = ctx.marks("count-key-text", "text", [{
+			t: "1",
+			at: start,
+			anchor: "start"
+		}, {
+			t: String(peak),
+			at: start + cell * cells.length - 1,
+			anchor: "end"
+		}], (d) => d.anchor).attr("text-anchor", (d) => d.anchor).text((d) => d.t);
+		ctx.text(notes, 10, "muted");
+		ctx.set(notes, {
+			x: (d) => d.at,
+			y: corner.y + 14
+		});
+	}
+	/** The plot corner holding the fewest points: where annotations stay clear of the data. */
+	quietCorner(ctx, points) {
+		const { left, right, top, bottom } = this.frame(ctx);
+		const midX = (left + right) / 2, midY = (top + bottom) / 2;
+		return [
+			{
+				x: left + 8,
+				y: top + 14,
+				anchor: "start",
+				hits: (p) => p.px < midX && p.py < midY
+			},
+			{
+				x: right - 8,
+				y: top + 14,
+				anchor: "end",
+				hits: (p) => p.px >= midX && p.py < midY
+			},
+			{
+				x: left + 8,
+				y: bottom - 20,
+				anchor: "start",
+				hits: (p) => p.px < midX && p.py >= midY
+			},
+			{
+				x: right - 8,
+				y: bottom - 20,
+				anchor: "end",
+				hits: (p) => p.px >= midX && p.py >= midY
+			}
+		].map((corner) => ({
+			...corner,
+			count: points.filter(corner.hits).length
+		})).sort((a, b) => a.count - b.count)[0];
+	}
+};
+export { SCATTER_ALL, ScatterBase, ScatterDomain, ScatterMarker, ScatterScaling, scatterKey, scatterNumber, thinLogTicks };

package/dist/charts/scatter/ScatterGeometry.js

@@ -0,0 +1,95 @@
+import { Delaunay } from "d3-delaunay";
+// src/charts/scatter/ScatterGeometry.ts
+/** Computational geometry on screen coordinates, shared by the hull and tessellation charts. */
+var ScatterGeometry = class {
+	/** Unique Delaunay edges of the points; empty for fewer than two usable points. */
+	static delaunayEdges(points) {
+		if (points.length < 2) return [];
+		const { halfedges, triangles, hull } = Delaunay.from(points);
+		const edges = /* @__PURE__ */ new Map();
+		const add = (a, b) => {
+			if (!points[a] || !points[b] || a === b) return;
+			const key = a < b ? `${a}/${b}` : `${b}/${a}`;
+			if (!edges.has(key)) edges.set(key, {
+				a,
+				b,
+				length: Math.hypot(points[a][0] - points[b][0], points[a][1] - points[b][1])
+			});
+		};
+		for (let e = 0; e < halfedges.length; e++) add(triangles[e], triangles[e % 3 === 2 ? e - 2 : e + 1]);
+		if (!triangles.length) hull.forEach((vertex, i) => {
+			if (i) add(hull[i - 1], vertex);
+		});
+		return [...edges.values()];
+	}
+	/** Edges whose diametral circle holds no other point. */
+	static gabriel(points, edges) {
+		return edges.filter(({ a, b, length }) => {
+			const cx = (points[a][0] + points[b][0]) / 2, cy = (points[a][1] + points[b][1]) / 2;
+			return !points.some((point, i) => i !== a && i !== b && Math.hypot(point[0] - cx, point[1] - cy) < length / 2 - 1e-9);
+		});
+	}
+	/** Euclidean minimum spanning tree by Kruskal over the Delaunay edges. */
+	static spanningTree(points, edges) {
+		const parent = points.map((_, i) => i);
+		const find = (i) => parent[i] === i ? i : parent[i] = find(parent[i]);
+		return [...edges].sort((p, q) => p.length - q.length).filter(({ a, b }) => {
+			const ra = find(a), rb = find(b);
+			if (ra === rb) return false;
+			parent[ra] = rb;
+			return true;
+		});
+	}
+	/** Each point joined to its closest neighbour; a Delaunay edge always contains that neighbour. */
+	static nearestNeighbours(points, edges) {
+		const best = /* @__PURE__ */ new Map();
+		for (const edge of edges) for (const end of [edge.a, edge.b]) if ((best.get(end)?.length ?? Infinity) > edge.length) best.set(end, edge);
+		return [...new Set(best.values())];
+	}
+	/** Alpha-shape boundary loops: triangles with a small circumradius, minus interior edges. */
+	static concave(points, alpha) {
+		if (points.length < 3) return [];
+		const { triangles } = Delaunay.from(points);
+		const open = /* @__PURE__ */ new Map();
+		for (let t = 0; t < triangles.length; t += 3) {
+			const ids = [
+				triangles[t],
+				triangles[t + 1],
+				triangles[t + 2]
+			];
+			if (ids.some((id) => !points[id])) continue;
+			const [a, b, c] = ids.map((id) => points[id]);
+			const ab = Math.hypot(a[0] - b[0], a[1] - b[1]), bc = Math.hypot(b[0] - c[0], b[1] - c[1]), ca = Math.hypot(c[0] - a[0], c[1] - a[1]);
+			const doubled = Math.abs((b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]));
+			if (!doubled || ab * bc * ca / (2 * doubled) > alpha) continue;
+			for (const [p, q] of [
+				[ids[0], ids[1]],
+				[ids[1], ids[2]],
+				[ids[2], ids[0]]
+			]) {
+				if (open.delete(`${q}/${p}`)) continue;
+				open.set(`${p}/${q}`, [p, q]);
+			}
+		}
+		const next = /* @__PURE__ */ new Map();
+		for (const [p, q] of open.values()) next.set(p, [...next.get(p) ?? [], q]);
+		const loops = [];
+		while (next.size) {
+			const start = next.keys().next().value, loop = [];
+			let at = start;
+			while (at !== void 0 && next.has(at)) {
+				loop.push(points[at]);
+				const options = next.get(at), step = options.shift();
+				if (!options.length) next.delete(at);
+				at = step;
+			}
+			if (loop.length > 2) loops.push(loop);
+		}
+		return loops;
+	}
+	/** Vertices of a ring around a point; hulls of these give round offset outlines. */
+	static ring(center, radius, steps = 14) {
+		return Array.from({ length: steps }, (_, i) => [center[0] + radius * Math.cos(i / steps * Math.PI * 2), center[1] + radius * Math.sin(i / steps * Math.PI * 2)]);
+	}
+};
+export { ScatterGeometry };

package/dist/charts/scatter/ScatterPlot.js

@@ -0,0 +1,36 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterDomain, ScatterMarker, ScatterScaling } from "./ScatterBase.js";
+// src/charts/scatter/ScatterPlot.ts
+/** The default for two measures: position shows the relationship, colour shows the group. */
+var ScatterPlot = class extends ScatterBase {
+	static meta = {
+		id: "scatter",
+		name: "Scatter plot",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots two measures against each other to reveal correlation, clusters and outliers.",
+		tags: [
+			"xy",
+			"dot",
+			"correlation"
+		],
+		sample: (seed) => SampleData.points(seed),
+		variants: {
+			scaling: Object.values(ScatterScaling),
+			marker: [
+				ScatterMarker.Circle,
+				ScatterMarker.PerGroup,
+				ScatterMarker.Diamond,
+				ScatterMarker.Square
+			],
+			domain: [ScatterDomain.Tight, ScatterDomain.Zero]
+		},
+		valid: (v) => v.domain === ScatterDomain.Tight || v.scaling !== ScatterScaling.LogLog
+	};
+	plotPoints(ctx, _axes, points) {
+		this.drawDots(ctx, points);
+	}
+};
+export { ScatterPlot };

package/dist/charts/scatter/StripScatter.js

@@ -0,0 +1,107 @@
+import { ChartFamily, DataShape, Dimension, Orientation, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CategoryScatterBase, CategorySort, CategorySummary } from "./CategoryScatterBase.js";
+// src/charts/scatter/StripScatter.ts
+var StripScatterMark = /* @__PURE__ */ function(StripScatterMark) {
+	StripScatterMark["Tick"] = "tick";
+	StripScatterMark["Dot"] = "dot";
+	StripScatterMark["Diamond"] = "diamond";
+	return StripScatterMark;
+}({});
+/** Every observation on one line per category: the tidiest view for modest samples. */
+var StripScatter = class extends CategoryScatterBase {
+	static meta = {
+		id: "strip-scatter",
+		name: "Strip plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lines up every observation along one axis per category, showing spread without binning.",
+		tags: [
+			"barcode",
+			"tick plot",
+			"one-dimensional"
+		],
+		sample: (seed) => SampleData.distribution(seed, 50, 4),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			mark: [
+				"tick",
+				"dot",
+				"diamond"
+			],
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			sort: [CategorySort.Data, CategorySort.Descending],
+			summary: [
+				CategorySummary.None,
+				CategorySummary.Median,
+				CategorySummary.Box
+			],
+			thickness: [.5, .8]
+		},
+		valid: (v) => v.mark === "tick" || v.thickness === .5
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			mark: "tick",
+			thickness: .5
+		};
+	}
+	plotLanes(ctx, axes, lanes) {
+		const { mark, thickness } = this.options, vertical = this.vertical;
+		const placed = lanes.flatMap((lane) => lane.points.map((point) => ({
+			...point,
+			center: lane.center,
+			half: lane.breadth / 2 * thickness
+		})));
+		const color = (d) => ctx.palette.color(d.group);
+		const along = (d) => axes.value(d.value);
+		const ticks = ctx.marks("ticks", "line", mark === "tick" ? placed : [], (d) => d.index).attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-opacity", .7);
+		ctx.set(ticks, vertical ? {
+			x1: (d) => d.center - d.half,
+			x2: (d) => d.center + d.half,
+			y1: along,
+			y2: along
+		} : {
+			y1: (d) => d.center - d.half,
+			y2: (d) => d.center + d.half,
+			x1: along,
+			x2: along
+		}, vertical ? {
+			x1: (d) => d.center,
+			x2: (d) => d.center,
+			y1: along,
+			y2: along
+		} : {
+			y1: (d) => d.center,
+			y2: (d) => d.center,
+			x1: along,
+			x2: along
+		}, 1);
+		ctx.hover(ticks, (d) => this.tooltip(ctx, d));
+		const glyphs = ctx.marks("glyphs", "rect", mark === "diamond" ? placed : [], (d) => d.index).attr("fill", color).attr("fill-opacity", .8);
+		const spot = (d) => vertical ? [d.center, along(d)] : [along(d), d.center];
+		ctx.set(glyphs, {
+			x: -4,
+			y: -4,
+			width: 8,
+			height: 8,
+			transform: (d) => `translate(${spot(d)[0]},${spot(d)[1]}) rotate(45)`
+		});
+		ctx.hover(glyphs, (d) => this.tooltip(ctx, d));
+		const dots = ctx.marks("dots", "circle", mark === "dot" ? placed : [], (d) => d.index).attr("fill", color).attr("fill-opacity", .65);
+		ctx.set(dots, {
+			cx: (d) => spot(d)[0],
+			cy: (d) => spot(d)[1],
+			r: this.options.radius
+		}, {
+			cx: (d) => spot(d)[0],
+			cy: (d) => spot(d)[1],
+			r: 0
+		});
+		ctx.hover(dots, (d) => this.tooltip(ctx, d));
+	}
+};
+export { StripScatter, StripScatterMark };

package/dist/charts/scatter/SunflowerScatter.js

@@ -0,0 +1,109 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { hexbin } from "d3-hexbin";
+// src/charts/scatter/SunflowerScatter.ts
+var SunflowerScatterPetal = /* @__PURE__ */ function(SunflowerScatterPetal) {
+	SunflowerScatterPetal["Line"] = "line-petals";
+	SunflowerScatterPetal["Leaf"] = "leaf-petals";
+	return SunflowerScatterPetal;
+}({});
+var SunflowerLattice = /* @__PURE__ */ function(SunflowerLattice) {
+	SunflowerLattice["Hex"] = "hex-lattice";
+	SunflowerLattice["Square"] = "square-lattice";
+	return SunflowerLattice;
+}({});
+var MAX_PETALS = 16;
+/** Counts overplotted points by petals on a glyph, staying readable as discrete units. */
+var SunflowerScatter = class extends ScatterBase {
+	static meta = {
+		id: "sunflower-scatter",
+		name: "Sunflower scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Replaces clumps of overlapping points with glyphs whose petals count the observations.",
+		tags: [
+			"sunflower plot",
+			"overplotting",
+			"count glyph"
+		],
+		sample: (seed) => SampleData.points(seed, 380, 3),
+		variants: {
+			cell: [
+				13,
+				9,
+				18
+			],
+			unit: [1, 3],
+			petal: ["line-petals", "leaf-petals"],
+			lattice: ["hex-lattice", "square-lattice"]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			cell: 13,
+			unit: 1,
+			petal: "line-petals",
+			lattice: "hex-lattice"
+		};
+	}
+	inset() {
+		return this.options.cell;
+	}
+	legendItems() {
+		return [];
+	}
+	flowers(points) {
+		const { cell, unit, lattice } = this.options;
+		const pack = (x, y, count) => ({
+			id: `${x},${y}`,
+			x,
+			y,
+			count,
+			petals: Math.min(MAX_PETALS, Math.round(count / unit))
+		});
+		if (lattice === "hex-lattice") return hexbin().x((d) => d.px).y((d) => d.py).radius(cell)(points).map((bin) => pack(bin.x, bin.y, bin.length));
+		const size = cell * 1.8, cells = /* @__PURE__ */ new Map();
+		for (const point of points) {
+			const key = `${Math.floor(point.px / size)}/${Math.floor(point.py / size)}`;
+			cells.set(key, [...cells.get(key) ?? [], point]);
+		}
+		return [...cells].map(([key, set]) => {
+			const [c, r] = key.split("/").map(Number);
+			return pack((c + .5) * size, (r + .5) * size, set.length);
+		});
+	}
+	glyph(petals) {
+		if (petals < 2) return "";
+		const reach = this.options.cell * .82, core = 2.5;
+		return Array.from({ length: petals }, (_, i) => {
+			const t = i / petals * Math.PI * 2 - Math.PI / 2, c = Math.cos(t), s = Math.sin(t);
+			if (this.options.petal === "line-petals") return `M${core * c},${core * s}L${reach * c},${reach * s}`;
+			const mx = (reach + core) / 2 * c, my = (reach + core) / 2 * s, w = 2.2;
+			return `M${core * c},${core * s}Q${mx - s * w},${my + c * w} ${reach * c},${reach * s}Q${mx + s * w},${my - c * w} ${core * c},${core * s}Z`;
+		}).join("");
+	}
+	plotPoints(ctx, _axes, points) {
+		const flowers = this.flowers(points), ink = ctx.palette.sequential(.68);
+		const leaf = this.options.petal === "leaf-petals";
+		const glyphs = ctx.marks("flowers", "path", flowers, (d) => d.id).attr("fill", leaf ? ink : "none").attr("stroke", ink).attr("stroke-width", leaf ? .5 : 1.5).attr("stroke-linecap", "round");
+		ctx.set(glyphs, {
+			d: (d) => this.glyph(d.petals),
+			transform: (d) => `translate(${d.x},${d.y})`
+		});
+		ctx.hover(glyphs, (d) => ({
+			title: `${d.count} points`,
+			color: ink,
+			rows: [["Petals", d.petals]]
+		}));
+		const hearts = ctx.marks("hearts", "circle", flowers, (d) => d.id).attr("fill", ink);
+		ctx.set(hearts, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 2.5
+		});
+	}
+};
+export { SunflowerLattice, SunflowerScatter, SunflowerScatterPetal };