@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scientific/ClimographChart.js

@@ -0,0 +1,273 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ClimateChart, ClimateYearStart } from "./ClimateChart.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { arc, area, areaRadial, axisBottom, axisLeft, axisRight, curveCardinalClosed, curveLinear, curveLinearClosed, curveMonotoneX, curveStepAfter, extent, line, lineRadial, max, min, scaleBand, scaleLinear } from "d3";
+// src/charts/scientific/ClimographChart.ts
+var ClimographForm = /* @__PURE__ */ function(ClimographForm) {
+	ClimographForm["Columns"] = "columns";
+	ClimographForm["Loop"] = "homer-loop";
+	ClimographForm["Radial"] = "radial-year";
+	return ClimographForm;
+}({});
+var ClimographRain = /* @__PURE__ */ function(ClimographRain) {
+	ClimographRain["Bars"] = "rain-bars";
+	ClimographRain["Area"] = "rain-area";
+	ClimographRain["Step"] = "rain-steps";
+	return ClimographRain;
+}({});
+/** Annual climate of a place: monthly temperature and precipitation together. */
+var ClimographChart = class extends ClimateChart {
+	static meta = {
+		id: "climograph",
+		name: "Climograph",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows the yearly rhythm of temperature and precipitation at a station, as columns, a Homer loop or a radial year.",
+		tags: [
+			"climate",
+			"climate diagram",
+			"meteorology"
+		],
+		sample: (seed) => ScientificSample.climate(seed),
+		variants: {
+			form: Object.values(ClimographForm),
+			start: Object.values(ClimateYearStart),
+			rain: Object.values(ClimographRain),
+			smooth: [true, false],
+			range: [false, true]
+		},
+		valid: (values) => {
+			if (values.form === "homer-loop") return values.start === ClimateYearStart.January && values.rain === "rain-bars";
+			return values.form !== "radial-year" || values.rain !== "rain-steps";
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "columns",
+			rain: "rain-bars",
+			smooth: true,
+			range: false
+		};
+	}
+	plotMargin() {
+		return this.options.form === "radial-year" ? {
+			top: 18,
+			right: 18,
+			bottom: 18,
+			left: 18
+		} : {
+			top: 16,
+			right: 44,
+			bottom: 26,
+			left: 40
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		const months = this.months();
+		if (this.options.form === "homer-loop") return this.loop(ctx);
+		if (this.options.form === "radial-year") return this.radial(ctx, months);
+		this.columns(ctx, months);
+	}
+	tooltip(d, title) {
+		return {
+			title,
+			rows: [["Temperature", `${d.temperature.toFixed(1)} °C`], ["Precipitation", `${d.precipitation.toFixed(0)} mm`]]
+		};
+	}
+	columns(ctx, months) {
+		const { width, height } = ctx.plot;
+		const { smooth, range, rain } = this.options;
+		const band = scaleBand(months.map((d) => String(d.month)), [0, width]).padding(.14);
+		const rainY = scaleLinear([0, Math.max(10, max(months, (d) => d.precipitation) ?? 10)], [height, 0]).nice();
+		const low = min(months, (d) => range ? d.tmin ?? d.temperature : d.temperature) ?? 0, high = max(months, (d) => range ? d.tmax ?? d.temperature : d.temperature) ?? 1;
+		const tempY = scaleLinear([Math.min(0, low), high], [height, 0]).nice();
+		const label = (month) => months.find((d) => String(d.month) === month)?.label ?? "";
+		Draft.axis(ctx, "axis-x", axisBottom(band).tickFormat(label).tickSize(0).tickPadding(7), `translate(0,${height})`);
+		Draft.axis(ctx, "axis-temperature", axisLeft(tempY).ticks(5).tickSize(0).tickFormat((d) => `${d}°`), "translate(0,0)", false);
+		Draft.axis(ctx, "axis-rain", axisRight(rainY).ticks(5).tickSize(0).tickFormat((d) => `${d}`), `translate(${width},0)`, false);
+		Draft.rules(ctx, "grid", tempY.ticks(5).map((tick) => ({
+			x1: 0,
+			x2: width,
+			y1: tempY(tick),
+			y2: tempY(tick)
+		}))).lower();
+		Draft.captions(ctx, "units", [{
+			text: "mm",
+			x: width + 6,
+			y: -6,
+			anchor: "start",
+			size: 10,
+			tone: "muted"
+		}, {
+			text: "°C",
+			x: -6,
+			y: -6,
+			anchor: "end",
+			size: 10,
+			tone: "muted"
+		}]);
+		const rainName = "Precipitation", tempName = "Temperature";
+		const x = (d) => band(String(d.month)) + band.bandwidth() / 2;
+		const bars = ctx.marks("rain-bars", "rect", rain === "rain-bars" ? months : [], (d) => d.month).attr("fill", ctx.palette.color(rainName)).attr("rx", Math.min(4, band.bandwidth() / 2));
+		ctx.set(bars, {
+			x: (d) => band(String(d.month)),
+			width: band.bandwidth(),
+			y: (d) => rainY(d.precipitation),
+			height: (d) => height - rainY(d.precipitation)
+		}, {
+			x: (d) => band(String(d.month)),
+			width: band.bandwidth(),
+			y: height,
+			height: 0
+		}, 25);
+		ctx.hover(bars, (d) => this.tooltip(d, d.label));
+		const sheet = area().x(x).y0(height).y1((d) => rainY(d.precipitation)).curve(rain === "rain-steps" ? curveStepAfter : curveMonotoneX);
+		const fill = ctx.marks("rain-area", "path", rain === "rain-bars" || !months.length ? [] : [months]).attr("fill", ctx.palette.color(rainName)).attr("fill-opacity", .55);
+		ctx.set(fill, { d: (d) => sheet(d) ?? "" }, { d: (d) => sheet(d) ?? "" });
+		ctx.hover(fill, (d) => ({
+			title: rainName,
+			rows: [["Annual total", `${Math.round(d.reduce((sum, month) => sum + month.precipitation, 0))} mm`]]
+		}));
+		const bandShape = area().x(x).y0((d) => tempY(d.tmin ?? d.temperature)).y1((d) => tempY(d.tmax ?? d.temperature)).curve(smooth ? curveMonotoneX : curveLinear);
+		const spread = ctx.marks("temperature-range", "path", range && months.length ? [months] : []).attr("fill", ctx.palette.color(tempName)).attr("fill-opacity", .18);
+		ctx.set(spread, { d: (d) => bandShape(d) ?? "" }, { d: (d) => bandShape(d) ?? "" });
+		const trace = line().x(x).y((d) => tempY(d.temperature)).curve(smooth ? curveMonotoneX : curveLinear);
+		const path = ctx.marks("temperature", "path", months.length ? [months] : []).attr("fill", "none").attr("stroke", ctx.palette.color(tempName)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(path, { d: (d) => trace(d) ?? "" }, { d: (d) => trace(d) ?? "" });
+		ctx.drawOn(path);
+		const dots = ctx.marks("temperature-dots", "circle", months, (d) => d.month).attr("fill", ctx.palette.color(tempName)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: x,
+			cy: (d) => tempY(d.temperature),
+			r: 4
+		}, {
+			cx: x,
+			cy: (d) => tempY(d.temperature),
+			r: 0
+		}, 25);
+		ctx.hover(dots, (d) => this.tooltip(d, d.label));
+	}
+	/** Homer's climate loop: one closed path per station through monthly precipitation and temperature. */
+	loop(ctx) {
+		const { width, height } = ctx.plot;
+		const { smooth, range } = this.options;
+		const sites = (this.stations.length ? this.stations : [null]).map((site) => ({
+			site: site ?? "Station",
+			months: this.months(site)
+		})).filter((d) => d.months.length);
+		const all = sites.flatMap((d) => d.months);
+		const [tmin = 0, tmax = 1] = extent(all.flatMap((d) => range ? [d.tmin ?? d.temperature, d.tmax ?? d.temperature] : [d.temperature]));
+		const x = scaleLinear([0, Math.max(10, max(all, (d) => d.precipitation) ?? 10)], [0, width]).nice();
+		const y = scaleLinear([tmin, tmax], [height, 0]).nice();
+		Draft.axis(ctx, "axis-rain", axisBottom(x).ticks(6).tickSize(0).tickPadding(7), `translate(0,${height})`);
+		Draft.axis(ctx, "axis-temperature", axisLeft(y).ticks(5).tickSize(0).tickFormat((d) => `${d}°`), "translate(0,0)", false);
+		Draft.rules(ctx, "grid", y.ticks(5).map((tick) => ({
+			x1: 0,
+			x2: width,
+			y1: y(tick),
+			y2: y(tick)
+		}))).lower();
+		Draft.captions(ctx, "units", [{
+			text: "mm",
+			x: width + 6,
+			y: height + 16,
+			anchor: "start",
+			size: 10,
+			tone: "muted"
+		}, {
+			text: "°C",
+			x: -6,
+			y: -6,
+			anchor: "end",
+			size: 10,
+			tone: "muted"
+		}]);
+		const closed = line().x((d) => x(d.precipitation)).y((d) => y(d.temperature)).curve(smooth ? curveCardinalClosed.tension(.3) : curveLinearClosed);
+		const spans = range ? sites.flatMap(({ months }) => months.map((d) => ({
+			x1: x(d.precipitation),
+			x2: x(d.precipitation),
+			y1: y(d.tmin ?? d.temperature),
+			y2: y(d.tmax ?? d.temperature)
+		}))) : [];
+		Draft.rules(ctx, "ranges", spans, { stroke: ctx.theme.axis });
+		const loops = ctx.marks("loops", "path", sites, (d) => d.site).attr("stroke", (d) => ctx.palette.color(d.site)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("fill", (d) => ctx.palette.color(d.site)).attr("fill-opacity", .1);
+		ctx.set(loops, { d: (d) => closed(d.months) ?? "" }, { d: (d) => closed(d.months) ?? "" });
+		ctx.drawOn(loops);
+		ctx.hover(loops, (d) => ({
+			title: d.site,
+			color: ctx.palette.color(d.site),
+			rows: [["Annual total", `${Math.round(d.months.reduce((sum, month) => sum + month.precipitation, 0))} mm`]]
+		}));
+		const dots = ctx.marks("months", "circle", sites.flatMap((d) => d.months.map((month) => ({
+			site: d.site,
+			month
+		}))), (d) => `${d.site}${d.month.month}`).attr("fill", (d) => ctx.palette.color(d.site)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => x(d.month.precipitation),
+			cy: (d) => y(d.month.temperature),
+			r: 4
+		}, {
+			cx: (d) => x(d.month.precipitation),
+			cy: (d) => y(d.month.temperature),
+			r: 0
+		}, 6);
+		ctx.hover(dots, (d) => this.tooltip(d.month, `${d.site}, month ${d.month.month}`));
+	}
+	radial(ctx, months) {
+		const { width, height } = ctx.plot;
+		const { smooth, range, rain } = this.options;
+		const stage = ctx.nest(`translate(${width / 2},${height / 2})`, "year");
+		const outer = Math.min(width, height) / 2 - 12, inner = outer * .26, rainTop = outer * .62;
+		const step = 2 * Math.PI / Math.max(1, months.length);
+		const wettest = Math.max(10, max(months, (d) => d.precipitation) ?? 10);
+		const r = (rain) => Math.sqrt(inner ** 2 + (rainTop ** 2 - inner ** 2) * Math.max(0, rain) / wettest);
+		const low = min(months, (d) => range ? d.tmin ?? d.temperature : d.temperature) ?? 0, high = max(months, (d) => range ? d.tmax ?? d.temperature : d.temperature) ?? 1;
+		const t = scaleLinear([low, high], [rainTop + 6, outer]).nice();
+		Draft.paths(stage, "rings", [
+			inner,
+			rainTop + 6,
+			outer
+		].map((radius) => `M${-radius},0A${radius},${radius} 0 1 1 ${radius},0A${radius},${radius} 0 1 1 ${-radius},0`));
+		Draft.captions(stage, "months", months.map((d, i) => {
+			const angle = (i + .5) * step;
+			return {
+				text: d.label,
+				x: Math.sin(angle) * (outer + 10),
+				y: -Math.cos(angle) * (outer + 10) + 4,
+				size: 10,
+				tone: "muted"
+			};
+		}));
+		const wedge = arc().innerRadius(inner).outerRadius((d) => r(d.precipitation)).startAngle((d) => months.indexOf(d) * step + .02).endAngle((d) => (months.indexOf(d) + 1) * step - .02).padAngle(.02).cornerRadius(2);
+		const wedges = stage.marks("rain-wedges", "path", rain === "rain-bars" ? months : [], (d) => d.month).attr("fill", ctx.palette.color("Precipitation"));
+		stage.set(wedges, { d: (d) => wedge(d) ?? "" }, { d: (d) => wedge(d) ?? "" });
+		stage.hover(wedges, (d) => this.tooltip(d, d.label));
+		const closedLoop = (list) => list.length ? [...list, list[0]] : list;
+		const angleOf = (_, i) => (i + .5) * step;
+		const sheet = areaRadial().angle(angleOf).innerRadius(inner).outerRadius((d) => r(d.precipitation)).curve(curveLinear);
+		const fill = stage.marks("rain-area", "path", rain === "rain-area" && months.length ? [closedLoop(months)] : []).attr("fill", ctx.palette.color("Precipitation")).attr("fill-opacity", .6);
+		stage.set(fill, { d: (d) => sheet(d) ?? "" }, { d: (d) => sheet(d) ?? "" });
+		stage.hover(fill, () => ({
+			title: "Precipitation",
+			rows: [["Annual total", `${Math.round(months.reduce((sum, month) => sum + month.precipitation, 0))} mm`]]
+		}));
+		const span = areaRadial().angle(angleOf).innerRadius((d) => t(d.tmin ?? d.temperature)).outerRadius((d) => t(d.tmax ?? d.temperature)).curve(curveLinear);
+		const spread = stage.marks("temperature-range", "path", range && months.length ? [closedLoop(months)] : []).attr("fill", ctx.palette.color("Temperature")).attr("fill-opacity", .18);
+		stage.set(spread, { d: (d) => span(d) ?? "" }, { d: (d) => span(d) ?? "" });
+		const ring = lineRadial().angle(angleOf).radius((d) => t(d.temperature)).curve(curveLinear);
+		const smoothRing = lineRadial().angle(angleOf).radius((d) => t(d.temperature)).curve(curveCardinalClosed.tension(.4));
+		const path = stage.marks("temperature", "path", months.length ? [months] : []).attr("fill", "none").attr("stroke", ctx.palette.color("Temperature")).attr("stroke-width", 2);
+		const shape = (list) => (smooth ? smoothRing(list) : ring(closedLoop(list))) ?? "";
+		stage.set(path, { d: shape }, { d: shape });
+		stage.drawOn(path);
+		stage.hover(path, () => ({
+			title: "Temperature",
+			rows: [["Mean", `${(months.reduce((sum, month) => sum + month.temperature, 0) / months.length).toFixed(1)} °C`]]
+		}));
+	}
+};
+export { ClimographChart, ClimographForm, ClimographRain };

package/dist/charts/scientific/Draft.js

@@ -0,0 +1,89 @@
+import { geoIdentity, geoPath } from "d3";
+// src/charts/scientific/Draft.ts
+var WIDTH = .56;
+/** Scaffolding shared by scientific frames: rules, captions, axes and clipped polylines. Static parts do not grow in. */
+var Draft = class Draft {
+	/** Empties the plot when a structural option changes, so an updated chart never keeps marks of its old form. */
+	static fresh(ctx, meta, options) {
+		const key = Object.keys(meta.variants ?? {}).map((name) => options[name]).join("|");
+		const node = ctx.root.node();
+		if (node && node.__form !== void 0 && node.__form !== key) ctx.root.selectAll("*").remove();
+		if (node) node.__form = key;
+	}
+	static rules(ctx, name, segments, style = {}, parent) {
+		const lines = ctx.marks(name, "line", segments, (_, i) => i, parent).attr("stroke", style.stroke ?? ctx.theme.grid).attr("stroke-width", style.width ?? 1).attr("stroke-dasharray", style.dash ?? null).attr("opacity", style.opacity ?? null).attr("fill", "none").style("pointer-events", "none");
+		const final = {
+			x1: (d) => d.x1,
+			y1: (d) => d.y1,
+			x2: (d) => d.x2,
+			y2: (d) => d.y2
+		};
+		return ctx.set(lines, final, final);
+	}
+	static paths(ctx, name, shapes, style = {}, fill = "none", parent) {
+		const paths = ctx.marks(name, "path", shapes, (_, i) => i, parent).attr("stroke", style.stroke ?? ctx.theme.grid).attr("stroke-width", style.width ?? 1).attr("stroke-dasharray", style.dash ?? null).attr("opacity", style.opacity ?? null).attr("fill", fill).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").style("pointer-events", "none");
+		const final = { d: (d) => d };
+		return ctx.set(paths, final, final);
+	}
+	static captions(ctx, name, items, parent) {
+		const text = ctx.marks(name, "text", items, (_, i) => i, parent);
+		ctx.text(text);
+		return text.attr("fill", (d) => ({
+			ink: ctx.theme.ink,
+			secondary: ctx.theme.inkSecondary,
+			muted: ctx.theme.inkMuted
+		})[d.tone ?? "secondary"]).attr("font-size", (d) => d.size ?? 11).attr("font-weight", (d) => d.weight ?? null).attr("text-anchor", (d) => d.anchor ?? "middle").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("transform", (d) => d.rotate ? `rotate(${d.rotate} ${d.x} ${d.y})` : null).style("pointer-events", "none").text((d) => d.text);
+	}
+	/** Estimated box of a horizontal caption. */
+	static box(item) {
+		const size = item.size ?? 11, width = item.text.length * size * WIDTH;
+		const left = item.anchor === "start" ? item.x : item.anchor === "end" ? item.x - width : item.x - width / 2;
+		return {
+			left,
+			right: left + width,
+			top: item.y - size,
+			bottom: item.y + size * .3
+		};
+	}
+	/** Keeps captions that fit the area, in priority order, dropping any that collide. */
+	static declutter(items, width, height, pad = 2) {
+		const kept = [];
+		for (const item of items) {
+			const a = Draft.box(item);
+			if (!(a.left >= 0 && a.right <= width && a.top >= 0 && a.bottom <= height)) continue;
+			if (!kept.some((other) => {
+				const b = Draft.box(other);
+				return a.left < b.right + pad && b.left < a.right + pad && a.top < b.bottom + pad && b.top < a.bottom + pad;
+			})) kept.push(item);
+		}
+		return kept;
+	}
+	/** Styles a d3 axis in the library's recessive look. */
+	static axis(ctx, name, axis, transform, spine = true) {
+		const group = ctx.group(name).attr("transform", transform).call(axis);
+		group.select(".domain").attr("stroke", spine ? ctx.theme.axis : "none");
+		group.selectAll(".tick line").attr("stroke", ctx.theme.axis);
+		group.selectAll("text").attr("fill", ctx.theme.inkSecondary).attr("font-size", 11).attr("font-family", ctx.theme.fontFamily);
+		return group;
+	}
+	/** Polyline trimmed to the rectangle `0..width, 0..height`, as path data. */
+	static clipped(points, width, height) {
+		return geoPath(geoIdentity().clipExtent([[0, 0], [width, height]]))({
+			type: "LineString",
+			coordinates: points
+		}) ?? "";
+	}
+	static polygon(points) {
+		return `M${points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join("L")}Z`;
+	}
+	static polyline(points) {
+		return `M${points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join("L")}`;
+	}
+	/** Finite numeric cell, or null. */
+	static number(value) {
+		if (value === null || value === void 0 || value === "") return null;
+		const number = +value;
+		return Number.isFinite(number) ? number : null;
+	}
+};
+export { Draft };

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 };