@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/massive/MassiveColorTable.js

@@ -0,0 +1,31 @@
+import { color } from "d3";
+// src/charts/massive/MassiveColorTable.ts
+/** Packs CSS colours into the little-endian RGBA words an `ImageData` buffer holds. */
+var ColorTable = class ColorTable {
+	static SIZE = 256;
+	static rgb(value) {
+		const rgb = color(value)?.rgb();
+		return rgb ? [
+			rgb.r,
+			rgb.g,
+			rgb.b
+		] : [
+			0,
+			0,
+			0
+		];
+	}
+	static pack(red, green, blue, alpha = 255) {
+		return (alpha << 24 | blue << 16 | green << 8 | red) >>> 0;
+	}
+	/** The sequential ramp, skipping its faintest stop so a one-point bin still shows on the surface. */
+	static ramp(palette) {
+		const table = new Uint32Array(ColorTable.SIZE);
+		for (let i = 0; i < table.length; i++) table[i] = ColorTable.pack(...ColorTable.rgb(palette.sequential(ColorTable.tone(i / (table.length - 1)))));
+		return table;
+	}
+	static tone(t) {
+		return .15 + .85 * t;
+	}
+};
+export { ColorTable };

package/dist/charts/massive/MassiveDensityChart.js

@@ -0,0 +1,46 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DensityRaster } from "./MassiveDensityRaster.js";
+import { MassiveChart } from "./MassiveChart.js";
+import { MassiveDensityScale } from "./MassiveEnums.js";
+// src/charts/massive/MassiveDensityChart.ts
+/** Bins millions of points into a screen-aligned raster, for reading the shape of data no mark could show. */
+var MassiveDensityChart = class extends MassiveChart {
+	static meta = {
+		id: "massive-density",
+		name: "Massive density",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Counts millions of points into screen-sized bins on canvas and shades each bin by how many points fell in it.",
+		tags: [
+			"canvas",
+			"large data",
+			"datashader",
+			"heatmap",
+			"binned"
+		],
+		sample: (seed) => SampleData.points(seed, 6e4, 3),
+		variants: {
+			bin: [
+				2,
+				4,
+				8
+			],
+			densityScale: [MassiveDensityScale.Log, MassiveDensityScale.Linear]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "x",
+			y: "y",
+			bin: 2,
+			densityScale: MassiveDensityScale.Log
+		};
+	}
+	compose(view, points, _colors, ctx) {
+		return new DensityRaster(view, points, Math.max(1, this.options.bin * view.ratio || 1), null).shade(this.options.densityScale, ctx.palette);
+	}
+};
+export { MassiveDensityChart };

package/dist/charts/massive/MassiveDensityRaster.js

@@ -0,0 +1,124 @@
+import { ColorTable } from "./MassiveColorTable.js";
+import { MassiveDensityScale } from "./MassiveEnums.js";
+import { PLOT_SLACK } from "./MassiveTypes.js";
+// src/charts/massive/MassiveDensityRaster.ts
+var STOPS = [
+	0,
+	.25,
+	.5,
+	.75,
+	1
+];
+var short = Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+/**
+* Counts points per bin in one typed loop, then shades the bins as one bitmap, so the cost of a frame is
+* one pass over the points and no marks. With `tints` each bin takes the mean colour of its series.
+*/
+var DensityRaster = class {
+	kind = "density";
+	#view;
+	#cell;
+	#columns;
+	#rows;
+	#counts;
+	#mix;
+	#words = /* @__PURE__ */ new Uint32Array(0);
+	#ramp;
+	#visible = 0;
+	#peak = 0;
+	/** @param cell bin side in device pixels @param tints rgb triples per group */
+	constructor(view, { x, y, group, length }, cell, tints) {
+		this.#view = view;
+		this.#cell = cell;
+		const columns = this.#columns = Math.ceil(view.width / cell), rows = this.#rows = Math.ceil(view.height / cell);
+		const counts = this.#counts = new Uint32Array(columns * rows);
+		const mix = this.#mix = tints ? new Uint32Array(columns * rows * 3) : null;
+		const { ax, bx, ay, by } = view;
+		const right = view.width + PLOT_SLACK, bottom = view.height + PLOT_SLACK;
+		const scale = 1 / cell, lastColumn = columns - 1, lastRow = rows - 1;
+		let visible = 0, peak = 0;
+		for (let i = 0; i < length; i++) {
+			const px = ax * x[i] + bx, py = ay * y[i] + by;
+			if (!(px >= -.5 && px <= right && py >= -.5 && py <= bottom)) continue;
+			const column = px * scale | 0, row = py * scale | 0;
+			const at = (row < lastRow ? row : lastRow) * columns + (column < lastColumn ? column : lastColumn);
+			const count = ++counts[at];
+			if (count > peak) peak = count;
+			visible++;
+			if (mix) {
+				const tint = group[i] * 3, slot = at * 3;
+				mix[slot] += tints[tint];
+				mix[slot + 1] += tints[tint + 1];
+				mix[slot + 2] += tints[tint + 2];
+			}
+		}
+		this.#visible = visible;
+		this.#peak = peak;
+	}
+	get visible() {
+		return this.#visible;
+	}
+	get peak() {
+		return this.#peak;
+	}
+	get geometry() {
+		return this.#words;
+	}
+	get ramp() {
+		return this.#ramp;
+	}
+	/** Points per occupied patch, where a patch is `stride` bins square: above about 2, marks of that size bury each other. */
+	crowding(stride) {
+		const columns = this.#columns, wide = Math.ceil(columns / stride), seen = new Uint8Array(wide * Math.ceil(this.#rows / stride));
+		let occupied = 0;
+		for (let j = 0; j < this.#rows; j++) {
+			const row = j * columns, patch = (j / stride | 0) * wide;
+			for (let i = 0; i < columns; i++) {
+				if (!this.#counts[row + i]) continue;
+				const at = patch + (i / stride | 0);
+				if (!seen[at]) {
+					seen[at] = 1;
+					occupied++;
+				}
+			}
+		}
+		return occupied ? this.#visible / occupied : 0;
+	}
+	count(x, y) {
+		return this.#counts[Math.min(this.#rows - 1, y / this.#cell | 0) * this.#columns + Math.min(this.#columns - 1, x / this.#cell | 0)] ?? 0;
+	}
+	/** Turns counts into a bitmap and, for a single series, the count ramp the legend shows. */
+	shade(scale, palette) {
+		const table = ColorTable.ramp(palette);
+		const counts = this.#counts, mix = this.#mix, peak = this.#peak;
+		const words = this.#words = new Uint32Array(counts.length);
+		const log = scale === MassiveDensityScale.Log, top = log ? Math.log1p(peak) : peak;
+		const last = table.length - 1;
+		for (let i = 0; i < counts.length; i++) {
+			const count = counts[i];
+			if (!count) continue;
+			const t = (log ? Math.log1p(count) : count) / top;
+			if (!mix) {
+				words[i] = table[t * last | 0];
+				continue;
+			}
+			const slot = i * 3;
+			words[i] = ColorTable.pack(mix[slot] / count | 0, mix[slot + 1] / count | 0, mix[slot + 2] / count | 0, 89 + 166 * t | 0);
+		}
+		const countAt = (t) => log ? Math.expm1(t * top) : t * top;
+		const stops = STOPS.map((t) => ({
+			key: `ramp-${t}`,
+			label: short.format(Math.max(1, Math.round(countAt(t)))),
+			color: palette.sequential(ColorTable.tone(t))
+		}));
+		this.#ramp = mix || !peak ? void 0 : stops.filter((stop, i) => stops.findIndex(({ label }) => label === stop.label) === i);
+		return this;
+	}
+	draw(surface) {
+		surface.pixels(this.#words, this.#columns, this.#rows, this.#cell);
+	}
+};
+export { DensityRaster };

package/dist/charts/massive/MassiveEnums.js

@@ -0,0 +1,22 @@
+// src/charts/massive/MassiveEnums.ts
+/** How a point chart draws: individual marks, binned density, or whichever the current view can read. */
+var MassiveDisplay = /* @__PURE__ */ function(MassiveDisplay) {
+	MassiveDisplay["Auto"] = "auto";
+	MassiveDisplay["Marks"] = "marks";
+	MassiveDisplay["Density"] = "density";
+	return MassiveDisplay;
+}({});
+/** How a line is reduced before stroking. `None` strokes every point. */
+var MassiveDecimation = /* @__PURE__ */ function(MassiveDecimation) {
+	MassiveDecimation["MinMax"] = "min-max";
+	MassiveDecimation["Lttb"] = "lttb";
+	MassiveDecimation["None"] = "none";
+	return MassiveDecimation;
+}({});
+/** How a bin's count maps to tone. */
+var MassiveDensityScale = /* @__PURE__ */ function(MassiveDensityScale) {
+	MassiveDensityScale["Log"] = "log";
+	MassiveDensityScale["Linear"] = "linear";
+	return MassiveDensityScale;
+}({});
+export { MassiveDecimation, MassiveDensityScale, MassiveDisplay };

package/dist/charts/massive/MassiveLineChart.js

@@ -0,0 +1,82 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LineLayer } from "./MassiveLineLayer.js";
+import { LineSeries } from "./MassiveLineSeries.js";
+import { LttbDecimator } from "./LttbDecimator.js";
+import { MassiveChart } from "./MassiveChart.js";
+import { MassiveDecimation } from "./MassiveEnums.js";
+import { MinMaxDecimator } from "./MinMaxDecimator.js";
+import { PassThrough } from "./PassThroughDecimator.js";
+// src/charts/massive/MassiveLineChart.ts
+var STROKE = 2;
+var REDUCERS = {
+	[MassiveDecimation.MinMax]: MinMaxDecimator.reduce,
+	[MassiveDecimation.Lttb]: LttbDecimator.reduce,
+	[MassiveDecimation.None]: PassThrough.reduce
+};
+/** Line for millions of ordered points: each view is decimated to what its pixels can show, so spikes survive and frames stay short. */
+var MassiveLineChart = class extends MassiveChart {
+	static meta = {
+		id: "massive-line",
+		name: "Massive line",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Strokes millions of ordered points on canvas after min-max or LTTB decimation to the pixels on screen.",
+		tags: [
+			"canvas",
+			"large data",
+			"million points",
+			"time series",
+			"decimation",
+			"lttb",
+			"m4"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 2e4, 3),
+		variants: {
+			decimation: [
+				MassiveDecimation.MinMax,
+				MassiveDecimation.Lttb,
+				MassiveDecimation.None
+			],
+			yScale: [ScaleKind.Linear, ScaleKind.Log]
+		}
+	};
+	#runs = [];
+	#runsOf = null;
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "date",
+			y: "value",
+			series: "series",
+			decimation: MassiveDecimation.MinMax
+		};
+	}
+	fillsX() {
+		return true;
+	}
+	/** The whole column under the pointer, so a tooltip follows the x position. */
+	hoverReach() {
+		return {
+			x: 12,
+			y: Infinity
+		};
+	}
+	compose(view, points, colors, _ctx) {
+		if (this.#runsOf !== points) {
+			this.#runs = LineSeries.split(points);
+			this.#runsOf = points;
+		}
+		const reduce = REDUCERS[this.options.decimation];
+		const left = -view.bx / view.ax, right = (view.width - view.bx) / view.ax;
+		return new LineLayer(this.#runs.map((run) => {
+			const [from, to] = LineSeries.span(run.x, left, right);
+			return {
+				points: reduce(run, from, to, view),
+				color: colors[run.group]
+			};
+		}), STROKE * view.ratio);
+	}
+};
+export { MassiveLineChart };

package/dist/charts/massive/MassiveLineLayer.js

@@ -0,0 +1,42 @@
+// src/charts/massive/MassiveLineLayer.ts
+/** One stroked polyline per series, in device pixels. Canvas draws no zero-length line, so a series on one spot becomes a dot. */
+var LineLayer = class {
+	kind = "line";
+	geometry;
+	#paths;
+	#width;
+	constructor(paths, width) {
+		this.#paths = paths;
+		this.#width = width;
+		const merged = this.geometry = new Float32Array(paths.reduce((sum, { points }) => sum + points.length, 0));
+		let at = 0;
+		for (const { points } of paths) {
+			merged.set(points, at);
+			at += points.length;
+		}
+	}
+	draw(surface) {
+		const context = surface.context;
+		if (!context) return;
+		context.lineWidth = this.#width;
+		context.lineJoin = "round";
+		context.lineCap = "round";
+		for (const { points, color } of this.#paths) {
+			context.strokeStyle = color;
+			context.beginPath();
+			let spread = false;
+			for (let i = 0; i < points.length; i += 2) {
+				if (i) context.lineTo(points[i], points[i + 1]);
+				else context.moveTo(points[0], points[1]);
+				spread ||= points[i] !== points[0] || points[i + 1] !== points[1];
+			}
+			context.stroke();
+			if (spread || !points.length) continue;
+			context.fillStyle = color;
+			context.beginPath();
+			context.arc(points[0], points[1], this.#width / 2, 0, Math.PI * 2);
+			context.fill();
+		}
+	}
+};
+export { LineLayer };

package/dist/charts/massive/MassiveLineSeries.js

@@ -0,0 +1,63 @@
+// src/charts/massive/MassiveLineSeries.ts
+/** Splits points by series and sorts each by x, so a view can find its visible span by bisection. Points a log scale cannot place leave here, so a line joins across them. */
+var LineSeries = class LineSeries {
+	static split({ x, y, group, length }) {
+		const sizes = /* @__PURE__ */ new Uint32Array(65536);
+		const placed = (i) => x[i] === x[i] && y[i] === y[i];
+		for (let i = 0; i < length; i++) if (placed(i)) sizes[group[i]]++;
+		const runs = [];
+		const slots = /* @__PURE__ */ new Map();
+		for (let i = 0; i < length; i++) {
+			if (!placed(i)) continue;
+			const id = group[i];
+			let slot = slots.get(id);
+			if (!slot) {
+				const size = sizes[id];
+				slot = {
+					run: {
+						group: id,
+						x: new Float64Array(size),
+						y: new Float64Array(size),
+						index: new Uint32Array(size)
+					},
+					used: 0
+				};
+				slots.set(id, slot);
+				runs.push(slot.run);
+			}
+			const at = slot.used++;
+			slot.run.x[at] = x[i];
+			slot.run.y[at] = y[i];
+			slot.run.index[at] = i;
+		}
+		return runs.map(LineSeries.sorted);
+	}
+	static sorted(run) {
+		const { x, y, index } = run;
+		let ascending = true;
+		for (let i = 1; i < x.length && ascending; i++) ascending = x[i - 1] <= x[i];
+		if (ascending) return run;
+		const order = Uint32Array.from(x.keys()).sort((a, b) => x[a] - x[b] || a - b);
+		return {
+			group: run.group,
+			x: Float64Array.from(order, (i) => x[i]),
+			y: Float64Array.from(order, (i) => y[i]),
+			index: Uint32Array.from(order, (i) => index[i])
+		};
+	}
+	/** First index whose x is at least `value`. */
+	static lower(x, value) {
+		let low = 0, high = x.length;
+		while (low < high) {
+			const middle = low + high >>> 1;
+			if (x[middle] < value) low = middle + 1;
+			else high = middle;
+		}
+		return low;
+	}
+	/** The indexes `[from, to)` that reach the view, with one neighbour each side so the line runs off the edge. */
+	static span(x, left, right) {
+		return [Math.max(0, LineSeries.lower(x, left) - 1), Math.min(x.length, LineSeries.lower(x, right) + 1)];
+	}
+};
+export { LineSeries };

package/dist/charts/massive/MassiveMarkLayer.js

@@ -0,0 +1,38 @@
+import "./MassiveTypes.js";
+// src/charts/massive/MassiveMarkLayer.ts
+/** Individual ringed dots, stamped from one sprite per colour in data order, so a sparse view reads as a normal scatter. */
+var MarkLayer = class {
+	kind = "marks";
+	geometry;
+	#groups;
+	#colors;
+	#ring;
+	#radius;
+	#gap;
+	/** @param visible how many points the view holds, already counted by a density pass */
+	constructor({ ax, bx, ay, by, width, height, ratio }, { x, y, group, length }, visible, colors, ring, radius, gap) {
+		const spots = new Float32Array(visible * 2), groups = new Uint16Array(visible);
+		let kept = 0;
+		for (let i = 0; i < length; i++) {
+			const px = ax * x[i] + bx, py = ay * y[i] + by;
+			if (!(px >= -.5 && px <= width + .5 && py >= -.5 && py <= height + .5)) continue;
+			spots[kept * 2] = px;
+			spots[kept * 2 + 1] = py;
+			groups[kept++] = group[i];
+		}
+		this.geometry = spots;
+		this.#groups = groups;
+		this.#colors = colors;
+		this.#ring = ring;
+		this.#radius = radius * ratio;
+		this.#gap = gap * ratio;
+	}
+	draw(surface) {
+		const context = surface.context;
+		if (!context) return;
+		const sprites = this.#colors.map((color) => surface.sprite(color, this.#ring, this.#radius, this.#gap));
+		const spots = this.geometry, groups = this.#groups, half = sprites[0].width / 2;
+		for (let i = 0; i < groups.length; i++) context.drawImage(sprites[groups[i]], Math.round(spots[i * 2] - half), Math.round(spots[i * 2 + 1] - half));
+	}
+};
+export { MarkLayer };

package/dist/charts/massive/MassiveNearestIndex.js

@@ -0,0 +1,90 @@
+import "./MassiveTypes.js";
+// src/charts/massive/MassiveNearestIndex.ts
+var PER_CELL = 8;
+var MAX_SIDE = 4096;
+/**
+* Finds the nearest point to the pointer: a uniform grid in flat typed arrays, built by counting sort.
+* It plays the part of d3-quadtree at a size where a tree of objects costs seconds and hundreds of megabytes,
+* and it stays valid under zoom because it lives in scale space and only the pixel metric changes.
+*/
+var NearestIndex = class {
+	#x;
+	#y;
+	#side;
+	#left;
+	#bottom;
+	#perX;
+	#perY;
+	#starts;
+	#order;
+	constructor({ x, y, length }) {
+		this.#x = x;
+		this.#y = y;
+		let left = Infinity, right = -Infinity, bottom = Infinity, top = -Infinity, valid = 0;
+		for (let i = 0; i < length; i++) {
+			const px = x[i], py = y[i];
+			if (px !== px || py !== py) continue;
+			valid++;
+			if (px < left) left = px;
+			if (px > right) right = px;
+			if (py < bottom) bottom = py;
+			if (py > top) top = py;
+		}
+		const side = this.#side = Math.max(1, Math.min(MAX_SIDE, Math.ceil(Math.sqrt(valid / PER_CELL))));
+		this.#left = left;
+		this.#bottom = bottom;
+		const perX = this.#perX = right > left ? side / (right - left) : 0, perY = this.#perY = top > bottom ? side / (top - bottom) : 0;
+		const edge = side - 1;
+		const cells = new Uint32Array(length);
+		const starts = this.#starts = new Uint32Array(side * side + 1);
+		for (let i = 0; i < length; i++) {
+			const px = x[i], py = y[i];
+			if (px !== px || py !== py) {
+				cells[i] = side * side;
+				continue;
+			}
+			const column = Math.min(edge, (px - left) * perX | 0), row = Math.min(edge, (py - bottom) * perY | 0);
+			starts[cells[i] = row * side + column]++;
+		}
+		let total = 0;
+		for (let i = 0; i < starts.length; i++) {
+			const size = starts[i];
+			starts[i] = total;
+			total += size;
+		}
+		const order = this.#order = new Uint32Array(valid);
+		const next = starts.slice();
+		for (let i = 0; i < length; i++) {
+			const cell = cells[i];
+			if (cell < side * side) order[next[cell]++] = i;
+		}
+	}
+	/** The closest point on the plot within `reachX` and `reachY` device pixels of a device pixel, or -1. */
+	nearest({ ax, bx, ay, by, width, height }, px, py, reachX, reachY) {
+		if (!this.#order.length) return -1;
+		const edge = this.#side - 1;
+		const clamp = (value) => value !== value ? 0 : Math.max(0, Math.min(edge, Math.floor(value)));
+		const spanX = [((px - reachX - bx) / ax - this.#left) * this.#perX, ((px + reachX - bx) / ax - this.#left) * this.#perX].sort((a, b) => a - b);
+		const spanY = [((py - reachY - by) / ay - this.#bottom) * this.#perY, ((py + reachY - by) / ay - this.#bottom) * this.#perY].sort((a, b) => a - b);
+		const columnFrom = this.#perX ? clamp(spanX[0]) : 0, columnTo = this.#perX ? clamp(spanX[1]) : 0;
+		const rowFrom = this.#perY ? clamp(spanY[0]) : 0, rowTo = this.#perY ? clamp(spanY[1]) : 0;
+		const x = this.#x, y = this.#y, order = this.#order, starts = this.#starts, side = this.#side;
+		let best = -1, bestDistance = Infinity;
+		for (let row = rowFrom; row <= rowTo; row++) {
+			const from = starts[row * side + columnFrom], to = starts[row * side + columnTo + 1];
+			for (let i = from; i < to; i++) {
+				const point = order[i];
+				const sx = ax * x[point] + bx, sy = ay * y[point] + by, dx = sx - px, dy = sy - py;
+				if (Math.abs(dx) > reachX || Math.abs(dy) > reachY) continue;
+				if (sx < -.5 || sx > width + .5 || sy < -.5 || sy > height + .5) continue;
+				const distance = dx * dx + dy * dy;
+				if (distance < bestDistance) {
+					bestDistance = distance;
+					best = point;
+				}
+			}
+		}
+		return best;
+	}
+};
+export { NearestIndex };

package/dist/charts/massive/MassivePointColumns.js

@@ -0,0 +1,84 @@
+// src/charts/massive/MassivePointColumns.ts
+var numeric = (value) => {
+	if (typeof value === "number") return value;
+	if (value instanceof Date) return value.getTime();
+	return value == null || value === "" ? NaN : +value;
+};
+var isRows = (data) => Array.isArray(data);
+var DATED = /^\d{4}[-/]\d{1,2}/;
+var MOST_GROUPS = 65535;
+/** Normalises rows or columns into typed arrays, dropping points with no finite position. */
+var PointColumns = class PointColumns {
+	x;
+	y;
+	group;
+	source;
+	names;
+	time;
+	constructor(x, y, group, source, names, time) {
+		this.x = x;
+		this.y = y;
+		this.group = group;
+		this.source = source;
+		this.names = names;
+		this.time = time;
+	}
+	get length() {
+		return this.x.length;
+	}
+	static from(data, x, y, series) {
+		if (!data) return PointColumns.fill(0, [], false, () => 0, () => 0, () => 0);
+		if (isRows(data)) return PointColumns.fromRows(data, x, y, series);
+		return PointColumns.fromColumns(data);
+	}
+	static fromRows(rows, x, y, series) {
+		const names = /* @__PURE__ */ new Map();
+		let time = false;
+		const groupOf = (i) => {
+			if (!series) return 0;
+			const name = String(rows[i][series] ?? "");
+			let at = names.get(name);
+			if (at === void 0) names.set(name, at = names.size);
+			return at;
+		};
+		const xOf = (i) => {
+			const value = rows[i][x];
+			const number = numeric(value);
+			if (value instanceof Date) time = true;
+			if (number === number || typeof value !== "string" || !DATED.test(value)) return number;
+			time = true;
+			return Date.parse(value);
+		};
+		const columns = PointColumns.fill(rows.length, [], false, xOf, (i) => numeric(rows[i][y]), groupOf);
+		return new PointColumns(columns.x, columns.y, columns.group, columns.source, names.size ? [...names.keys()] : ["All"], time);
+	}
+	static fromColumns({ x, y, series, names, time }) {
+		const length = Math.min(x.length, y.length);
+		const top = series ? PointColumns.highest(series, length) : 0;
+		const labels = Array.from({ length: Math.max(top + 1, names?.length ?? 0) }, (_, i) => names?.[i] ?? `Series ${i + 1}`);
+		return PointColumns.fill(length, labels, !!time, (i) => x[i], (i) => y[i], series ? (i) => PointColumns.groupOf(series[i]) : () => 0);
+	}
+	static highest(values, length) {
+		let top = 0;
+		for (let i = 0; i < length; i++) if (PointColumns.groupOf(values[i]) > top) top = PointColumns.groupOf(values[i]);
+		return top;
+	}
+	/** A group slot for any value, since a typed array would wrap one that does not fit. */
+	static groupOf(value) {
+		return value >= 0 && value <= MOST_GROUPS ? Math.floor(value) : 0;
+	}
+	static fill(length, names, time, x, y, group) {
+		const xs = new Float64Array(length), ys = new Float64Array(length), groups = new Uint16Array(length), source = new Uint32Array(length);
+		let kept = 0;
+		for (let i = 0; i < length; i++) {
+			const px = x(i), py = y(i);
+			if (!Number.isFinite(px) || !Number.isFinite(py)) continue;
+			xs[kept] = px;
+			ys[kept] = py;
+			groups[kept] = group(i);
+			source[kept++] = i;
+		}
+		return new PointColumns(xs.subarray(0, kept), ys.subarray(0, kept), groups.subarray(0, kept), source.subarray(0, kept), names, time);
+	}
+};
+export { PointColumns };

package/dist/charts/massive/MassiveScatterChart.js

@@ -0,0 +1,57 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ColorTable } from "./MassiveColorTable.js";
+import { DensityRaster } from "./MassiveDensityRaster.js";
+import { MarkLayer } from "./MassiveMarkLayer.js";
+import { MassiveChart } from "./MassiveChart.js";
+import { MassiveDensityScale, MassiveDisplay } from "./MassiveEnums.js";
+// src/charts/massive/MassiveScatterChart.ts
+var RADIUS = 4;
+var GAP = 2;
+var BIN = 2;
+/** Below this many visible points individual marks are always affordable and always readable. */
+var SPARSE = 2e3;
+/** Points per mark-sized patch above which marks hide each other. */
+var CROWDED = 2;
+/** Scatter for up to millions of points: real marks while they read, a density raster once they would overplot. */
+var MassiveScatterChart = class extends MassiveChart {
+	static meta = {
+		id: "massive-scatter",
+		name: "Massive scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots millions of points on canvas, switching from ringed dots to a density raster as the current view overplots.",
+		tags: [
+			"canvas",
+			"large data",
+			"million points",
+			"webgl alternative",
+			"datashader",
+			"overplotting"
+		],
+		sample: (seed) => SampleData.points(seed, 6e4, 3),
+		variants: {
+			display: [MassiveDisplay.Auto, MassiveDisplay.Marks],
+			yScale: [ScaleKind.Linear, ScaleKind.Log]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "x",
+			y: "y",
+			series: "group",
+			display: MassiveDisplay.Auto
+		};
+	}
+	compose(view, points, colors, ctx) {
+		const single = colors.length < 2;
+		const grid = new DensityRaster(view, points, BIN * view.ratio, single ? null : Uint8Array.from(colors.flatMap(ColorTable.rgb)));
+		const { display } = this.options;
+		const crowded = grid.visible >= SPARSE && grid.crowding(8 / BIN) > CROWDED;
+		if (display === MassiveDisplay.Density || display === MassiveDisplay.Auto && crowded) return grid.shade(MassiveDensityScale.Log, ctx.palette);
+		return new MarkLayer(view, points, grid.visible, colors, ctx.theme.surface, RADIUS, GAP);
+	}
+};
+export { MassiveScatterChart };