@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/scientific/ElectrophoresisGel.js

@@ -0,0 +1,240 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { axisLeft, axisTop, max, min, range, scaleBand, scaleLinear, scaleLog } from "d3";
+// src/charts/scientific/ElectrophoresisGel.ts
+var GelMigration = /* @__PURE__ */ function(GelMigration) {
+	GelMigration["Log"] = "log-size";
+	GelMigration["Linear"] = "linear-size";
+	GelMigration["Reciprocal"] = "reciprocal-size";
+	return GelMigration;
+}({});
+var GelBand = /* @__PURE__ */ function(GelBand) {
+	GelBand["Sharp"] = "sharp";
+	GelBand["Smile"] = "smiling";
+	GelBand["Smear"] = "smeared";
+	return GelBand;
+}({});
+/** Separated DNA or protein fragments drawn as bands in lanes of a gel. */
+var ElectrophoresisGel = class extends Chart2D {
+	static meta = {
+		id: "electrophoresis-gel",
+		name: "Electrophoresis gel",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Renders DNA or protein fragments as bands in lanes, positioned by size, with a ladder and densitometry.",
+		tags: [
+			"agarose",
+			"sds-page",
+			"western blot",
+			"molecular biology"
+		],
+		sample: (seed) => ScientificSample.gel(seed),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			migration: Object.values(GelMigration),
+			band: Object.values(GelBand),
+			ladder: [true, false],
+			wells: [true, false],
+			densitometry: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			lane: "lane",
+			size: "size",
+			intensity: "intensity",
+			orientation: Orientation.Vertical,
+			migration: "log-size",
+			band: "sharp",
+			ladder: true,
+			wells: true,
+			densitometry: false
+		};
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	plotMargin() {
+		if (this.vertical) return {
+			top: 22,
+			right: 10,
+			bottom: 10,
+			left: 48
+		};
+		const longest = Math.max(this.options.ladder ? 6 : 0, ...this.bands().map((band) => band.lane.length));
+		return {
+			top: 26,
+			right: 12,
+			bottom: 10,
+			left: Math.min(120, Math.max(34, longest * 6.2 + 10))
+		};
+	}
+	bands() {
+		const { data, lane, size, intensity } = this.options;
+		return data.flatMap((row) => {
+			const s = Draft.number(row[size]);
+			return s === null || s <= 0 ? [] : [{
+				lane: String(row[lane] ?? ""),
+				size: s,
+				intensity: Math.max(0, Math.min(1, Draft.number(row[intensity]) ?? .6))
+			}];
+		});
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		const { migration, ladder, band: style, wells, densitometry } = this.options;
+		const { width, height } = ctx.plot;
+		const vertical = this.vertical;
+		const samples = this.bands();
+		const sizes = [...new Set(samples.map((d) => d.size))].sort((a, b) => b - a);
+		const bands = [...ladder ? sizes.map((size) => ({
+			lane: "Ladder",
+			size,
+			intensity: .8
+		})) : [], ...samples];
+		const lanes = [...new Set(bands.map((d) => d.lane))];
+		const along = vertical ? height : width, across = vertical ? width : height;
+		const start = wells ? 20 : 8;
+		const low = Math.max(1, min(sizes) ?? 1), high = max(sizes) ?? 10;
+		const distance = migration === "log-size" ? scaleLog([high * 1.25, low * .8], [start, along - 8]) : migration === "reciprocal-size" ? scaleLinear([1 / (high * 1.25), 1 / (low * .8)], [start, along - 8]) : scaleLinear([high * 1.1, low * .5], [start, along - 8]);
+		const run = (size) => distance(migration === "reciprocal-size" ? 1 / size : size);
+		const lane = scaleBand(lanes, [6, across - 6]).paddingInner(.22).paddingOuter(.1);
+		const box = (u, v, du, dv) => vertical ? {
+			x: u,
+			y: v,
+			width: du,
+			height: dv
+		} : {
+			x: v,
+			y: u,
+			width: dv,
+			height: du
+		};
+		const trace = densitometry ? lane.bandwidth() * .3 : 0;
+		const thick = lane.bandwidth() - trace;
+		const plate = ctx.marks("plate", "rect", [0]).attr("fill", ctx.theme.ink).attr("rx", 6);
+		ctx.set(plate, {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}, {
+			x: 0,
+			y: 0,
+			width,
+			height
+		});
+		const wellMarks = ctx.marks("wells", "rect", wells ? lanes : [], (d) => d).attr("fill", ctx.theme.surface).attr("fill-opacity", .28).attr("rx", 2);
+		const well = (d) => box(lane(d), 5, thick, 8);
+		ctx.set(wellMarks, {
+			x: (d) => well(d).x,
+			y: (d) => well(d).y,
+			width: (d) => well(d).width,
+			height: (d) => well(d).height
+		}, {
+			x: (d) => well(d).x,
+			y: (d) => well(d).y,
+			width: (d) => well(d).width,
+			height: (d) => well(d).height
+		});
+		const heavy = Math.max(3, Math.min(8, along / 36));
+		const rect = (d) => box(lane(d.lane), run(d.size) - heavy / 2, thick, heavy);
+		const tooltip = (d) => ({
+			title: d.lane,
+			rows: [["Size", d.size], ["Intensity", d.intensity.toFixed(2)]]
+		});
+		const glow = (d) => .28 + d.intensity * .72;
+		if (style === "sharp") {
+			const marks = ctx.marks("bands", "rect", bands, (d, i) => `${d.lane}/${d.size}/${i}`).attr("fill", ctx.theme.surface).attr("fill-opacity", glow).attr("rx", 2);
+			ctx.set(marks, {
+				x: (d) => rect(d).x,
+				y: (d) => rect(d).y,
+				width: (d) => rect(d).width,
+				height: (d) => rect(d).height
+			}, {
+				x: (d) => rect(d).x,
+				y: (d) => rect(d).y,
+				width: (d) => rect(d).width,
+				height: 0
+			}, 6);
+			ctx.hover(marks, tooltip);
+		} else if (style === "smiling") {
+			const shape = (d) => {
+				const u = lane(d.lane), v = run(d.size), bow = thick * .16, half = heavy / 2;
+				const point = (a, b) => vertical ? [a, b] : [b, a];
+				return `M${point(u, v - half - bow)}Q${point(u + thick / 2, v - half + bow)} ${point(u + thick, v - half - bow)}L${point(u + thick, v + half - bow)}Q${point(u + thick / 2, v + half + bow)} ${point(u, v + half - bow)}Z`;
+			};
+			const marks = ctx.marks("bands", "path", bands, (d, i) => `${d.lane}/${d.size}/${i}`).attr("fill", ctx.theme.surface).attr("fill-opacity", glow);
+			ctx.set(marks, { d: shape }, { d: shape }, 6);
+			ctx.hover(marks, tooltip);
+		} else {
+			const trail = (d, k) => run(d.size) - heavy / 2 + k * heavy * .5;
+			const layers = bands.flatMap((d) => range(6).filter((k) => trail(d, k) + heavy < along - 2).map((k) => ({
+				...d,
+				k
+			})));
+			const smear = (d) => box(lane(d.lane), trail(d, d.k), thick, heavy);
+			const marks = ctx.marks("bands", "rect", layers, (d, i) => `${d.lane}/${d.size}/${d.k}/${i}`).attr("fill", ctx.theme.surface).attr("fill-opacity", (d) => glow(d) * .6 ** d.k);
+			ctx.set(marks, {
+				x: (d) => smear(d).x,
+				y: (d) => smear(d).y,
+				width: (d) => smear(d).width,
+				height: (d) => smear(d).height
+			}, {
+				x: (d) => smear(d).x,
+				y: (d) => smear(d).y,
+				width: (d) => smear(d).width,
+				height: (d) => smear(d).height
+			});
+			ctx.hover(marks, tooltip);
+		}
+		const profiles = !densitometry ? [] : lanes.map((name) => {
+			const own = bands.filter((d) => d.lane === name), base = lane(name) + thick + 1;
+			return Draft.polyline(range(start, along - 4, 2).map((v) => {
+				const value = own.reduce((sum, d) => sum + d.intensity * Math.exp(-(((v - run(d.size)) / (heavy * .7)) ** 2)), 0);
+				const u = base + Math.min(1, value) * (trace - 2);
+				return vertical ? [u, v] : [v, u];
+			}));
+		});
+		Draft.paths(ctx, "densitometry", profiles, {
+			stroke: ctx.theme.surface,
+			width: 1,
+			opacity: .8
+		});
+		let last = -Infinity;
+		const ticks = sizes.filter((size) => {
+			if (run(size) - last < (vertical ? 14 : 30)) return false;
+			last = run(size);
+			return true;
+		});
+		const position = (value) => run(value);
+		const sizeScale = Object.assign(position, {
+			copy: () => sizeScale,
+			domain: () => [],
+			range: () => [start, along - 8]
+		});
+		const sizeAxis = (vertical ? axisLeft(sizeScale) : axisTop(sizeScale)).tickValues(ticks).tickSize(4).tickFormat((value) => +value >= 1e3 ? `${+value / 1e3}k` : `${value}`);
+		Draft.axis(ctx, "axis-size", sizeAxis, "translate(0,0)", false);
+		const names = lanes.map((name) => {
+			const middle = lane(name) + thick / 2;
+			return vertical ? {
+				text: name,
+				x: middle,
+				y: -7,
+				size: 10
+			} : {
+				text: name,
+				x: -7,
+				y: middle + 4,
+				anchor: "end",
+				size: 10
+			};
+		});
+		const legible = vertical ? lane.step() >= Math.max(...lanes.map((name) => name.length * 6.2)) : lane.step() >= 12;
+		Draft.captions(ctx, "lanes", legible ? names : []);
+	}
+};
+export { ElectrophoresisGel, GelBand, GelMigration };

package/dist/charts/scientific/GridContours.js

@@ -0,0 +1,29 @@
+import { contours, geoPath, geoTransform, max } from "d3";
+// src/charts/scientific/GridContours.ts
+/** Kernel density on a pixel grid, masked to a frame so contours never leave it. */
+var GridContours = class {
+	static bands(points, width, height, bandwidth, inside, levels = 6) {
+		const nx = 72, ny = Math.max(12, Math.round(nx * height / width));
+		const sx = width / nx, sy = height / ny;
+		const field = new Array(nx * ny).fill(0);
+		const scale = -.5 / bandwidth ** 2;
+		for (let j = 0; j < ny; j++) for (let i = 0; i < nx; i++) {
+			const x = (i + .5) * sx, y = (j + .5) * sy;
+			if (!inside(x, y)) continue;
+			let sum = 0;
+			for (const [px, py] of points) sum += Math.exp(((x - px) ** 2 + (y - py) ** 2) * scale);
+			field[i + j * nx] = sum;
+		}
+		const peak = max(field) ?? 0;
+		if (!peak) return [];
+		const thresholds = Array.from({ length: levels }, (_, i) => peak * (i + 1) / (levels + 1));
+		const projected = geoPath(geoTransform({ point(x, y) {
+			this.stream.point(x * sx, y * sy);
+		} }));
+		return contours().size([nx, ny]).thresholds(thresholds)(field).filter((band) => band.coordinates.length).map((band, i) => ({
+			level: (i + 1) / levels,
+			d: projected(band) ?? ""
+		})).filter((band) => band.d);
+	}
+};
+export { GridContours };

package/dist/charts/scientific/HertzsprungRussell.js

@@ -0,0 +1,272 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { GridContours } from "./GridContours.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { extent, scaleBand, scaleLinear, scaleLog, scaleSqrt } from "d3";
+// src/charts/scientific/HertzsprungRussell.ts
+var StellarAbscissa = /* @__PURE__ */ function(StellarAbscissa) {
+	StellarAbscissa["Temperature"] = "temperature";
+	StellarAbscissa["ColorIndex"] = "color-index";
+	StellarAbscissa["SpectralClass"] = "spectral-class";
+	return StellarAbscissa;
+}({});
+var StellarOrdinate = /* @__PURE__ */ function(StellarOrdinate) {
+	StellarOrdinate["Luminosity"] = "luminosity";
+	StellarOrdinate["Magnitude"] = "magnitude";
+	return StellarOrdinate;
+}({});
+var StellarGuides = /* @__PURE__ */ function(StellarGuides) {
+	StellarGuides["Sequences"] = "sequences";
+	StellarGuides["None"] = "no-guides";
+	StellarGuides["Radii"] = "iso-radii";
+	return StellarGuides;
+}({});
+var StellarMark = /* @__PURE__ */ function(StellarMark) {
+	StellarMark["Dots"] = "dots";
+	StellarMark["Sized"] = "compressed-radius";
+	StellarMark["Contours"] = "contours";
+	return StellarMark;
+}({});
+var SUN = 5772;
+var CLASSES = [
+	["O", 3e4],
+	["B", 1e4],
+	["A", 7500],
+	["F", 6e3],
+	["G", 5200],
+	["K", 3700],
+	["M", 2400]
+];
+var SEQUENCES = [
+	{
+		name: "Main sequence",
+		shape: [
+			[33e3, 5.3],
+			[15e3, 3.2],
+			[8e3, 1.3],
+			[5772, 0],
+			[4200, -.9],
+			[3e3, -2.8]
+		],
+		at: [11e3, 1.25]
+	},
+	{
+		name: "Giants",
+		shape: [
+			[5400, 1.7],
+			[4400, 2.2],
+			[3500, 3]
+		],
+		at: [4200, 1.45]
+	},
+	{
+		name: "Supergiants",
+		shape: [
+			[18e3, 4.9],
+			[8e3, 4.95],
+			[3600, 5.1]
+		],
+		at: [7800, 4.3]
+	},
+	{
+		name: "White dwarfs",
+		shape: [
+			[22e3, -1.6],
+			[1e4, -2.9],
+			[6e3, -3.6]
+		],
+		at: [14e3, -3.4]
+	}
+];
+/** Maps stellar temperature against luminosity, the classic diagram of stellar evolution. */
+var HertzsprungRussell = class extends CartesianChart {
+	static meta = {
+		id: "hertzsprung-russell",
+		name: "Hertzsprung–Russell diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots stars by surface temperature against luminosity to reveal the main sequence, giants and white dwarfs.",
+		tags: [
+			"astronomy",
+			"hr diagram",
+			"color magnitude"
+		],
+		sample: (seed) => ScientificSample.stars(seed),
+		variants: {
+			abscissa: Object.values(StellarAbscissa),
+			ordinate: Object.values(StellarOrdinate),
+			guides: Object.values(StellarGuides),
+			mark: Object.values(StellarMark)
+		}
+	};
+	defaults() {
+		return {
+			temperature: "temperature",
+			luminosity: "luminosity",
+			radius: "radius",
+			name: "name",
+			group: "group",
+			grid: true,
+			abscissa: "temperature",
+			ordinate: "luminosity",
+			guides: "sequences",
+			mark: "dots"
+		};
+	}
+	/** Ballesteros's formula inverted: B−V of a blackbody at `t` kelvin. */
+	colorIndex(t) {
+		const k = t / 4600, b = 2.32 * k - 2, c = 1.054 * k - 2.32;
+		return (-b + Math.sqrt(b * b - 4 * k * c)) / (2 * k) / .92;
+	}
+	fraction(t) {
+		const index = CLASSES.findIndex(([, floor]) => t >= floor);
+		const i = index < 0 ? CLASSES.length - 1 : index;
+		const ceiling = i === 0 ? 6e4 : CLASSES[i - 1][1], floor = CLASSES[i][1];
+		return [CLASSES[i][0], Math.max(0, Math.min(1, (Math.log(ceiling) - Math.log(t)) / (Math.log(ceiling) - Math.log(floor))))];
+	}
+	stars() {
+		const { data, temperature, luminosity, radius, name, group } = this.options;
+		return data.flatMap((row) => {
+			const t = Draft.number(row[temperature]), l = Draft.number(row[luminosity]);
+			if (t === null || l === null || t <= 0 || l <= 0) return [];
+			return [{
+				row,
+				t,
+				l,
+				name: String(row[name] ?? ""),
+				group: String(row[group] ?? "Stars"),
+				r: Draft.number(row[radius]) ?? Math.sqrt(l) / (t / SUN) ** 2,
+				x: 0,
+				y: 0
+			}];
+		});
+	}
+	across(axes, t) {
+		if (this.options.abscissa === "spectral-class") {
+			const [name, fraction] = this.fraction(t), band = axes.x;
+			return band(name) + fraction * band.bandwidth();
+		}
+		return axes.x(this.options.abscissa === "color-index" ? this.colorIndex(t) : t);
+	}
+	up(axes, logL) {
+		return axes.y(this.options.ordinate === "magnitude" ? 4.83 - 2.5 * logL : 10 ** logL);
+	}
+	scales(ctx) {
+		const { abscissa, ordinate } = this.options;
+		const { width, height } = ctx.plot;
+		const stars = this.stars();
+		const [cool = 2500, hot = 4e4] = extent(stars, (d) => d.t);
+		const [dim = 1e-4, bright = 1e6] = extent(stars, (d) => d.l);
+		return {
+			x: abscissa === "spectral-class" ? scaleBand(CLASSES.map(([name]) => name), [0, width]) : abscissa === "color-index" ? scaleLinear([this.colorIndex(hot * 1.1) - .05, this.colorIndex(cool * .9) + .05], [0, width]) : scaleLog([hot * 1.15, cool * .88], [0, width]),
+			y: ordinate === "magnitude" ? scaleLinear([4.83 - 2.5 * Math.log10(dim) + 1, 4.83 - 2.5 * Math.log10(bright) - 1], [height, 0]) : scaleLog([dim / 2.5, bright * 2.5], [height, 0])
+		};
+	}
+	tickFormat(scale) {
+		if (typeof scale.bandwidth === "function") return null;
+		if (!scale.base) return super.tickFormat(scale);
+		const descending = scale.domain()[0] > scale.domain()[1];
+		return (value) => {
+			const v = +value, power = Math.floor(Math.log10(v) + 1e-9), lead = Math.round(v / 10 ** power);
+			if (descending) return [
+				1,
+				2,
+				3,
+				5
+			].includes(lead) ? `${v / 1e3}k` : "";
+			return lead === 1 && power % 2 === 0 ? `10${SUPER(power)}` : "";
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	plotMarks(ctx, axes) {
+		const { guides, mark } = this.options;
+		const { width, height } = ctx.plot;
+		const stars = this.stars().map((star) => ({
+			...star,
+			x: this.across(axes, star.t),
+			y: this.up(axes, Math.log10(star.l))
+		}));
+		const place = (t, logL) => [this.across(axes, t), this.up(axes, logL)];
+		const curve = (points) => Draft.clipped(points, width, height);
+		const radii = [
+			.01,
+			1,
+			100
+		];
+		const iso = guides !== "iso-radii" ? [] : radii.map((r) => {
+			const samples = Array.from({ length: 24 }, (_, i) => 2400 * (4e4 / 2400) ** (i / 23));
+			return curve(samples.map((t) => place(t, 2 * Math.log10(r) + 4 * Math.log10(t / SUN))));
+		});
+		Draft.paths(ctx, "iso-radii", iso, {
+			stroke: ctx.theme.inkMuted,
+			dash: "3 4"
+		});
+		const radiusCaptions = guides !== "iso-radii" ? [] : radii.flatMap((r) => {
+			const [x, y] = place(9e3, 2 * Math.log10(r) + 4 * Math.log10(9e3 / SUN));
+			return x > 20 && x < width - 40 && y > 12 && y < height - 8 ? [{
+				text: `${r} R☉`,
+				x,
+				y: y - 6,
+				size: 10,
+				tone: "muted"
+			}] : [];
+		});
+		Draft.captions(ctx, "radius-names", radiusCaptions);
+		const bands = guides !== "sequences" ? [] : SEQUENCES.map(({ shape }) => curve(shape.map(([t, logL]) => place(t, logL))));
+		Draft.paths(ctx, "sequences", bands, {
+			stroke: ctx.theme.axis,
+			width: 14,
+			opacity: .45
+		});
+		if (mark === "contours") {
+			const shapes = GridContours.bands(stars.map((d) => [d.x, d.y]), width, height, Math.max(9, width / 44), () => true, 5);
+			const fills = ctx.marks("density", "path", shapes, (_, i) => i).attr("fill", (d) => ctx.palette.sequential(d.level * .8)).attr("fill-opacity", .8).attr("stroke", ctx.theme.surface);
+			ctx.set(fills, { d: (d) => d.d }, { d: (d) => d.d });
+			ctx.hover(fills, (d) => ({
+				title: "Star density",
+				rows: [["Level", `${Math.round(d.level * 100)}%`]]
+			}));
+		} else {
+			const area = scaleSqrt([0, Math.max(1, ...stars.map((d) => Math.sqrt(d.r)))], [2.5, 12]);
+			const radius = (d) => mark === "compressed-radius" ? area(Math.sqrt(d.r)) : 3.5;
+			const heat = (t) => ctx.palette.diverging(Math.max(-1, Math.min(1, (Math.log(SUN) - Math.log(t)) * 1.2)));
+			const dots = ctx.marks("stars", "circle", stars, (d, i) => `${d.name}${i}`).attr("fill", (d) => heat(d.t)).attr("stroke", ctx.theme.ink).attr("stroke-opacity", .35).attr("stroke-width", .5);
+			ctx.set(dots, {
+				cx: (d) => d.x,
+				cy: (d) => d.y,
+				r: radius
+			}, {
+				cx: (d) => d.x,
+				cy: (d) => d.y,
+				r: 0
+			}, 1.5);
+			ctx.hover(dots, (d) => ({
+				title: d.name || d.group,
+				rows: [
+					["Class", d.group],
+					["Temperature", `${d.t.toLocaleString("en")} K`],
+					["Luminosity", `${d.l.toPrecision(3)} L☉`],
+					["Radius", `${d.r.toPrecision(3)} R☉`]
+				]
+			}));
+		}
+		const names = guides !== "sequences" ? [] : Draft.declutter(SEQUENCES.map(({ name, at: [t, logL] }) => {
+			const [x, y] = place(t, logL);
+			return {
+				text: name,
+				x,
+				y,
+				size: 10.5,
+				tone: "ink"
+			};
+		}), width, height);
+		Draft.captions(ctx, "sequence-names", names).attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke");
+	}
+};
+var SUPER = (power) => String(power).replace(/-/g, "⁻").replace(/\d/g, (d) => "⁰¹²³⁴⁵⁶⁷⁸⁹"[+d]);
+export { HertzsprungRussell, StellarAbscissa, StellarGuides, StellarMark, StellarOrdinate };