@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/density/KernelDensity2D.js

@@ -0,0 +1,193 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DensityBandwidth, DensityKernel } from "./DensityEnums.js";
+import { FieldContours } from "./FieldContours.js";
+import { FieldLevels } from "./FieldLevels.js";
+import { KernelField } from "./KernelField.js";
+import { PlaneGeometry } from "./PlaneGeometry.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { area, curveBasis, deviation, max, mean, sum } from "d3";
+// src/charts/density/KernelDensity2D.ts
+/** How the density shades: discrete bands, or many fine levels that read as continuous. */
+var KernelShading = /* @__PURE__ */ function(KernelShading) {
+	KernelShading["Banded"] = "banded";
+	KernelShading["Continuous"] = "continuous";
+	return KernelShading;
+}({});
+/** What the side panels show. */
+var KernelMarginal = /* @__PURE__ */ function(KernelMarginal) {
+	KernelMarginal["None"] = "none";
+	KernelMarginal["Curve"] = "curve";
+	KernelMarginal["Rug"] = "rug";
+	return KernelMarginal;
+}({});
+/** Summary drawn over the density. */
+var KernelReference = /* @__PURE__ */ function(KernelReference) {
+	KernelReference["None"] = "none";
+	KernelReference["Mean"] = "mean";
+	KernelReference["Ellipse"] = "ellipse";
+	return KernelReference;
+}({});
+var PANEL = 40;
+var GAP = 6;
+/** The joint view of two variables: smooth density in the middle, each variable's own distribution at the edges. */
+var KernelDensity2D = class extends PointDensityChart {
+	static meta = {
+		id: "density-kde-2d",
+		name: "2D kernel density",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shades a smooth bivariate density, with optional marginal curves and a mean or covariance summary, to show joint and separate spread.",
+		tags: [
+			"kde",
+			"joint plot",
+			"marginal",
+			"heat"
+		],
+		sample: (seed) => SampleData.points(seed, 480, 3),
+		variants: {
+			shading: ["banded", "continuous"],
+			marginal: [
+				"curve",
+				"none",
+				"rug"
+			],
+			reference: [
+				"none",
+				"mean",
+				"ellipse"
+			],
+			bandwidth: [
+				DensityBandwidth.Scott,
+				DensityBandwidth.Narrow,
+				DensityBandwidth.Wide
+			],
+			kernel: [
+				DensityKernel.Gaussian,
+				DensityKernel.Epanechnikov,
+				DensityKernel.Triangular
+			]
+		},
+		valid: ({ kernel, reference }) => kernel === DensityKernel.Gaussian || reference === "none"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			kernel: DensityKernel.Gaussian,
+			bandwidth: DensityBandwidth.Scott,
+			shading: "banded",
+			marginal: "curve",
+			reference: "none"
+		};
+	}
+	inset() {
+		return this.options.marginal === "none" ? {
+			top: 0,
+			right: 0
+		} : {
+			top: 46,
+			right: 46
+		};
+	}
+	drawDensity(ctx, _axes, points) {
+		const { kernel, bandwidth, shading, marginal, reference } = this.options;
+		const { width, height, top } = this.body(ctx);
+		const local = points.map(({ px, py }) => ({
+			px,
+			py: py - top
+		}));
+		const field = new KernelField(local, width, height, {
+			kernel,
+			bandwidth
+		});
+		const project = (i, j) => [(i + .5) * field.cellWidth, (j + .5) * field.cellHeight + top];
+		const contours = new FieldContours(field.values, field.columns, field.rows, project);
+		const count = shading === "banded" ? 7 : 22;
+		const bands = FieldLevels.of(field.values, count).map((level) => ({
+			...level,
+			...contours.at(level.value)
+		}));
+		const fill = (value) => ctx.palette.sequential(value / (field.max || 1));
+		const paths = ctx.marks("bands", "path", bands, (d) => d.value).attr("fill", (d) => fill(d.value));
+		this.reveal(ctx, paths, { d: (d) => d.area }, 18);
+		ctx.hover(paths, (d) => ({
+			rows: [["Density", d.label]],
+			color: fill(d.value)
+		}));
+		this.drawReference(ctx, points, reference);
+		this.drawMarginals(ctx, points, marginal, field);
+		this.showRamp(ctx, 1, ctx.palette.sequential, (t) => `${Math.round(t * 100)}%`);
+	}
+	drawReference(ctx, points, reference) {
+		const { width, height, top } = this.body(ctx);
+		const mx = mean(points, (d) => d.px) ?? 0, my = mean(points, (d) => d.py) ?? 0;
+		const cross = reference === "mean" && points.length ? [{
+			x1: mx,
+			x2: mx,
+			y1: top,
+			y2: top + height
+		}, {
+			x1: 0,
+			x2: width,
+			y1: my,
+			y2: my
+		}] : [];
+		const rules = ctx.marks("mean", "line", cross).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "4 3");
+		ctx.set(rules, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const ring = reference === "ellipse" && points.length > 2 ? [this.ellipse(ctx, points, mx, my)] : [];
+		const curve = ctx.marks("ellipse", "path", ring).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2);
+		ctx.set(curve, { d: (d) => d });
+	}
+	/** The 95% covariance ellipse, kept inside the plot. */
+	ellipse(ctx, points, mx, my) {
+		const { width, height, top } = this.body(ctx);
+		const sx = deviation(points, (d) => d.px) ?? 0, sy = deviation(points, (d) => d.py) ?? 0;
+		const covariance = points.reduce((sum, d) => sum + (d.px - mx) * (d.py - my), 0) / Math.max(1, points.length - 1);
+		const rho = sx && sy ? covariance / (sx * sy) : 0;
+		const k = 2.4477;
+		const ring = Array.from({ length: 72 }, (_, i) => {
+			const a = i / 72 * 2 * Math.PI;
+			return [mx + k * sx * Math.cos(a), my + k * sy * (rho * Math.cos(a) + Math.sqrt(1 - rho * rho) * Math.sin(a))];
+		});
+		return PlaneGeometry.path(PlaneGeometry.clipConvex(ring, [
+			[0, top],
+			[width, top],
+			[width, top + height],
+			[0, top + height]
+		]));
+	}
+	drawMarginals(ctx, points, marginal, field) {
+		const { width, top } = this.body(ctx);
+		const { columns, rows, values, cellWidth, cellHeight } = field;
+		const across = Array.from({ length: columns }, (_, i) => sum(Array.from({ length: rows }, (_, j) => values[i + j * columns])));
+		const down = Array.from({ length: rows }, (_, j) => sum(values.slice(j * columns, (j + 1) * columns)));
+		const peakX = max(across) || 1, peakY = max(down) || 1;
+		const topArea = area().x((_, i) => (i + .5) * cellWidth).y0(PANEL).y1((d) => PANEL - d / peakX * 38).curve(curveBasis);
+		const sideArea = area().y((_, j) => top + (j + .5) * cellHeight).x0(width + GAP).x1((d) => width + GAP + d / peakY * 38).curve(curveBasis);
+		const areas = marginal === "curve" && points.length ? [topArea(across), sideArea(down)] : [];
+		const fills = ctx.marks("marginals", "path", areas).attr("fill", ctx.palette.sequential(.55));
+		this.reveal(ctx, fills, { d: (d) => d });
+		const rug = marginal === "rug" ? points : [];
+		const up = ctx.marks("rug-x", "line", rug).attr("stroke", ctx.theme.inkSecondary).attr("stroke-opacity", .35);
+		ctx.set(up, {
+			x1: (d) => d.px,
+			x2: (d) => d.px,
+			y1: PANEL,
+			y2: 26
+		});
+		const side = ctx.marks("rug-y", "line", rug).attr("stroke", ctx.theme.inkSecondary).attr("stroke-opacity", .35);
+		ctx.set(side, {
+			x1: width + GAP,
+			x2: width + GAP + 14,
+			y1: (d) => d.py,
+			y2: (d) => d.py
+		});
+	}
+};
+export { KernelDensity2D, KernelMarginal, KernelReference, KernelShading };

package/dist/charts/density/KernelField.js

@@ -0,0 +1,63 @@
+import { DensityBandwidth, DensityKernel } from "./DensityEnums.js";
+import { deviation } from "d3";
+// src/charts/density/KernelField.ts
+var STRENGTH = {
+	[DensityBandwidth.Scott]: 1,
+	[DensityBandwidth.Narrow]: .55,
+	[DensityBandwidth.Wide]: 1.7
+};
+/** Support radius in bandwidths; compact kernels use the radius that matches a unit-variance kernel. */
+var REACH = {
+	[DensityKernel.Gaussian]: 3,
+	[DensityKernel.Epanechnikov]: Math.sqrt(5),
+	[DensityKernel.Triangular]: Math.sqrt(6),
+	[DensityKernel.Box]: Math.sqrt(3)
+};
+var SHAPE = {
+	[DensityKernel.Gaussian]: (u) => Math.exp(-.5 * u * u),
+	[DensityKernel.Epanechnikov]: (u) => 1 - u * u / 5,
+	[DensityKernel.Triangular]: (u) => 1 - u / Math.sqrt(6),
+	[DensityKernel.Box]: () => 1
+};
+/** Weighted kernel density estimate sampled on a pixel grid. `values[i + j * columns]` is the density at a cell centre. */
+var KernelField = class {
+	width;
+	height;
+	columns;
+	rows;
+	values;
+	max;
+	cellWidth;
+	cellHeight;
+	constructor(samples, width, height, settings = {}) {
+		this.width = width;
+		this.height = height;
+		const { kernel = DensityKernel.Gaussian, bandwidth = DensityBandwidth.Scott, cell = 6 } = settings;
+		this.columns = Math.max(2, Math.round(width / cell));
+		this.rows = Math.max(2, Math.round(height / cell));
+		this.cellWidth = width / this.columns;
+		this.cellHeight = height / this.rows;
+		this.values = new Array(this.columns * this.rows).fill(0);
+		const shrink = STRENGTH[bandwidth] * samples.length ** (-1 / 6);
+		const hx = Math.max(cell, (deviation(samples, (s) => s.px) || width / 12) * shrink);
+		const hy = Math.max(cell, (deviation(samples, (s) => s.py) || height / 12) * shrink);
+		const shape = SHAPE[kernel], reach = REACH[kernel];
+		for (const { px, py, w = 1 } of samples) this.splat(px, py, w, hx, hy, shape, reach);
+		this.max = this.values.reduce((top, value) => Math.max(top, value), 0);
+	}
+	splat(px, py, weight, hx, hy, shape, reach) {
+		const { columns, rows, cellWidth, cellHeight, values } = this;
+		const i0 = Math.max(0, Math.floor((px - reach * hx) / cellWidth)), i1 = Math.min(columns - 1, Math.ceil((px + reach * hx) / cellWidth));
+		const j0 = Math.max(0, Math.floor((py - reach * hy) / cellHeight)), j1 = Math.min(rows - 1, Math.ceil((py + reach * hy) / cellHeight));
+		for (let j = j0; j <= j1; j++) for (let i = i0; i <= i1; i++) {
+			const u = Math.hypot(((i + .5) * cellWidth - px) / hx, ((j + .5) * cellHeight - py) / hy);
+			if (u <= reach) values[i + j * columns] += weight * shape(u);
+		}
+	}
+	/** Density under a pixel, 0 outside the grid. */
+	at(px, py) {
+		const i = Math.floor(px / this.cellWidth), j = Math.floor(py / this.cellHeight);
+		return i < 0 || j < 0 || i >= this.columns || j >= this.rows ? 0 : this.values[i + j * this.columns];
+	}
+};
+export { KernelField };

package/dist/charts/density/MarchingSquaresChart.js

@@ -0,0 +1,203 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { GridFieldChart } from "./GridFieldChart.js";
+import { mean } from "d3";
+// src/charts/density/MarchingSquaresChart.ts
+/** Cell shape the isoline is traced through. */
+var MarchingCell = /* @__PURE__ */ function(MarchingCell) {
+	MarchingCell["Squares"] = "squares";
+	MarchingCell["Triangles"] = "triangles";
+	return MarchingCell;
+}({});
+/** Where the line crosses a cell edge. */
+var MarchingCrossing = /* @__PURE__ */ function(MarchingCrossing) {
+	MarchingCrossing["Linear"] = "linear";
+	MarchingCrossing["Midpoint"] = "midpoint";
+	return MarchingCrossing;
+}({});
+/** Shows marching squares at work on a sampled field. Use it to teach, or to inspect how a contour depends on grid resolution. */
+var MarchingSquaresChart = class extends GridFieldChart {
+	static meta = {
+		id: "field-marching-squares",
+		name: "Marching squares",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Grid,
+		description: "Exposes the sample lattice, inside and outside vertices and traced segments of one isovalue, to show how a contour is built.",
+		tags: [
+			"isosurface",
+			"algorithm",
+			"marching triangles",
+			"lattice"
+		],
+		sample: (seed) => SampleData.surface(seed, 60),
+		variants: {
+			resolution: [
+				16,
+				10,
+				24
+			],
+			isovalue: [
+				0,
+				.25,
+				-.25
+			],
+			cell: ["squares", "triangles"],
+			crossing: ["linear", "midpoint"],
+			vertices: [true, false],
+			fillInside: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			resolution: 16,
+			isovalue: 0,
+			cell: "squares",
+			crossing: "linear",
+			vertices: true,
+			fillInside: true
+		};
+	}
+	/** Clips one cell to its inside part and returns that polygon with the traced segments. */
+	march(corners) {
+		const { isovalue, crossing } = this.options;
+		const inside = [], hits = [];
+		corners.forEach((a, k) => {
+			const b = corners[(k + 1) % corners.length];
+			if (a.value >= isovalue) inside.push([a.x, a.y]);
+			if (a.value >= isovalue === b.value >= isovalue) return;
+			const t = crossing === "linear" ? (isovalue - a.value) / (b.value - a.value) : .5;
+			const hit = [a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t];
+			inside.push(hit);
+			hits.push(hit);
+		});
+		if (hits.length === 4) return this.saddle(corners, hits, inside);
+		return {
+			inside: [inside],
+			segments: hits.length === 2 ? [[hits[0], hits[1]]] : []
+		};
+	}
+	/** A saddle has two readings; the cell-centre average picks one, so fill and isoline always agree. */
+	saddle(corners, [ab, bc, cd, da], joined) {
+		const isovalue = this.options.isovalue, centreIn = mean(corners, (corner) => corner.value) >= isovalue;
+		const firstIn = corners[0].value >= isovalue;
+		const segments = centreIn === firstIn ? [[ab, bc], [cd, da]] : [[da, ab], [bc, cd]];
+		if (centreIn) return {
+			inside: [joined],
+			segments
+		};
+		const [a, b, c, d] = corners.map(({ x, y }) => [x, y]);
+		return {
+			inside: firstIn ? [[
+				a,
+				ab,
+				da
+			], [
+				c,
+				cd,
+				bc
+			]] : [[
+				b,
+				bc,
+				ab
+			], [
+				d,
+				da,
+				cd
+			]],
+			segments
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { resolution, cell, vertices, fillInside, isovalue } = this.options;
+		const field = this.field();
+		const usable = field.columns > 1 && field.rows > 1;
+		const columns = usable ? resolution : 0;
+		const rows = usable ? Math.max(2, Math.round(resolution * ctx.plot.height / ctx.plot.width)) : 0;
+		const project = this.projector(axes);
+		const nodes = [];
+		for (let j = 0; j < rows; j++) for (let i = 0; i < columns; i++) {
+			const u = i * (field.columns - 1) / (columns - 1), v = j * (field.rows - 1) / (rows - 1);
+			const [x, y] = project(u, v);
+			nodes.push({
+				key: `${i}/${j}`,
+				x,
+				y,
+				value: this.sample(field, u, v)
+			});
+		}
+		const node = (i, j) => nodes[i + j * columns];
+		const pieces = Array.from({ length: usable ? (columns - 1) * (rows - 1) : 0 }, (_, k) => {
+			const i = k % (columns - 1), j = Math.floor(k / (columns - 1));
+			const [a, b, c, d] = [
+				node(i, j),
+				node(i + 1, j),
+				node(i + 1, j + 1),
+				node(i, j + 1)
+			];
+			return cell === "squares" ? [[
+				a,
+				b,
+				c,
+				d
+			]] : [[
+				a,
+				b,
+				c
+			], [
+				a,
+				c,
+				d
+			]];
+		}).flat().filter((corners) => corners.every((corner) => Number.isFinite(corner.value))).map((corners) => this.march(corners));
+		const lattice = ctx.marks("lattice", "path", nodes.length ? [this.latticePath(nodes, columns, rows, cell)] : []).attr("fill", "none").attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		ctx.set(lattice, { d: (d) => d });
+		const region = pieces.flatMap((piece) => piece.inside).filter((polygon) => polygon.length > 2).map((polygon) => `M${polygon.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join("L")}Z`).join("");
+		const shade = ctx.palette.sequential(.25);
+		const area = ctx.marks("inside", "path", fillInside && region ? [region] : []).attr("fill", shade).attr("fill-opacity", .75);
+		this.reveal(ctx, area, { d: (d) => d });
+		const traced = pieces.flatMap((piece) => piece.segments).map(([p, q]) => `M${p[0].toFixed(1)},${p[1].toFixed(1)}L${q[0].toFixed(1)},${q[1].toFixed(1)}`).join("");
+		const stroke = ctx.palette.sequential(.9);
+		const line = ctx.marks("isoline", "path", traced ? [traced] : []).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		this.reveal(ctx, line, { d: (d) => d });
+		ctx.hover(line, () => ({
+			rows: [["Isovalue", isovalue]],
+			color: stroke
+		}));
+		const dots = ctx.marks("vertices", "circle", vertices ? nodes.filter((d) => Number.isFinite(d.value)) : [], (d) => d.key).attr("fill", (d) => d.value >= isovalue ? stroke : ctx.theme.surface).attr("stroke", (d) => d.value >= isovalue ? ctx.theme.surface : ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: resolution > 16 ? 2 : 3
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 1);
+		ctx.hover(dots, (d) => ({
+			rows: [[this.zName(), +d.value.toFixed(3)]],
+			color: stroke
+		}));
+		this.showKey([{
+			key: "above",
+			label: `Above ${isovalue}`,
+			color: shade
+		}, {
+			key: "line",
+			label: "Isoline",
+			color: stroke
+		}]);
+	}
+	latticePath(nodes, columns, rows, cell) {
+		const at = (i, j) => {
+			const { x, y } = nodes[i + j * columns];
+			return `${x.toFixed(1)},${y.toFixed(1)}`;
+		};
+		const parts = [];
+		for (let j = 0; j < rows; j++) parts.push(`M${at(0, j)}L${at(columns - 1, j)}`);
+		for (let i = 0; i < columns; i++) parts.push(`M${at(i, 0)}L${at(i, rows - 1)}`);
+		if (cell === "triangles") for (let j = 0; j < rows - 1; j++) for (let i = 0; i < columns - 1; i++) parts.push(`M${at(i, j)}L${at(i + 1, j + 1)}`);
+		return parts.join("");
+	}
+};
+export { MarchingCell, MarchingCrossing, MarchingSquaresChart };

package/dist/charts/density/PlaneGeometry.js

@@ -0,0 +1,91 @@
+import { Delaunay } from "d3";
+// src/charts/density/PlaneGeometry.ts
+var signedArea = (polygon) => polygon.reduce((sum, [x, y], i) => {
+	const [nx, ny] = polygon[(i + 1) % polygon.length];
+	return sum + x * ny - nx * y;
+}, 0) / 2;
+/** Plane helpers shared by the tessellation charts. */
+var PlaneGeometry = class {
+	static path(polygon) {
+		return polygon.length ? `M${polygon.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join("L")}Z` : "";
+	}
+	static area(polygon) {
+		return Math.abs(signedArea(polygon));
+	}
+	/** Keeps the part of `polygon` left of the directed line `a → b`. */
+	static clipHalfPlane(polygon, a, b) {
+		const side = ([x, y]) => (b[0] - a[0]) * (y - a[1]) - (b[1] - a[1]) * (x - a[0]);
+		const out = [];
+		polygon.forEach((point, i) => {
+			const next = polygon[(i + 1) % polygon.length];
+			const here = side(point), there = side(next);
+			if (here >= 0) out.push(point);
+			if (here >= 0 !== there >= 0) {
+				const t = here / (here - there);
+				out.push([point[0] + (next[0] - point[0]) * t, point[1] + (next[1] - point[1]) * t]);
+			}
+		});
+		return out;
+	}
+	/** Sutherland–Hodgman clip of a polygon by a convex polygon of either winding. */
+	static clipConvex(polygon, convex) {
+		const edges = signedArea(convex) > 0 ? convex : [...convex].reverse();
+		return edges.reduce((kept, a, i) => kept.length ? this.clipHalfPlane(kept, a, edges[(i + 1) % edges.length]) : kept, [...polygon]);
+	}
+	/** Shrinks a convex polygon by `distance` px. */
+	static inset(polygon, distance) {
+		const ring = signedArea(polygon) > 0 ? polygon : [...polygon].reverse();
+		return ring.reduce((kept, a, i) => {
+			const b = ring[(i + 1) % ring.length];
+			const length = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+			const nx = -(b[1] - a[1]) / length * distance, ny = (b[0] - a[0]) / length * distance;
+			return kept.length ? this.clipHalfPlane(kept, [a[0] + nx, a[1] + ny], [b[0] + nx, b[1] + ny]) : kept;
+		}, [...ring]);
+	}
+	/** Corner-cutting subdivision: rounds a closed polygon. */
+	static rounded(polygon, passes = 2) {
+		let ring = [...polygon];
+		for (let pass = 0; pass < passes; pass++) ring = ring.flatMap(([x, y], i) => {
+			const [nx, ny] = ring[(i + 1) % ring.length];
+			return [[x * .75 + nx * .25, y * .75 + ny * .25], [x * .25 + nx * .75, y * .25 + ny * .75]];
+		});
+		return ring;
+	}
+	static disc(cx, cy, radius, sides = 36) {
+		return Array.from({ length: sides }, (_, i) => {
+			const a = i / sides * 2 * Math.PI;
+			return [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+		});
+	}
+	static hexagon(cx, cy, radius, flatTop = false) {
+		return Array.from({ length: 6 }, (_, i) => {
+			const a = Math.PI / 3 * i + (flatTop ? 0 : Math.PI / 6);
+			return [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+		});
+	}
+	/** Lloyd relaxation: moves each site toward its Voronoi cell's centroid. */
+	static relax(sites, width, height, iterations) {
+		let current = sites.map(([x, y]) => [x, y]);
+		for (let pass = 0; pass < iterations && current.length > 2; pass++) {
+			const voronoi = Delaunay.from(current).voronoi([
+				0,
+				0,
+				width,
+				height
+			]);
+			current = current.map((site, i) => {
+				const cell = voronoi.cellPolygon(i);
+				if (!cell) return site;
+				const ring = cell.slice(0, -1), area = signedArea(ring);
+				if (!area) return site;
+				const twice = ring.reduce(([sx, sy], [x, y], k) => {
+					const [nx, ny] = ring[(k + 1) % ring.length], cross = x * ny - nx * y;
+					return [sx + (x + nx) * cross, sy + (y + ny) * cross];
+				}, [0, 0]);
+				return [twice[0] / (6 * area), twice[1] / (6 * area)];
+			});
+		}
+		return current;
+	}
+};
+export { PlaneGeometry };

package/dist/charts/density/PointDensityChart.js

@@ -0,0 +1,116 @@
+import { ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { DensityOverlay } from "./DensityEnums.js";
+import { FieldChart } from "./FieldChart.js";
+import { extent } from "d3";
+// src/charts/density/PointDensityChart.ts
+/** Charts that aggregate raw x/y rows. Everything is computed in pixel space, so any axis scale works. */
+var PointDensityChart = class extends FieldChart {
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			group: "group",
+			xScale: ScaleKind.Linear,
+			yScale: ScaleKind.Linear
+		};
+	}
+	/** Space kept free inside the plot's top and right edges, for marginal panels. */
+	inset() {
+		return {
+			top: 0,
+			right: 0
+		};
+	}
+	clean(kind, value) {
+		return Number.isFinite(value) && (kind !== ScaleKind.Log || value > 0) && (kind !== ScaleKind.Sqrt || value >= 0);
+	}
+	rows() {
+		const { data, x, y, xScale, yScale } = this.options;
+		return (data ?? []).filter((row) => row[x] !== null && row[y] !== null && this.clean(xScale, Number(row[x])) && this.clean(yScale, Number(row[y])));
+	}
+	domain(values, kind) {
+		const [low = 0, high = 1] = extent(values);
+		if (kind === ScaleKind.Log) return low === high ? [low / 2, high * 2] : [low * .9, high * 1.1];
+		const pad = high > low ? (high - low) * .06 : Math.abs(low) * .1 || 1;
+		return [kind === ScaleKind.Sqrt ? Math.max(0, low - pad) : low - pad, high + pad];
+	}
+	scales(ctx) {
+		this.clearRamp();
+		const { x, y, xScale, yScale } = this.options;
+		const rows = this.rows(), { top, right } = this.inset();
+		const sx = Scales.continuous(xScale).domain(this.domain(rows.map((row) => Number(row[x])), xScale)).range([0, ctx.plot.width - right]);
+		const sy = Scales.continuous(yScale).domain(this.domain(rows.map((row) => Number(row[y])), yScale)).range([ctx.plot.height, top]);
+		if (xScale !== ScaleKind.Log) sx.nice();
+		if (yScale !== ScaleKind.Log) sy.nice();
+		return {
+			x: sx,
+			y: sy
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { right } = this.inset();
+		if (right) ctx.group("grid").selectAll("line").attr("x2", ctx.plot.width - right);
+		this.drawDensity(ctx, axes, this.project(axes));
+	}
+	project({ x: sx, y: sy }) {
+		const { x, y, group, weight } = this.options;
+		return this.rows().map((row) => {
+			const vx = Number(row[x]), vy = Number(row[y]), w = weight ? Number(row[weight]) : 1;
+			return {
+				x: vx,
+				y: vy,
+				px: sx(vx),
+				py: sy(vy),
+				w: Number.isFinite(w) ? Math.max(0, w) : 0,
+				group: String(row[group] ?? "")
+			};
+		});
+	}
+	/** Plot size left for the marks once `inset` is taken out, with marks offset by `inset().top`. */
+	body(ctx) {
+		const { top, right } = this.inset();
+		return {
+			width: ctx.plot.width - right,
+			height: ctx.plot.height - top,
+			top
+		};
+	}
+	tipRows(point) {
+		return [[this.options.xLabel ?? this.options.x, point.x], [this.options.yLabel ?? this.options.y, point.y]];
+	}
+	drawOverlay(ctx, points, overlay = DensityOverlay.None) {
+		const shown = overlay === DensityOverlay.Points ? points : [];
+		const dots = ctx.marks("overlay-points", "circle", shown).attr("fill", ctx.theme.ink).attr("fill-opacity", .55);
+		ctx.set(dots, {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: 1.5
+		}, {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: 0
+		});
+		ctx.hover(dots, (d) => ({ rows: this.tipRows(d) }));
+		const rug = overlay === DensityOverlay.Rug ? points : [];
+		const { height } = ctx.plot;
+		const ticks = ctx.marks("overlay-rug-x", "line", rug).attr("stroke", ctx.theme.inkSecondary).attr("stroke-opacity", .4);
+		ctx.set(ticks, {
+			x1: (d) => d.px,
+			x2: (d) => d.px,
+			y1: height,
+			y2: height - 6
+		});
+		const side = ctx.marks("overlay-rug-y", "line", rug).attr("stroke", ctx.theme.inkSecondary).attr("stroke-opacity", .4);
+		ctx.set(side, {
+			x1: 0,
+			x2: 6,
+			y1: (d) => d.py,
+			y2: (d) => d.py
+		});
+	}
+	pixels(points) {
+		return points.map((point) => [point.px, point.py]);
+	}
+};
+export { PointDensityChart };