@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/scientific/SpectrogramChart.js

@@ -0,0 +1,236 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { SpectralAnalysis, SpectralWindow } from "./SpectralAnalysis.js";
+import { contours, geoPath, geoTransform, line, scaleLinear, scaleLog } from "d3";
+// src/charts/scientific/SpectrogramChart.ts
+var SpectrogramFrequency = /* @__PURE__ */ function(SpectrogramFrequency) {
+	SpectrogramFrequency["Linear"] = "linear-hz";
+	SpectrogramFrequency["Log"] = "log-hz";
+	SpectrogramFrequency["Mel"] = "mel";
+	return SpectrogramFrequency;
+}({});
+var SpectrogramAmplitude = /* @__PURE__ */ function(SpectrogramAmplitude) {
+	SpectrogramAmplitude["Decibel"] = "decibel";
+	SpectrogramAmplitude["Linear"] = "linear";
+	return SpectrogramAmplitude;
+}({});
+var SpectrogramRender = /* @__PURE__ */ function(SpectrogramRender) {
+	SpectrogramRender["Cells"] = "cells";
+	SpectrogramRender["Contours"] = "contours";
+	SpectrogramRender["Ridges"] = "ridges";
+	return SpectrogramRender;
+}({});
+var LEVELS = 14;
+var mel = (hz) => 2595 * Math.log10(1 + hz / 700);
+/** Frequency content of a signal over time, computed by short-time Fourier transform. */
+var SpectrogramChart = class extends CartesianChart {
+	static meta = {
+		id: "spectrogram",
+		name: "Spectrogram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows how the frequency content of a signal changes over time from a short-time Fourier transform.",
+		tags: [
+			"stft",
+			"sonogram",
+			"audio",
+			"time-frequency"
+		],
+		sample: (seed) => ScientificSample.signal(seed),
+		variants: {
+			frequency: Object.values(SpectrogramFrequency),
+			render: Object.values(SpectrogramRender),
+			fftSize: [
+				256,
+				128,
+				512
+			],
+			overlap: [.5, .75],
+			track: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			time: "time",
+			value: "value",
+			xLabel: "Seconds",
+			fftSize: 256,
+			overlap: .5,
+			window: SpectralWindow.Hann,
+			floor: -48,
+			frequency: "linear-hz",
+			render: "cells",
+			track: false,
+			amplitude: "decibel",
+			grid: false
+		};
+	}
+	frames() {
+		const { data, time, value, rate, fftSize, overlap, window, floor } = this.options;
+		const samples = data.flatMap((row) => {
+			const t = Draft.number(row[time]), v = Draft.number(row[value]);
+			return t === null || v === null ? [] : [{
+				t,
+				v
+			}];
+		});
+		const span = samples.length > 1 ? (samples[samples.length - 1].t - samples[0].t) / (samples.length - 1) : 0;
+		return SpectralAnalysis.stft(samples.map((d) => d.v), rate ?? (span > 0 ? 1 / span : 1), fftSize, overlap, window, floor);
+	}
+	scales(ctx) {
+		const { frequencies, times } = this.frames();
+		const low = frequencies[0] ?? 1, high = frequencies[frequencies.length - 1] ?? 2;
+		const y = this.options.frequency === "log-hz" ? scaleLog([low, high], [ctx.plot.height, 0]) : this.options.frequency === "mel" ? this.melScale(low, high, ctx.plot.height) : scaleLinear([0, high], [ctx.plot.height, 0]);
+		return {
+			x: scaleLinear([0, Math.max(1e-6, (times[times.length - 1] ?? 1) + (times[0] ?? 0))], [0, ctx.plot.width]),
+			y
+		};
+	}
+	/** A linear scale over mel; its ticks are shown in Hz. */
+	melScale(low, high, height) {
+		const scale = scaleLinear([mel(low), mel(high)], [height, 0]);
+		const warped = ((hz) => scale(mel(hz)));
+		return Object.assign(warped, scale, {
+			domain: () => [low, high],
+			range: () => scale.range(),
+			copy: () => warped,
+			ticks: () => {
+				let last = Infinity;
+				return [
+					100,
+					200,
+					500,
+					1e3,
+					2e3,
+					4e3
+				].filter((hz) => {
+					if (hz < low || hz > high || last - scale(mel(hz)) < 14) return false;
+					last = scale(mel(hz));
+					return true;
+				});
+			},
+			tickFormat: () => (value) => `${value}`
+		});
+	}
+	tickFormat(scale) {
+		return (value) => {
+			const v = +value, lead = v ? Math.round(v / 10 ** Math.floor(Math.log10(v) + 1e-9)) : 1;
+			if (scale.base && ![
+				1,
+				2,
+				5
+			].includes(lead)) return "";
+			return v >= 1e3 ? `${v / 1e3}k` : `${v}`;
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	plotMarks(ctx, { x, y }) {
+		const { render, track, floor, amplitude } = this.options;
+		const { width, height } = ctx.plot;
+		const { times, frequencies, power } = this.frames();
+		if (!times.length) return;
+		const stride = Math.max(1, Math.ceil(frequencies.length / 96));
+		const rows = frequencies.map((_, i) => i).filter((i) => i % stride === 0);
+		const level = (db) => amplitude === "linear" ? 10 ** (db / 20) : (db - floor) / -floor;
+		const halfFrame = times.length > 1 ? (times[1] - times[0]) / 2 : times[0];
+		const left = (f) => x(times[f] - halfFrame), right = (f) => x(times[f] + halfFrame);
+		const edge = (i) => {
+			const step = frequencies[1] - frequencies[0];
+			const hz = frequencies[i] + step * stride;
+			return Math.max(0, Math.min(height, y(hz)));
+		};
+		if (render === "cells") {
+			const buckets = Array.from({ length: LEVELS }, () => []);
+			times.forEach((_, f) => rows.forEach((row, r) => {
+				const value = level(power[f][row]), bucket = Math.min(13, Math.floor(value * LEVELS));
+				const top = edge(row), bottom = r ? edge(rows[r - 1]) : Math.min(height, y(frequencies[0]) + 1);
+				if (bucket > 1 && bottom > top) buckets[bucket].push(`M${left(f).toFixed(1)},${top.toFixed(1)}H${right(f).toFixed(1)}V${bottom.toFixed(1)}H${left(f).toFixed(1)}Z`);
+			}));
+			const layers = buckets.map((cells, i) => ({
+				i,
+				d: cells.join("")
+			})).filter((layer) => layer.d);
+			const fills = ctx.marks("cells", "path", layers, (d) => d.i).attr("fill", (d) => ctx.palette.sequential((d.i + .5) / LEVELS)).attr("shape-rendering", "crispEdges").style("pointer-events", "none");
+			ctx.set(fills, { d: (d) => d.d }, { d: (d) => d.d });
+		} else if (render === "contours") {
+			const nx = times.length, ny = rows.length;
+			const field = rows.flatMap((row) => times.map((_, f) => level(power[f][row])));
+			const project = geoPath(geoTransform({ point(px, py) {
+				const f = Math.max(0, Math.min(nx - 1, px - .5)), r = Math.max(0, Math.min(ny - 1, py - .5)), base = Math.floor(r);
+				const hz = frequencies[rows[base]] + (frequencies[rows[Math.min(ny - 1, base + 1)]] - frequencies[rows[base]]) * (r - base);
+				this.stream.point(x(times[0] + f / Math.max(1, nx - 1) * (times[nx - 1] - times[0])), y(hz));
+			} }));
+			const bands = contours().size([nx, ny]).thresholds([
+				.25,
+				.4,
+				.55,
+				.7,
+				.85
+			])(field).map((band) => ({
+				value: band.value,
+				d: project(band) ?? ""
+			})).filter((band) => band.d);
+			const fills = ctx.marks("contours", "path", bands, (d) => d.value).attr("fill", (d) => ctx.palette.sequential(d.value)).attr("stroke", ctx.theme.surface).attr("stroke-width", .5).style("pointer-events", "none");
+			ctx.set(fills, { d: (d) => d.d }, { d: (d) => d.d });
+		} else {
+			const count = Math.min(rows.length, Math.max(8, Math.floor(height / 11)));
+			const nearest = (target) => rows.reduce((best, row) => Math.abs(y(frequencies[row]) - target) < Math.abs(y(frequencies[best]) - target) ? row : best, rows[0]);
+			const picks = [...new Set(Array.from({ length: count }, (_, i) => nearest((i + 1) * height / count)))];
+			const seat = (row) => Math.min(height, y(frequencies[row]));
+			const crest = (row) => Math.max(.01, ...times.map((_, f) => level(power[f][row])));
+			const lift = Math.max(height / count, Math.min(height / count * 3.2, ...picks.map((row) => seat(row) / crest(row))));
+			const ridges = picks.map((row) => {
+				const base = seat(row);
+				return {
+					row,
+					d: `M0,${base}L${times.map((time, f) => [x(time), Math.max(0, base - level(power[f][row]) * lift)]).map((p) => p.join(",")).join("L")}L${width},${base}Z`
+				};
+			});
+			const shapes = ctx.marks("ridges", "path", ridges, (d) => d.row).attr("fill", ctx.theme.surface).attr("stroke", ctx.palette.sequential(.75)).attr("stroke-width", 1.25).attr("stroke-linejoin", "round").style("pointer-events", "none");
+			ctx.set(shapes, { d: (d) => d.d }, { d: (d) => d.d });
+		}
+		const ridge = times.map((time, f) => {
+			const frame = power[f], best = frame.indexOf(Math.max(...frame));
+			return {
+				time,
+				hz: frequencies[best],
+				db: frame[best]
+			};
+		});
+		if (track) {
+			const trace = line().x((d) => x(d.time)).y((d) => Math.max(0, Math.min(height, y(d.hz))))(ridge) ?? "";
+			Draft.paths(ctx, "track-halo", [trace], {
+				stroke: ctx.theme.surface,
+				width: 4
+			});
+			Draft.paths(ctx, "track", [trace], {
+				stroke: ctx.theme.ink,
+				width: 2
+			});
+		}
+		const columns = ctx.marks("frames", "rect", ridge, (d) => d.time).attr("fill", "transparent");
+		const slot = (_, f) => left(f);
+		ctx.set(columns, {
+			x: slot,
+			y: 0,
+			width: (_, f) => Math.max(1, right(f) - left(f)),
+			height
+		}, {
+			x: slot,
+			y: 0,
+			width: (_, f) => Math.max(1, right(f) - left(f)),
+			height
+		});
+		ctx.hover(columns, (d) => ({
+			title: `${d.time.toFixed(3)} s`,
+			rows: [["Peak frequency", `${Math.round(d.hz)} Hz`]]
+		}));
+	}
+};
+export { SpectrogramAmplitude, SpectrogramChart, SpectrogramFrequency, SpectrogramRender };

package/dist/charts/scientific/StereonetChart.js

@@ -0,0 +1,268 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { Draft } from "./Draft.js";
+import { GridContours } from "./GridContours.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { mean, range } from "d3";
+// src/charts/scientific/StereonetChart.ts
+var StereonetProjection = /* @__PURE__ */ function(StereonetProjection) {
+	StereonetProjection["EqualArea"] = "equal-area";
+	StereonetProjection["EqualAngle"] = "equal-angle";
+	return StereonetProjection;
+}({});
+var StereonetHemisphere = /* @__PURE__ */ function(StereonetHemisphere) {
+	StereonetHemisphere["Lower"] = "lower-hemisphere";
+	StereonetHemisphere["Upper"] = "upper-hemisphere";
+	return StereonetHemisphere;
+}({});
+var StereonetFeature = /* @__PURE__ */ function(StereonetFeature) {
+	StereonetFeature["Poles"] = "poles";
+	StereonetFeature["Planes"] = "great-circles";
+	StereonetFeature["Both"] = "poles-and-planes";
+	StereonetFeature["Density"] = "kamb-density";
+	return StereonetFeature;
+}({});
+var StereonetNet = /* @__PURE__ */ function(StereonetNet) {
+	StereonetNet["Graticule"] = "graticule";
+	StereonetNet["Polar"] = "polar-net";
+	StereonetNet["Bare"] = "primitive";
+	return StereonetNet;
+}({});
+var rad = Math.PI / 180;
+/** Structural geology on a sphere: orientations of planes and lines in a Schmidt or Wulff net. */
+var StereonetChart = class extends RadialChart {
+	static meta = {
+		id: "stereonet",
+		name: "Stereonet",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Projects planes and lines onto a hemisphere so that geologists can read orientation clusters and intersections.",
+		tags: [
+			"schmidt net",
+			"wulff net",
+			"structural geology",
+			"poles"
+		],
+		sample: (seed) => ScientificSample.planes(seed),
+		variants: {
+			projection: Object.values(StereonetProjection),
+			hemisphere: Object.values(StereonetHemisphere),
+			feature: Object.values(StereonetFeature),
+			net: Object.values(StereonetNet),
+			meanPoles: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			strike: "strike",
+			dip: "dip",
+			set: "set",
+			projection: "equal-area",
+			hemisphere: "lower-hemisphere",
+			feature: "poles",
+			net: "graticule",
+			meanPoles: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 20,
+			right: 20,
+			bottom: 20,
+			left: 20
+		};
+	}
+	/** Vector of a line given trend and plunge, down positive. */
+	line(trend, plunge) {
+		return [
+			Math.cos(plunge * rad) * Math.cos(trend * rad),
+			Math.cos(plunge * rad) * Math.sin(trend * rad),
+			Math.sin(plunge * rad)
+		];
+	}
+	planes() {
+		const { data, strike, dip, set } = this.options;
+		return data.flatMap((row) => {
+			const s = Draft.number(row[strike]), d = Draft.number(row[dip]);
+			return s === null || d === null ? [] : [{
+				strike: s,
+				dip: Math.max(0, Math.min(90, d)),
+				set: String(row[set] ?? "Planes"),
+				pole: this.line(s + 270, 90 - d)
+			}];
+		});
+	}
+	/** Projects a unit vector to the unit disc in the chosen hemisphere. */
+	project(radius, [n, e, d]) {
+		const [north, east, down] = d < 0 ? [
+			-n,
+			-e,
+			-d
+		] : [
+			n,
+			e,
+			d
+		];
+		const off = Math.acos(Math.min(1, down));
+		const r = (this.options.projection === "equal-area" ? Math.SQRT2 * Math.sin(off / 2) : Math.tan(off / 2)) * radius;
+		const length = Math.hypot(north, east) || 1;
+		const sign = this.options.hemisphere === "upper-hemisphere" ? -1 : 1;
+		return [sign * r * east / length, -sign * r * north / length];
+	}
+	greatCircle(radius, strike, dip) {
+		const a = this.line(strike, 0), b = this.line(strike + 90, dip);
+		return range(0, 181, 5).map((rake) => {
+			const c = Math.cos(rake * rad), s = Math.sin(rake * rad);
+			return this.project(radius, [
+				a[0] * c + b[0] * s,
+				a[1] * c + b[1] * s,
+				Math.abs(a[2] * c + b[2] * s)
+			]);
+		});
+	}
+	smallCircle(radius, angle) {
+		return range(0, 181, 6).map((phi) => {
+			const s = Math.sin(angle * rad);
+			return this.project(radius, [
+				Math.cos(angle * rad),
+				s * Math.cos(phi * rad),
+				s * Math.sin(phi * rad)
+			]);
+		});
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	drawRadial(ctx, { radius: outer }) {
+		const { feature, net, meanPoles } = this.options;
+		const radius = outer - 2;
+		const planes = this.planes();
+		const graticule = net === "graticule" ? [...range(10, 90, 10).flatMap((dip) => [this.greatCircle(radius, 0, dip), this.greatCircle(radius, 180, dip)]), ...range(10, 180, 10).filter((angle) => angle !== 90).map((angle) => this.smallCircle(radius, angle))].map(Draft.polyline) : [];
+		Draft.paths(ctx, "graticule", graticule);
+		const rings = net === "polar-net" ? range(15, 90, 15).map((off) => {
+			const r = Math.hypot(...this.project(radius, this.line(0, 90 - off)));
+			return `M${-r},0A${r},${r} 0 1 1 ${r},0A${r},${r} 0 1 1 ${-r},0`;
+		}) : [];
+		Draft.paths(ctx, "rings", rings);
+		const spokes = net === "polar-net" ? range(0, 180, 30).map((angle) => ({
+			x1: Math.sin(angle * rad) * radius,
+			y1: -Math.cos(angle * rad) * radius,
+			x2: -Math.sin(angle * rad) * radius,
+			y2: Math.cos(angle * rad) * radius
+		})) : [];
+		Draft.rules(ctx, "spokes", spokes);
+		const ticks = range(0, 360, net === "primitive" ? 10 : 30).map((angle) => {
+			const s = Math.sin(angle * rad), c = -Math.cos(angle * rad);
+			return {
+				x1: s * radius,
+				y1: c * radius,
+				x2: s * (radius + 5),
+				y2: c * (radius + 5)
+			};
+		});
+		Draft.rules(ctx, "ticks", ticks, { stroke: ctx.theme.axis });
+		Draft.paths(ctx, "primitive", [`M${-radius},0A${radius},${radius} 0 1 1 ${radius},0A${radius},${radius} 0 1 1 ${-radius},0`], {
+			stroke: ctx.theme.axis,
+			width: 1.5
+		});
+		const compass = [
+			{
+				text: "N",
+				x: 0,
+				y: -radius - 8,
+				tone: "ink",
+				weight: 600
+			},
+			{
+				text: "E",
+				x: radius + 12,
+				y: 4,
+				tone: "muted"
+			},
+			{
+				text: "S",
+				x: 0,
+				y: radius + 17,
+				tone: "muted"
+			},
+			{
+				text: "W",
+				x: -radius - 12,
+				y: 4,
+				tone: "muted"
+			}
+		];
+		Draft.captions(ctx, "compass", compass);
+		const sets = [...new Set(planes.map((plane) => plane.set))];
+		const showPlanes = feature === "great-circles" || feature === "poles-and-planes";
+		const arcs = ctx.marks("planes", "path", showPlanes ? planes : [], (_, i) => i).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.set)).attr("stroke-width", 1.5).attr("stroke-opacity", feature === "poles-and-planes" ? .35 : .6).attr("stroke-linecap", "round");
+		ctx.set(arcs, { d: (d) => Draft.polyline(this.greatCircle(radius, d.strike, d.dip)) }, { d: (d) => Draft.polyline(this.greatCircle(radius, d.strike, d.dip)) });
+		ctx.drawOn(arcs);
+		ctx.hover(arcs, (d) => ({
+			title: d.set,
+			color: ctx.palette.color(d.set),
+			rows: [["Strike", `${d.strike}°`], ["Dip", `${d.dip}°`]]
+		}));
+		if (feature === "kamb-density") {
+			const shifted = planes.map((plane) => {
+				const [x, y] = this.project(radius, plane.pole);
+				return [x + radius, y + radius];
+			});
+			const bands = GridContours.bands(shifted, radius * 2, radius * 2, radius / 8, (x, y) => (x - radius) ** 2 + (y - radius) ** 2 < (radius - 1) ** 2, 6);
+			const shapes = ctx.marks("density", "path", bands, (_, i) => i).attr("fill", (d) => ctx.palette.sequential(.1 + d.level * .8)).attr("fill-opacity", .85).attr("stroke", ctx.theme.surface).attr("transform", `translate(${-radius},${-radius})`);
+			ctx.set(shapes, { d: (d) => d.d }, { d: (d) => d.d });
+			ctx.hover(shapes, (d) => ({
+				title: "Pole concentration",
+				rows: [["Level", `${Math.round(d.level * 100)}%`]]
+			}));
+		} else if (feature !== "great-circles") {
+			const dots = ctx.marks("poles", "circle", planes, (_, i) => i).attr("fill", (d) => ctx.palette.color(d.set)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+			const cx = (d) => this.project(radius, d.pole)[0], cy = (d) => this.project(radius, d.pole)[1];
+			ctx.set(dots, {
+				cx,
+				cy,
+				r: 4
+			}, {
+				cx,
+				cy,
+				r: 0
+			}, 4);
+			ctx.hover(dots, (d) => ({
+				title: d.set,
+				color: ctx.palette.color(d.set),
+				rows: [["Strike", `${d.strike}°`], ["Dip", `${d.dip}°`]]
+			}));
+		}
+		const means = !meanPoles ? [] : sets.map((set) => {
+			const members = planes.filter((plane) => plane.set === set).map((plane) => plane.pole);
+			const reference = members[0];
+			const flip = (v) => v[0] * reference[0] + v[1] * reference[1] + v[2] * reference[2] < 0 ? -1 : 1;
+			const axis = [
+				0,
+				1,
+				2
+			].map((k) => mean(members, (v) => v[k] * flip(v)) ?? 0);
+			const length = Math.hypot(axis[0], axis[1], axis[2]) || 1;
+			return {
+				set,
+				at: this.project(radius, [
+					axis[0] / length,
+					axis[1] / length,
+					axis[2] / length
+				]),
+				count: members.length,
+				r: length
+			};
+		});
+		const crosses = ctx.marks("means", "path", means, (d) => d.set).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5).attr("d", "M-2,-7H2V-2H7V2H2V7H-2V2H-7V-2H-2Z");
+		ctx.set(crosses, { transform: (d) => `translate(${d.at[0]},${d.at[1]})` }, { transform: (d) => `translate(${d.at[0]},${d.at[1]})` });
+		ctx.hover(crosses, (d) => ({
+			title: `${d.set} mean pole`,
+			color: ctx.palette.color(d.set),
+			rows: [["Planes", d.count], ["Resultant", d.r.toFixed(2)]]
+		}));
+	}
+};
+export { StereonetChart, StereonetFeature, StereonetHemisphere, StereonetNet, StereonetProjection };