@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scientific/MassSpectrumChart.js

@@ -0,0 +1,180 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { area, max, range, scaleLinear, scalePow, scaleSymlog } from "d3";
+// src/charts/scientific/MassSpectrumChart.ts
+var SpectrumDisplay = /* @__PURE__ */ function(SpectrumDisplay) {
+	SpectrumDisplay["Centroid"] = "centroid";
+	SpectrumDisplay["Profile"] = "profile";
+	SpectrumDisplay["Overlaid"] = "profile-and-sticks";
+	return SpectrumDisplay;
+}({});
+var SpectrumIntensity = /* @__PURE__ */ function(SpectrumIntensity) {
+	SpectrumIntensity["Relative"] = "relative";
+	SpectrumIntensity["Absolute"] = "absolute";
+	return SpectrumIntensity;
+}({});
+/** Ion abundance against mass-to-charge, for identifying compounds from fragmentation patterns. */
+var MassSpectrumChart = class extends CartesianChart {
+	static meta = {
+		id: "mass-spectrum",
+		name: "Mass spectrum",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots ion intensity against mass-to-charge ratio, with base-peak normalisation and head-to-tail library matching.",
+		tags: [
+			"mass spectrometry",
+			"stick spectrum",
+			"proteomics",
+			"mirror plot"
+		],
+		sample: (seed) => ScientificSample.spectra(seed),
+		variants: {
+			display: Object.values(SpectrumDisplay),
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Sqrt,
+				ScaleKind.Symlog
+			],
+			normalization: Object.values(SpectrumIntensity),
+			mirror: [true, false],
+			labels: [5, 0]
+		}
+	};
+	defaults() {
+		return {
+			mz: "mz",
+			intensity: "intensity",
+			spectrum: "spectrum",
+			xLabel: "m/z",
+			grid: true,
+			display: "centroid",
+			scale: ScaleKind.Linear,
+			normalization: "relative",
+			mirror: true,
+			labels: 5,
+			spread: .9
+		};
+	}
+	sticks() {
+		const { data, mz, intensity, spectrum, mirror, normalization } = this.options;
+		const rows = data.flatMap((row) => {
+			const m = Draft.number(row[mz]), i = Draft.number(row[intensity]);
+			return m === null || i === null || i < 0 ? [] : [{
+				mz: m,
+				intensity: i,
+				spectrum: String(row[spectrum] ?? "Spectrum")
+			}];
+		});
+		const names = [...new Set(rows.map((d) => d.spectrum))];
+		return (mirror ? names.slice(0, 2) : names.slice(0, 1)).flatMap((name, s) => {
+			const own = rows.filter((d) => d.spectrum === name), base = max(own, (d) => d.intensity) || 1;
+			return own.map((d) => {
+				const relative = d.intensity / base * 100;
+				return {
+					...d,
+					relative,
+					sign: s ? -1 : 1,
+					value: normalization === "relative" ? relative : d.intensity
+				};
+			});
+		});
+	}
+	scales(ctx) {
+		const { scale, mirror } = this.options;
+		const sticks = this.sticks();
+		const peak = (max(sticks, (d) => d.value) || 1) * 1.14;
+		const lowest = Math.min(...sticks.map((d) => d.mz), 0), highest = max(sticks, (d) => d.mz) ?? 100;
+		const y = scale === ScaleKind.Sqrt ? scalePow().exponent(.5) : scale === ScaleKind.Symlog ? scaleSymlog().constant(peak / 100) : scaleLinear();
+		y.domain(mirror ? [-peak, peak] : [0, peak]).range([ctx.plot.height, 0]);
+		if (scale === ScaleKind.Symlog && peak > 0) {
+			const decades = range(Math.floor(Math.log10(peak / 100)) + 1, Math.floor(Math.log10(peak)) + 1).map((power) => 10 ** power);
+			Object.assign(y, { ticks: () => [
+				0,
+				...decades,
+				...mirror ? decades.map((value) => -value) : []
+			] });
+		}
+		return {
+			x: scaleLinear([lowest > 0 ? 0 : lowest, highest * 1.05], [0, ctx.plot.width]),
+			y
+		};
+	}
+	tickFormat(scale) {
+		const base = super.tickFormat(scale);
+		if (!base) return base;
+		const sparse = "constant" in scale;
+		return (value) => {
+			const v = Math.abs(+value), power = v ? Math.floor(Math.log10(v) + 1e-9) : 0;
+			return sparse && v && Math.round(v / 10 ** power) !== 1 ? "" : base(v);
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	plotMarks(ctx, { x, y }) {
+		const { display, labels, mirror, spread } = this.options;
+		const sticks = this.sticks();
+		const names = [...new Set(sticks.map((d) => d.spectrum))];
+		const position = (d) => y(d.value * d.sign);
+		const zero = y(0);
+		Draft.rules(ctx, "baseline", mirror ? [{
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: zero,
+			y2: zero
+		}] : [], {
+			stroke: ctx.theme.axis,
+			width: 1.5
+		});
+		if (display !== "centroid") {
+			const [low, high] = x.domain();
+			const samples = range(low, high, Math.max((high - low) / 900, spread / 3));
+			const profiles = names.map((name) => {
+				const own = sticks.filter((d) => d.spectrum === name);
+				return {
+					name,
+					curve: samples.map((mz) => [mz, own.reduce((sum, d) => sum + d.value * d.sign * Math.exp(-(((mz - d.mz) / spread) ** 2) / 2), 0)])
+				};
+			});
+			const shape = area().x((d) => x(d[0])).y0(zero).y1((d) => y(d[1]));
+			const fills = ctx.marks("profiles", "path", profiles, (d) => d.name).attr("fill", (d) => ctx.palette.color(d.name)).attr("fill-opacity", display === "profile-and-sticks" ? .3 : .85).attr("stroke", (d) => ctx.palette.color(d.name)).attr("stroke-width", 1);
+			ctx.set(fills, { d: (d) => shape(d.curve) ?? "" }, { d: (d) => shape(d.curve) ?? "" });
+			ctx.hover(fills, (d) => ({
+				title: d.name,
+				color: ctx.palette.color(d.name),
+				rows: [["Peaks", sticks.filter((s) => s.spectrum === d.name).length]]
+			}));
+		}
+		if (display !== "profile") {
+			const lines = ctx.marks("sticks", "line", sticks, (d, i) => `${d.spectrum}/${i}`).attr("stroke", (d) => ctx.palette.color(d.spectrum)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+			const bars = {
+				x1: (d) => x(d.mz),
+				x2: (d) => x(d.mz),
+				y1: zero,
+				y2: position
+			};
+			ctx.set(lines, bars, {
+				...bars,
+				y2: zero
+			}, 5);
+			ctx.hover(lines, (d) => ({
+				title: `m/z ${d.mz.toFixed(2)}`,
+				color: ctx.palette.color(d.spectrum),
+				rows: [[d.spectrum, d.intensity], ["Relative", `${d.relative.toFixed(1)}%`]]
+			}));
+		}
+		const captions = names.flatMap((name) => sticks.filter((d) => d.spectrum === name).sort((a, b) => b.value - a.value).slice(0, labels)).map((d) => ({
+			text: d.mz.toFixed(1),
+			x: x(d.mz),
+			y: position(d) + (d.sign > 0 ? -5 : 13),
+			size: 10,
+			tone: "secondary"
+		}));
+		Draft.captions(ctx, "peak-labels", Draft.declutter(captions, ctx.plot.width, ctx.plot.height));
+	}
+};
+export { MassSpectrumChart, SpectrumDisplay, SpectrumIntensity };

package/dist/charts/scientific/PeakFinder.js

@@ -0,0 +1,31 @@
+// src/charts/scientific/PeakFinder.ts
+/** Peak picking on sampled traces: prominence walk with trapezoid integration above a straight valley line. */
+var PeakFinder = class {
+	static find(x, y, prominence = .05) {
+		if (y.length < 3) return [];
+		const low = Math.min(...y), floor = (Math.max(...y) - low) * prominence;
+		const peaks = [];
+		for (let i = 1; i < y.length - 1; i++) {
+			if (y[i] < y[i - 1] || y[i] <= y[i + 1]) continue;
+			let left = i, right = i;
+			while (left > 0 && y[left - 1] <= y[left]) left--;
+			while (right < y.length - 1 && y[right + 1] <= y[right]) right++;
+			const height = y[i] - Math.max(y[left], y[right]);
+			if (height < floor) continue;
+			let area = 0;
+			for (let k = left; k < right; k++) {
+				const base = (t) => y[left] + (y[right] - y[left]) * (t - left) / (right - left || 1);
+				area += (y[k] - base(k) + (y[k + 1] - base(k + 1))) / 2 * (x[k + 1] - x[k]);
+			}
+			peaks.push({
+				apex: i,
+				start: left,
+				end: right,
+				height,
+				area
+			});
+		}
+		return peaks;
+	}
+};
+export { PeakFinder };

package/dist/charts/scientific/PeriodicElements.js

@@ -0,0 +1,111 @@
+// src/charts/scientific/PeriodicElements.ts
+var SYMBOLS = "H He Li Be B C N O F Ne Na Mg Al Si P S Cl Ar K Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr Rb Sr Y Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I Xe Cs Ba La Ce Pr Nd Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn Fr Ra Ac Th Pa U Np Pu Am Cm Bk Cf Es Fm Md No Lr Rf Db Sg Bh Hs Mt Ds Rg Cn Nh Fl Mc Lv Ts Og".split(" ");
+var NAMES = "Hydrogen Helium Lithium Beryllium Boron Carbon Nitrogen Oxygen Fluorine Neon Sodium Magnesium Aluminium Silicon Phosphorus Sulfur Chlorine Argon Potassium Calcium Scandium Titanium Vanadium Chromium Manganese Iron Cobalt Nickel Copper Zinc Gallium Germanium Arsenic Selenium Bromine Krypton Rubidium Strontium Yttrium Zirconium Niobium Molybdenum Technetium Ruthenium Rhodium Palladium Silver Cadmium Indium Tin Antimony Tellurium Iodine Xenon Caesium Barium Lanthanum Cerium Praseodymium Neodymium Promethium Samarium Europium Gadolinium Terbium Dysprosium Holmium Erbium Thulium Ytterbium Lutetium Hafnium Tantalum Tungsten Rhenium Osmium Iridium Platinum Gold Mercury Thallium Lead Bismuth Polonium Astatine Radon Francium Radium Actinium Thorium Protactinium Uranium Neptunium Plutonium Americium Curium Berkelium Californium Einsteinium Fermium Mendelevium Nobelium Lawrencium Rutherfordium Dubnium Seaborgium Bohrium Hassium Meitnerium Darmstadtium Roentgenium Copernicium Nihonium Flerovium Moscovium Livermorium Tennessine Oganesson".split(" ");
+/** The 118 elements, indexed by the Aufbau subshell each fills, which every table layout derives from. */
+var ELEMENTS = [
+	[
+		1,
+		"s",
+		2
+	],
+	[
+		2,
+		"s",
+		2
+	],
+	[
+		2,
+		"p",
+		6
+	],
+	[
+		3,
+		"s",
+		2
+	],
+	[
+		3,
+		"p",
+		6
+	],
+	[
+		4,
+		"s",
+		2
+	],
+	[
+		3,
+		"d",
+		10
+	],
+	[
+		4,
+		"p",
+		6
+	],
+	[
+		5,
+		"s",
+		2
+	],
+	[
+		4,
+		"d",
+		10
+	],
+	[
+		5,
+		"p",
+		6
+	],
+	[
+		6,
+		"s",
+		2
+	],
+	[
+		4,
+		"f",
+		14
+	],
+	[
+		5,
+		"d",
+		10
+	],
+	[
+		6,
+		"p",
+		6
+	],
+	[
+		7,
+		"s",
+		2
+	],
+	[
+		5,
+		"f",
+		14
+	],
+	[
+		6,
+		"d",
+		10
+	],
+	[
+		7,
+		"p",
+		6
+	]
+].flatMap(([shell, block, size]) => Array.from({ length: size }, (_, slot) => ({
+	shell,
+	block,
+	slot
+}))).map((place, i) => ({
+	...place,
+	number: i + 1,
+	symbol: SYMBOLS[i],
+	name: NAMES[i]
+}));
+export { ELEMENTS };

package/dist/charts/scientific/PeriodicTableChart.js

@@ -0,0 +1,206 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { ELEMENTS } from "./PeriodicElements.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { color, extent, range, scaleLinear, scaleLog, scaleSqrt } from "d3";
+// src/charts/scientific/PeriodicTableChart.ts
+var PeriodicLayout = /* @__PURE__ */ function(PeriodicLayout) {
+	PeriodicLayout["Standard"] = "standard";
+	PeriodicLayout["Wide"] = "long-form";
+	PeriodicLayout["LeftStep"] = "left-step";
+	return PeriodicLayout;
+}({});
+var PeriodicEncoding = /* @__PURE__ */ function(PeriodicEncoding) {
+	PeriodicEncoding["Tile"] = "tile-heat";
+	PeriodicEncoding["Bar"] = "tile-bar";
+	PeriodicEncoding["Bubble"] = "bubble";
+	return PeriodicEncoding;
+}({});
+/** Maps a value onto the periodic table to show trends across periods, groups and blocks. */
+var PeriodicTableChart = class extends Chart2D {
+	static meta = {
+		id: "periodic-table",
+		name: "Periodic table",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots a value for each chemical element on the periodic table, in standard, long-form or left-step layouts.",
+		tags: [
+			"chemistry",
+			"elements",
+			"heatmap"
+		],
+		sample: (seed) => {
+			const noise = ScientificSample.normal(seed, ELEMENTS.length);
+			return ELEMENTS.map((element, i) => ({
+				symbol: element.symbol,
+				value: +(10 ** (.7 + (element.block === "p" ? .09 * element.slot : element.block === "d" ? .04 * element.slot : 0) - element.shell * .09 + noise[i] * .06)).toFixed(3)
+			}));
+		},
+		variants: {
+			layout: Object.values(PeriodicLayout),
+			encoding: Object.values(PeriodicEncoding),
+			numbers: [true, false]
+		},
+		valid: (values) => values.layout === "standard" || values.numbers === true
+	};
+	defaults() {
+		return {
+			symbol: "symbol",
+			value: "value",
+			layout: "standard",
+			encoding: "tile-heat",
+			scale: ScaleKind.Linear,
+			numbers: true
+		};
+	}
+	cells() {
+		const { data, symbol, value, layout } = this.options;
+		const values = new Map(data.flatMap((row) => {
+			const v = Draft.number(row[value]);
+			return v === null ? [] : [[String(row[symbol]), v]];
+		}));
+		const place = (e) => {
+			const period = e.block === "s" || e.block === "p" ? e.shell : e.block === "d" ? e.shell + 1 : e.shell + 2;
+			if (layout === "left-step") {
+				const base = {
+					f: 0,
+					d: 14,
+					p: 24,
+					s: 30
+				}[e.block], l = {
+					s: 0,
+					p: 1,
+					d: 2,
+					f: 3
+				}[e.block];
+				return [base + e.slot, e.shell + l - 1];
+			}
+			if (layout === "long-form") return [e.number === 2 ? 31 : {
+				s: e.slot,
+				f: 2 + e.slot,
+				d: 16 + e.slot,
+				p: 26 + e.slot
+			}[e.block], period - 1];
+			if (e.block === "f") return [2 + e.slot, e.shell + 3.3];
+			return [e.number === 2 ? 17 : {
+				s: e.slot,
+				d: 2 + e.slot,
+				p: 12 + e.slot
+			}[e.block], period - 1];
+		};
+		const cells = ELEMENTS.map((element) => {
+			const [column, row] = place(element);
+			return {
+				element,
+				column,
+				row,
+				value: values.get(element.symbol) ?? null
+			};
+		});
+		return {
+			cells,
+			columns: Math.max(...cells.map((d) => d.column)) + 1,
+			rows: Math.max(...cells.map((d) => d.row)) + 1
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		const { encoding, scale, numbers } = this.options;
+		const { width, height } = ctx.plot;
+		const { cells, columns, rows } = this.cells();
+		const size = Math.min(width / columns, height / rows);
+		const side = size - (size > 14 ? 2 : 1);
+		const x0 = (width - columns * size) / 2, y0 = (height - rows * size) / 2;
+		const left = (d) => x0 + d.column * size, top = (d) => y0 + d.row * size;
+		const values = cells.flatMap((d) => d.value === null ? [] : [d.value]);
+		const [low = 0, high = 1] = extent(values);
+		const unit = (scale === ScaleKind.Log && encoding === "tile-heat" && low > 0 ? scaleLog([low, Math.max(high, low * 1.01)], [0, 1]) : scaleLinear([Math.min(0, low), high || 1], [0, 1])).clamp(true);
+		const tile = (d) => encoding === "tile-heat" && d.value !== null ? ctx.palette.sequential(.08 + .88 * unit(d.value)) : ctx.theme.grid;
+		const tooltip = (d) => ({
+			title: d.element.name,
+			rows: [
+				["Number", d.element.number],
+				["Block", d.element.block],
+				["Value", d.value ?? "No data"]
+			]
+		});
+		const tiles = ctx.marks("tiles", "rect", cells, (d) => d.element.number).attr("fill", tile).attr("rx", Math.min(3, side / 5));
+		ctx.set(tiles, {
+			x: left,
+			y: top,
+			width: side,
+			height: side
+		}, {
+			x: left,
+			y: top,
+			width: side,
+			height: side
+		}, 1);
+		ctx.hover(tiles, tooltip);
+		const valued = cells.filter((d) => d.value !== null);
+		const bars = ctx.marks("bars", "rect", encoding === "tile-bar" ? valued : [], (d) => d.element.number).attr("fill", ctx.palette.sequential(.6)).attr("rx", Math.min(2, side / 6)).style("pointer-events", "none");
+		const barHeight = (d) => Math.max(1, unit(d.value) * side);
+		ctx.set(bars, {
+			x: left,
+			width: side,
+			y: (d) => top(d) + side - barHeight(d),
+			height: barHeight
+		}, {
+			x: left,
+			width: side,
+			y: (d) => top(d) + side,
+			height: 0
+		}, 1);
+		const radius = scaleSqrt([0, 1], [0, side / 2]);
+		const dots = ctx.marks("bubbles", "circle", encoding === "bubble" ? valued : [], (d) => d.element.number).attr("fill", ctx.palette.sequential(.6)).attr("fill-opacity", .55).style("pointer-events", "none");
+		ctx.set(dots, {
+			cx: (d) => left(d) + side / 2,
+			cy: (d) => top(d) + side / 2,
+			r: (d) => Math.max(1, radius(unit(d.value)))
+		}, {
+			cx: (d) => left(d) + side / 2,
+			cy: (d) => top(d) + side / 2,
+			r: 0
+		}, 1);
+		const ramp = encoding === "tile-heat" && this.options.layout === "standard" && values.length ? range(9) : [];
+		const swatch = Math.min(size, 16);
+		const rampLeft = left({ column: 3.5 }), rampTop = top({ row: .6 });
+		const steps = ctx.marks("ramp", "rect", ramp, (d) => d).attr("fill", (d) => ctx.palette.sequential(.08 + .88 * d / 8)).attr("rx", 1.5);
+		ctx.set(steps, {
+			x: (d) => rampLeft + d * swatch,
+			y: rampTop,
+			width: swatch - 1,
+			height: 8
+		}, {
+			x: (d) => rampLeft + d * swatch,
+			y: rampTop,
+			width: swatch - 1,
+			height: 8
+		});
+		Draft.captions(ctx, "ramp-ends", ramp.length ? [{
+			text: `${+low.toPrecision(3)}`,
+			x: rampLeft,
+			y: rampTop - 3,
+			anchor: "start",
+			size: 10,
+			tone: "muted"
+		}, {
+			text: `${+high.toPrecision(3)}`,
+			x: rampLeft + 9 * swatch,
+			y: rampTop - 3,
+			anchor: "end",
+			size: 10,
+			tone: "muted"
+		}] : []);
+		const ink = (fill) => ctx.palette.inkOn(color(fill).formatHex());
+		const fits = side >= 14;
+		const font = Math.min(13, side * .46);
+		const room = fits && numbers && side >= 26;
+		const labels = fits ? cells : [];
+		ctx.marks("symbols", "text", labels, (d) => d.element.number).attr("text-anchor", "middle").attr("font-size", font).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => ink(tile(d))).style("pointer-events", "none").attr("x", (d) => left(d) + side / 2).attr("y", (d) => top(d) + (room ? side * .72 : side / 2 + font * .36)).text((d) => d.element.symbol);
+		ctx.marks("numbers", "text", room ? cells : [], (d) => d.element.number).attr("text-anchor", "middle").attr("font-size", Math.min(9, side * .26)).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => ink(tile(d))).style("pointer-events", "none").attr("x", (d) => left(d) + side / 2).attr("y", (d) => top(d) + side * .3).text((d) => d.element.number);
+	}
+};
+export { PeriodicEncoding, PeriodicLayout, PeriodicTableChart };