@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/signals/OscilloscopeChart.js

@@ -0,0 +1,229 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SignalChart } from "./SignalChart.js";
+import { SignalDsp } from "./SignalDsp.js";
+import { SignalSamples } from "./SignalSamples.js";
+import { SignalScales } from "./SignalScales.js";
+import { area, max, min, scaleLinear } from "d3";
+// src/charts/signals/OscilloscopeChart.ts
+var ScopeMode = /* @__PURE__ */ function(ScopeMode) {
+	ScopeMode["YT"] = "yt";
+	ScopeMode["XY"] = "xy";
+	ScopeMode["Roll"] = "roll";
+	return ScopeMode;
+}({});
+var ScopeTrigger = /* @__PURE__ */ function(ScopeTrigger) {
+	ScopeTrigger["Rising"] = "rising";
+	ScopeTrigger["Falling"] = "falling";
+	return ScopeTrigger;
+}({});
+var ScopeDisplay = /* @__PURE__ */ function(ScopeDisplay) {
+	ScopeDisplay["Vector"] = "vector";
+	ScopeDisplay["Persistence"] = "persistence";
+	ScopeDisplay["Envelope"] = "envelope";
+	return ScopeDisplay;
+}({});
+var ScopeCoupling = /* @__PURE__ */ function(ScopeCoupling) {
+	ScopeCoupling["DC"] = "dc";
+	ScopeCoupling["AC"] = "ac";
+	return ScopeCoupling;
+}({});
+var TONE = 400;
+var DIVISIONS = {
+	x: 10,
+	y: 8
+};
+var PRE = 1;
+var ceilStep = (value) => {
+	const power = 10 ** Math.floor(Math.log10(value || 1)), unit = value / power;
+	return ([
+		1,
+		2,
+		5,
+		10
+	].find((step) => step >= unit - 1e-9) ?? 10) * power;
+};
+var seconds = (value) => value >= 1 ? `${+value.toFixed(2)} s` : value >= .001 ? `${+(value * 1e3).toFixed(2)} ms` : `${+(value * 1e6).toFixed(1)} µs`;
+/** Reads a repeating signal the way a bench scope shows it: triggered, on a graticule, measured in divisions. */
+var OscilloscopeChart = class extends SignalChart {
+	static meta = {
+		id: "signal-oscilloscope",
+		name: "Oscilloscope",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows triggered sweeps on a graticule to examine the shape, period and stability of a repeating signal.",
+		tags: [
+			"scope",
+			"graticule",
+			"trigger",
+			"lissajous",
+			"xy"
+		],
+		sample: (seed) => SignalSamples.noise(seed, 3e3, 2).flatMap(({ name, noise }, channel) => noise.map((step, i) => {
+			const t = i / 48e3, base = TONE * t * Math.PI * 2 + channel * .9;
+			const value = channel ? .55 * Math.sin(2 * base) - .2 : 1.1 * Math.sin(base) + .3 * Math.sin(3 * base) + .4;
+			return {
+				t: +t.toFixed(7),
+				series: name,
+				value: +(value + step * .018).toFixed(4)
+			};
+		})),
+		variants: {
+			mode: Object.values(ScopeMode),
+			trigger: Object.values(ScopeTrigger),
+			display: Object.values(ScopeDisplay),
+			coupling: Object.values(ScopeCoupling),
+			cursors: [true, false]
+		},
+		valid: (values) => {
+			if (values.mode === "yt") return true;
+			if (values.trigger !== "rising" || values.display === "envelope") return false;
+			return values.mode === "xy" ? values.cursors === false : values.display === "vector";
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			xLabel: void 0,
+			yLabel: void 0,
+			mode: "yt",
+			trigger: "rising",
+			display: "vector",
+			coupling: "dc",
+			cursors: true,
+			sweeps: 12
+		};
+	}
+	coupled(channel) {
+		if (this.options.coupling === "dc") return channel.v;
+		const centre = channel.v.reduce((sum, value) => sum + value, 0) / (channel.v.length || 1);
+		return channel.v.map((value) => value - centre);
+	}
+	/** Sample indices of level crossings in the trigger direction on the first channel. */
+	crossings() {
+		const channel = this.first, values = this.coupled(channel), level = ((max(values) ?? 0) + (min(values) ?? 0)) / 2, rising = this.options.trigger === "rising", out = [];
+		for (let i = 1; i < values.length; i++) if (rising ? values[i - 1] < level && values[i] >= level : values[i - 1] > level && values[i] <= level) {
+			if (!out.length || i - out[out.length - 1] > 8) out.push(i);
+		}
+		return out;
+	}
+	get period() {
+		const hits = this.crossings(), gaps = hits.slice(1).map((hit, i) => hit - hits[i]).sort((a, b) => a - b);
+		return gaps.length ? gaps[gaps.length >> 1] / this.first.rate : 0;
+	}
+	/** Time per division: 1-2-5 sequence showing about three cycles. */
+	get timebase() {
+		const duration = this.span[1] - this.span[0];
+		return ceilStep((this.period ? this.period * 3 : duration) / DIVISIONS.x);
+	}
+	get volts() {
+		return ceilStep(((max(this.channels, (channel) => max(this.coupled(channel), Math.abs)) ?? 1) || 1) / 3);
+	}
+	get xy() {
+		return this.options.mode === "xy";
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot, volts = this.volts, base = this.timebase;
+		const y = scaleLinear([-volts * DIVISIONS.y / 2, volts * DIVISIONS.y / 2], [height, 0]);
+		const y2 = SignalScales.labelled(y, Array.from({ length: DIVISIONS.y / 2 + 1 }, (_, i) => (i * 2 - DIVISIONS.y / 2) * volts), SignalScales.number);
+		if (this.xy) {
+			const x = scaleLinear(y.domain(), [0, width]);
+			return {
+				x: SignalScales.labelled(x, y2.ticks(), SignalScales.number),
+				y: y2
+			};
+		}
+		const x = scaleLinear([-1 * base, (DIVISIONS.x - PRE) * base], [0, width]);
+		return {
+			x: SignalScales.labelled(x, Array.from({ length: 6 }, (_, i) => (i * 2 - PRE) * base), (value) => (value < 0 ? "-" : "") + seconds(Math.abs(value))),
+			y: y2
+		};
+	}
+	/** One sweep per channel per trigger, each relative to its trigger time. */
+	sweeps(x, width) {
+		const { display, mode, sweeps } = this.options, [from, to] = x.domain(), hits = this.crossings();
+		const armed = hits.length > 1 ? hits.slice(1) : [0];
+		return (mode === "roll" ? [this.span[1] - to] : armed.slice(0, display === "vector" ? 1 : sweeps).map((hit) => this.first.t[hit] ?? 0)).flatMap((zero, s) => this.channels.map((channel) => {
+			const values = this.coupled(channel), kept = [];
+			for (let i = 0; i < values.length; i++) {
+				const at = channel.t[i] - zero;
+				if (at >= from && at <= to) kept.push([at, values[i]]);
+			}
+			const stride = Math.max(1, Math.floor(kept.length / (width / 1.5)));
+			return {
+				key: `${channel.name}${s}`,
+				name: channel.name,
+				points: kept.filter((_, i) => i % stride === 0)
+			};
+		}));
+	}
+	plotMarks(ctx, { x, y }) {
+		const { width, height } = ctx.plot, { display, cursors, mode } = this.options, hi = x.domain()[1];
+		for (const channel of this.channels) ctx.palette.color(channel.name);
+		const lines = Array.from({ length: DIVISIONS.x + 1 }, (_, i) => i * width / DIVISIONS.x);
+		ctx.marks("graticule", "line", lines, (at) => at).attr("x1", (at) => at).attr("x2", (at) => at).attr("y1", 0).attr("y2", height).attr("stroke", ctx.theme.grid);
+		const rows = Array.from({ length: DIVISIONS.y + 1 }, (_, i) => i * height / DIVISIONS.y);
+		ctx.marks("graticule-rows", "line", rows, (at) => at).attr("x1", 0).attr("x2", width).attr("y1", (at) => at).attr("y2", (at) => at).attr("stroke", ctx.theme.grid);
+		ctx.marks("centre", "path", [0]).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("d", `M${width / 2} 0V${height}M0 ${height / 2}H${width}`);
+		const color = (name) => ctx.palette.color(name);
+		if (this.xy) this.lissajous(ctx, x, y);
+		else {
+			const all = this.sweeps(x, width);
+			if (display === "envelope") this.envelope(ctx, all, x, y);
+			else this.stroke(ctx, "sweep", all, (sweep) => sweep.key, (sweep) => this.path(sweep.points, x, y), (sweep) => color(sweep.name), display === "persistence" ? 1 : 2).attr("stroke-opacity", display === "persistence" ? .4 : 1);
+		}
+		if (mode === "yt") {
+			const zero = x(0), going = this.options.trigger === "rising" ? -5 : 5;
+			ctx.marks("trigger", "path", [0]).attr("fill", ctx.theme.inkSecondary).attr("stroke", "none").attr("d", `M${zero - 5} ${going < 0 ? 7 : 0}L${zero + 5} ${going < 0 ? 7 : 0}L${zero} ${going < 0 ? 0 : 7}Z`);
+		}
+		const period = this.period;
+		if (cursors && mode !== "xy" && period) {
+			const points = mode === "yt" ? [0, period] : [hi - period * 2, hi - period];
+			ctx.marks("cursors", "line", points, (_, i) => i).attr("x1", (at) => x(at)).attr("x2", (at) => x(at)).attr("y1", 0).attr("y2", height).attr("stroke", ctx.theme.ink).attr("stroke-dasharray", "4 3");
+			const flip = x(points[1]) > width - 104;
+			ctx.text(ctx.marks("cursor-text", "text", [0]).attr("x", x(points[1]) + (flip ? -6 : 6)).attr("y", height - 7).attr("text-anchor", flip ? "end" : "start").text(`Δt ${seconds(period)}  ${SignalScales.hertz(1 / period)} Hz`), 11, "ink");
+		}
+		const voltsPerDiv = (y.domain()[1] - y.domain()[0]) / DIVISIONS.y, timePerDiv = (hi - x.domain()[0]) / DIVISIONS.x;
+		ctx.text(ctx.marks("readout", "text", [0]).attr("x", width - 4).attr("y", 12).attr("text-anchor", "end").text(`${SignalScales.number(voltsPerDiv)} V/div${this.xy ? "" : `  ${seconds(timePerDiv)}/div`}`), 11, "secondary");
+		this.probe(ctx, (px) => {
+			if (this.xy) return null;
+			const at = x.invert(px), zero = mode === "roll" ? this.span[1] - hi : this.first.t[this.crossings()[1]] ?? 0;
+			return {
+				x: px,
+				tip: {
+					title: seconds(Math.abs(at)),
+					rows: this.channels.map((channel) => [channel.name, SignalScales.number(SignalDsp.interpolate(channel.t, this.coupled(channel), at + zero))])
+				},
+				datum: { t: at }
+			};
+		});
+	}
+	envelope(ctx, sweeps, x, y) {
+		const bands = [...new Set(sweeps.map((sweep) => sweep.name))].map((name) => {
+			const mine = sweeps.filter((sweep) => sweep.name === name);
+			return {
+				name,
+				rows: (mine[0]?.points ?? []).map(([at]) => {
+					const values = mine.map((sweep) => SignalDsp.interpolate(sweep.points.map((point) => point[0]), sweep.points.map((point) => point[1]), at));
+					return {
+						at,
+						low: min(values),
+						high: max(values)
+					};
+				})
+			};
+		});
+		const shape = area().x((row) => x(row.at)).y0((row) => y(row.low) + 1).y1((row) => y(row.high) - 1);
+		this.fill(ctx, "envelope", bands, (band) => band.name, (band) => shape(band.rows) ?? "", (band) => ctx.palette.color(band.name), .85);
+	}
+	/** XY mode: first channel drives x, second drives y, or the signal's own slope when alone. */
+	lissajous(ctx, x, y) {
+		const a = this.channels[0], b = this.channels[1];
+		if (!a) return;
+		const ax = this.coupled(a), ay = b ? this.coupled(b) : ax.map((value, i) => value - (ax[i - 1] ?? value));
+		const span = Math.min(ax.length, ay.length, Math.ceil((this.period || .01) * a.rate * (this.options.display === "persistence" ? 6 : 1.02)));
+		const points = Array.from({ length: span }, (_, i) => [ax[i], ay[i]]);
+		this.stroke(ctx, "figure", [points], () => 0, (list) => this.path(list, x, y), () => ctx.palette.color(a.name), this.options.display === "persistence" ? 1 : 2);
+	}
+};
+export { OscilloscopeChart, ScopeCoupling, ScopeDisplay, ScopeMode, ScopeTrigger };

package/dist/charts/signals/PeriodogramChart.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SignalDsp } from "./SignalDsp.js";
+import { SignalAmplitude, SignalFrequencyScale, SignalWindow } from "./SignalEnums.js";
+import { SignalSamples } from "./SignalSamples.js";
+import { SignalScales } from "./SignalScales.js";
+import { SpectralChart } from "./SpectralChart.js";
+import { area, max, min, scaleLinear, scaleLog } from "d3";
+// src/charts/signals/PeriodogramChart.ts
+var PeriodogramMethod = /* @__PURE__ */ function(PeriodogramMethod) {
+	PeriodogramMethod["Welch"] = "welch";
+	PeriodogramMethod["Bartlett"] = "bartlett";
+	PeriodogramMethod["Raw"] = "raw";
+	PeriodogramMethod["LombScargle"] = "lomb-scargle";
+	return PeriodogramMethod;
+}({});
+var PeriodogramAbscissa = /* @__PURE__ */ function(PeriodogramAbscissa) {
+	PeriodogramAbscissa["Frequency"] = "frequency";
+	PeriodogramAbscissa["LogFrequency"] = "log-frequency";
+	PeriodogramAbscissa["Period"] = "period";
+	return PeriodogramAbscissa;
+}({});
+/** Wilson-Hilferty approximation of the chi-squared quantile. */
+var chiSquared = (dof, z) => dof * (1 - 2 / (9 * dof) + z * Math.sqrt(2 / (9 * dof))) ** 3;
+var CAP = 512;
+/** Estimates power spectral density, trading resolution for variance, including for unevenly sampled data. */
+var PeriodogramChart = class extends SpectralChart {
+	static meta = {
+		id: "signal-periodogram",
+		name: "Periodogram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Estimates power spectral density by the raw, Bartlett, Welch or Lomb-Scargle method to reveal periodicities.",
+		tags: [
+			"psd",
+			"welch",
+			"lomb-scargle",
+			"power spectrum"
+		],
+		sample: (seed) => SignalSamples.notes(seed, 2048, 1),
+		variants: {
+			method: Object.values(PeriodogramMethod),
+			abscissa: Object.values(PeriodogramAbscissa),
+			amplitude: Object.values(SignalAmplitude),
+			confidence: [true, false]
+		}
+	};
+	constructor(options) {
+		super({
+			xLabel: options.abscissa === "period" ? "Period (ms)" : "Frequency (Hz)",
+			yLabel: options.amplitude === SignalAmplitude.Linear ? "PSD" : "PSD (dB/Hz)",
+			...options
+		});
+	}
+	defaults() {
+		return {
+			...super.defaults(),
+			method: "welch",
+			abscissa: "log-frequency",
+			amplitude: SignalAmplitude.Decibel,
+			confidence: true,
+			segment: 256
+		};
+	}
+	estimates(ctx) {
+		const { method, segment, abscissa } = this.options;
+		return this.channels.map((channel) => {
+			let freqs, power, freedom = 2;
+			if (method === "lomb-scargle") {
+				const stride = Math.max(1, Math.ceil(channel.t.length / CAP)), t = channel.t.filter((_, i) => i % stride === 0), v = channel.v.filter((_, i) => i % stride === 0);
+				const least = channel.rate / (2 * stride) / 200;
+				freqs = Array.from({ length: 200 }, (_, i) => least * (i + 1));
+				power = t.length > 2 ? SignalDsp.lombScargle(t, v, freqs) : [];
+				if (!power.length) freqs = [];
+			} else {
+				const single = method === "raw";
+				const size = single ? channel.v.length : segment, kind = method === "bartlett" || single ? SignalWindow.Rectangular : SignalWindow.Hann;
+				const estimate = SignalDsp.welch(channel.v, channel.rate, kind, size, method === "welch" ? .5 : 0);
+				freqs = estimate.freq;
+				power = estimate.mag;
+				freedom = 2 * Math.max(1, estimate.segments) * (method === "welch" ? .9 : 1);
+			}
+			const x = abscissa === "period" ? freqs.map((freq) => 1 / freq) : freqs;
+			return {
+				name: channel.name,
+				color: ctx.palette.color(channel.name),
+				x,
+				power,
+				freedom
+			};
+		});
+	}
+	level(power) {
+		return this.options.amplitude === SignalAmplitude.Decibel ? 10 * Math.log10(Math.max(power, 1e-12)) : power;
+	}
+	/** Display range: decibel plots keep 80 dB under the top, so noise floors do not flatten the peaks. */
+	levels(estimates) {
+		const top = max(estimates, (estimate) => max(estimate.power, (power) => this.level(power))) ?? 1;
+		return this.options.amplitude === SignalAmplitude.Decibel ? [top - 80, top + 6] : [0, (top || 1) * 1.1];
+	}
+	scales(ctx) {
+		const estimates = this.estimates(ctx), { width, height } = ctx.plot, { abscissa } = this.options;
+		const all = estimates.flatMap((estimate) => estimate.x).filter((value) => value > 0);
+		const y = scaleLinear(this.levels(estimates), [height, 0]).nice(5);
+		if (abscissa === "frequency" || abscissa === "log-frequency") {
+			const kind = abscissa === "frequency" ? SignalFrequencyScale.Linear : SignalFrequencyScale.Log;
+			const lo = min(all) ?? 1, hi = max(all) ?? 10;
+			return {
+				x: SignalScales.frequency(kind, [kind === SignalFrequencyScale.Linear ? 0 : lo, hi], [0, width]),
+				y
+			};
+		}
+		const lo = min(all) ?? .001, hi = Math.max(max(all) ?? 1, lo * 10);
+		const x = scaleLog([lo, hi], [0, width]);
+		return {
+			x: SignalScales.labelled(x, SignalScales.sparse(x, lo, hi), (value) => `${+(value * 1e3).toPrecision(3)}`),
+			y
+		};
+	}
+	plotMarks(ctx, { x, y }) {
+		const estimates = this.estimates(ctx), { confidence, method } = this.options, [floor, top] = y.domain();
+		const clamp = (value) => y(Math.max(floor, Math.min(top, value)));
+		const points = (estimate, factor = 1) => estimate.x.map((value, i) => ({
+			value,
+			level: this.level(estimate.power[i] * factor)
+		})).filter((point) => point.value > 0);
+		if (confidence && method !== "lomb-scargle") {
+			const band = area().x((point) => x(point.value)).y0((point) => clamp(point.lower)).y1((point) => clamp(point.upper));
+			this.fill(ctx, "band", estimates, (estimate) => estimate.name, (estimate) => {
+				const low = estimate.freedom / chiSquared(estimate.freedom, 1.96), high = estimate.freedom / chiSquared(estimate.freedom, -1.96);
+				return band(estimate.x.map((value, i) => ({
+					value,
+					lower: this.level(estimate.power[i] * low),
+					upper: this.level(estimate.power[i] * high)
+				})).filter((point) => point.value > 0)) ?? "";
+			}, (estimate) => estimate.color, .22);
+		}
+		if (confidence && method === "lomb-scargle") this.rule(ctx, "false-alarm", [this.level(Math.log(2e4))].filter((level) => level >= floor && level <= top), y, true);
+		this.stroke(ctx, "trace", estimates, (estimate) => estimate.name, (estimate) => this.path(points(estimate).map((point) => [point.value, Math.max(floor, Math.min(top, point.level))]), x, y), (estimate) => estimate.color, 1.5);
+		this.probe(ctx, (px) => {
+			const at = x.invert(px), first = estimates[0];
+			if (!first?.x.length) return null;
+			const nearest = first.x.reduce((best, value, i) => Math.abs(value - at) < Math.abs(first.x[best] - at) ? i : best, 0);
+			return {
+				x: x(first.x[nearest]),
+				tip: {
+					title: SignalScales.number(first.x[nearest]),
+					rows: estimates.map((estimate) => [estimate.name, SignalScales.number(this.level(estimate.power[nearest]))])
+				},
+				datum: { x: first.x[nearest] }
+			};
+		});
+	}
+};
+export { PeriodogramAbscissa, PeriodogramChart, PeriodogramMethod };

package/dist/charts/signals/PhaseSpace3DChart.js

@@ -0,0 +1,190 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SignalParser } from "./SignalChart.js";
+import { SignalSamples } from "./SignalSamples.js";
+import { SignalScales } from "./SignalScales.js";
+import { scaleLinear } from "d3";
+import { BufferAttribute, BufferGeometry, CatmullRomCurve3, Color, Float32BufferAttribute, Group, InstancedMesh, Line, LineBasicMaterial, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, SphereGeometry, TubeGeometry, Vector3 } from "three";
+// src/charts/signals/PhaseSpace3DChart.ts
+var Phase3DCoordinates = /* @__PURE__ */ function(Phase3DCoordinates) {
+	Phase3DCoordinates["Channels"] = "channels";
+	Phase3DCoordinates["Delay"] = "delay";
+	Phase3DCoordinates["Derivative"] = "derivative";
+	return Phase3DCoordinates;
+}({});
+var Phase3DStyle = /* @__PURE__ */ function(Phase3DStyle) {
+	Phase3DStyle["Tube"] = "tube";
+	Phase3DStyle["Line"] = "line";
+	Phase3DStyle["Points"] = "points";
+	return Phase3DStyle;
+}({});
+var MAX_STEPS = 900;
+var FLOOR = -.82;
+/** A trajectory through three state variables: the shape of an attractor, seen from any angle. */
+var PhaseSpace3DChart = class extends Chart3D {
+	static meta = {
+		id: "signal-phase-space-3d",
+		name: "3D phase space",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Traces a system through three state dimensions as a tube, line or point cloud, to expose an attractor.",
+		tags: [
+			"attractor",
+			"rossler",
+			"lorenz",
+			"trajectory",
+			"delay embedding"
+		],
+		sample: (seed) => SignalSamples.attractor(seed, 1600, 3),
+		variants: {
+			coordinates: Object.values(Phase3DCoordinates),
+			style: Object.values(Phase3DStyle),
+			shadow: [true, false],
+			delay: [40, 16]
+		},
+		valid: (values) => values.coordinates === "delay" || values.delay === 40
+	};
+	defaults() {
+		return {
+			x: "t",
+			y: "value",
+			series: "series",
+			coordinates: "channels",
+			style: "tube",
+			shadow: true,
+			delay: 40,
+			elevation: 22,
+			distance: 4.9
+		};
+	}
+	/** Trajectory scaled into the cube, keeping the three axes' own proportions out of the picture. */
+	trajectory() {
+		const { data, x, y, series, sampleRate, coordinates, delay } = this.options;
+		const list = SignalParser.channels(data, x, y, series, sampleRate), first = list[0];
+		if (!first || first.v.length < 8) return [];
+		const v = first.v;
+		let triples;
+		if (coordinates === "channels" && list.length >= 3) triples = v.slice(0, Math.min(list[1].v.length, list[2].v.length)).map((value, i) => [
+			value,
+			list[1].v[i],
+			list[2].v[i]
+		]);
+		else if (coordinates === "derivative") triples = v.slice(2, -2).map((value, i) => [
+			value,
+			v[i + 3] - v[i + 1],
+			v[i + 4] - 2 * v[i + 2] + v[i]
+		]);
+		else triples = v.slice(0, Math.max(0, v.length - 2 * delay)).map((value, i) => [
+			value,
+			v[i + delay],
+			v[i + 2 * delay]
+		]);
+		if (!triples.length) return [];
+		const stride = Math.max(1, Math.floor(triples.length / MAX_STEPS));
+		const kept = triples.filter((_, i) => i % stride === 0);
+		const axes = [
+			0,
+			1,
+			2
+		].map((axis) => {
+			const values = kept.map((point) => point[axis]), lo = Math.min(...values), hi = Math.max(...values);
+			return scaleLinear([lo, hi > lo ? hi : lo + 1], [-.9, .9]);
+		});
+		return kept.map(([a, b, c]) => new Vector3(axes[0](a), axes[2](c), axes[1](b)));
+	}
+	tint(ctx, count) {
+		const out = new Float32Array(count * 3), color = new Color();
+		for (let i = 0; i < count; i++) {
+			color.set(ctx.palette.sequential(.25 + .75 * i / count));
+			out.set([
+				color.r,
+				color.g,
+				color.b
+			], i * 3);
+		}
+		return out;
+	}
+	build(ctx) {
+		const points = this.trajectory(), { style, shadow } = this.options;
+		const floor = new Mesh(new PlaneGeometry(2.2, 2.2), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = FLOOR;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		if (!points.length) return;
+		const holder = new Group();
+		ctx.root.add(holder);
+		if (style === "tube") {
+			const geometry = new TubeGeometry(new CatmullRomCurve3(points), Math.min(1400, points.length * 2), .018, 7, false);
+			const count = geometry.getAttribute("position").count, rings = count / 8, ramp = new Float32Array(count * 3), color = new Color();
+			for (let i = 0; i < count; i++) {
+				color.set(ctx.palette.sequential(.25 + .75 * (Math.floor(i / 8) / rings)));
+				ramp.set([
+					color.r,
+					color.g,
+					color.b
+				], i * 3);
+			}
+			geometry.setAttribute("color", new BufferAttribute(ramp, 3));
+			const mesh = new Mesh(geometry, new MeshStandardMaterial({
+				vertexColors: true,
+				roughness: .42
+			}));
+			mesh.castShadow = true;
+			const total = geometry.getIndex().count;
+			ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(total * progress)), 1.8);
+			holder.add(mesh);
+			ctx.pick(mesh, () => ({
+				title: "Trajectory",
+				rows: [["Steps", points.length]]
+			}));
+		}
+		if (style === "line") {
+			const geometry = new BufferGeometry().setFromPoints(points);
+			geometry.setAttribute("color", new BufferAttribute(this.tint(ctx, points.length), 3));
+			ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(points.length * progress)), 1.8);
+			holder.add(new Line(geometry, new LineBasicMaterial({ vertexColors: true })));
+		}
+		if (style === "points") {
+			const kept = points.filter((_, i) => i % 3 === 0), mesh = new InstancedMesh(new SphereGeometry(.02, 8, 6), new MeshStandardMaterial({ roughness: .4 }), kept.length), dummy = new Object3D();
+			mesh.castShadow = true;
+			const place = (progress) => {
+				kept.forEach((point, i) => {
+					dummy.position.copy(point);
+					dummy.scale.setScalar(i / kept.length <= progress ? 1 : .001);
+					dummy.updateMatrix();
+					mesh.setMatrixAt(i, dummy.matrix);
+				});
+				mesh.instanceMatrix.needsUpdate = true;
+			};
+			kept.forEach((_, i) => mesh.setColorAt(i, ctx.color(ctx.palette.sequential(.25 + .75 * i / kept.length))));
+			ctx.reveal(place, 1.8);
+			holder.add(mesh);
+			ctx.pick(mesh, (i) => ({
+				title: `Step ${i * 3}`,
+				rows: [
+					["x", SignalScales.number(kept[i].x)],
+					["y", SignalScales.number(kept[i].y)],
+					["z", SignalScales.number(kept[i].z)]
+				]
+			}));
+		}
+		if (shadow) {
+			const flat = new BufferGeometry().setAttribute("position", new Float32BufferAttribute(points.flatMap((point) => [
+				point.x,
+				-.817,
+				point.z
+			]), 3));
+			ctx.root.add(new Line(flat, new LineBasicMaterial({
+				color: ctx.theme.inkMuted,
+				transparent: true,
+				opacity: .55
+			})));
+		}
+		ctx.onFrame((seconds) => {
+			holder.rotation.y = Math.sin(seconds * .2) * .06;
+		});
+	}
+};
+export { Phase3DCoordinates, Phase3DStyle, PhaseSpace3DChart };