@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scientific/SequenceLogoChart.js

@@ -0,0 +1,225 @@
+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 { max, min, scaleBand, scaleLinear } from "d3";
+// src/charts/scientific/SequenceLogoChart.ts
+var LogoMetric = /* @__PURE__ */ function(LogoMetric) {
+	LogoMetric["Bits"] = "information-bits";
+	LogoMetric["Probability"] = "probability";
+	LogoMetric["Enrichment"] = "log-odds";
+	return LogoMetric;
+}({});
+var LogoOrder = /* @__PURE__ */ function(LogoOrder) {
+	LogoOrder["Frequency"] = "by-frequency";
+	LogoOrder["Alphabet"] = "alphabetical";
+	return LogoOrder;
+}({});
+var LogoAlphabet = /* @__PURE__ */ function(LogoAlphabet) {
+	LogoAlphabet["Residues"] = "residues";
+	LogoAlphabet["Classes"] = "purine-pyrimidine";
+	return LogoAlphabet;
+}({});
+var LogoForm = /* @__PURE__ */ function(LogoForm) {
+	LogoForm["Letters"] = "letters";
+	LogoForm["Blocks"] = "blocks";
+	return LogoForm;
+}({});
+var CLASSES = {
+	A: "R",
+	G: "R",
+	C: "Y",
+	T: "Y",
+	U: "Y"
+};
+var FONT = "ui-monospace, Menlo, Consolas, monospace";
+/** Ink box of an upper-case bold monospace glyph at font-size 100. */
+var GLYPH = {
+	width: 58,
+	height: 72
+};
+/** Conservation at each position of aligned sequences, stacked as scaled letters. */
+var SequenceLogoChart = class extends CartesianChart {
+	static meta = {
+		id: "sequence-logo",
+		name: "Sequence logo",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks letters at each alignment position, scaled by information content, to reveal a conserved motif.",
+		tags: [
+			"bioinformatics",
+			"weblogo",
+			"motif",
+			"dna",
+			"protein"
+		],
+		sample: (seed) => ScientificSample.sequences(seed),
+		variants: {
+			metric: Object.values(LogoMetric),
+			order: Object.values(LogoOrder),
+			alphabet: Object.values(LogoAlphabet),
+			form: Object.values(LogoForm),
+			errorBars: [false, true]
+		},
+		valid: (values) => values.metric === "information-bits" || values.errorBars === false
+	};
+	defaults() {
+		return {
+			sequence: "sequence",
+			count: "count",
+			metric: "information-bits",
+			order: "by-frequency",
+			alphabet: "residues",
+			form: "letters",
+			errorBars: false,
+			grid: true,
+			xLabel: "Position"
+		};
+	}
+	profile() {
+		const { data, sequence, count, alphabet } = this.options;
+		const columns = [];
+		let depth = 0;
+		for (const row of data) {
+			const text = row[sequence];
+			if (typeof text !== "string") continue;
+			const weight = Math.max(0, Draft.number(row[count]) ?? 1);
+			depth += weight;
+			[...text.toUpperCase()].forEach((raw, i) => {
+				const letter = alphabet === "purine-pyrimidine" ? CLASSES[raw] ?? raw : raw;
+				if (letter === "-" || letter === ".") return;
+				const column = columns[i] ??= /* @__PURE__ */ new Map();
+				column.set(letter, (column.get(letter) ?? 0) + weight);
+			});
+		}
+		return {
+			columns,
+			symbols: [...new Set(columns.flatMap((column) => [...column.keys()]))].sort(),
+			depth
+		};
+	}
+	error(symbols, depth) {
+		return (symbols - 1) / (2 * Math.LN2 * Math.max(1, depth));
+	}
+	stacks() {
+		const { metric, order } = this.options;
+		const { columns, symbols, depth } = this.profile();
+		const room = Math.log2(Math.max(2, symbols.length)), background = 1 / Math.max(1, symbols.length);
+		return columns.flatMap((column, position) => {
+			const total = [...column.values()].reduce((a, b) => a + b, 0) || 1;
+			const letters = symbols.flatMap((letter) => {
+				const frequency = (column.get(letter) ?? 0) / total;
+				return frequency ? [{
+					letter,
+					frequency
+				}] : [];
+			});
+			const entropy = -letters.reduce((sum, d) => sum + d.frequency * Math.log2(d.frequency), 0);
+			const content = Math.max(0, room - entropy - this.error(symbols.length, depth));
+			const size = (frequency) => metric === "probability" ? frequency : metric === "information-bits" ? frequency * content : Math.log2(frequency / background);
+			const sorted = order === "by-frequency" ? [...letters].sort((a, b) => Math.abs(size(a.frequency)) - Math.abs(size(b.frequency))) : letters;
+			let up = 0, down = 0;
+			return sorted.map(({ letter, frequency }) => {
+				const value = size(frequency);
+				if (value >= 0) {
+					const start = up;
+					up += value;
+					return {
+						position,
+						letter,
+						frequency,
+						start,
+						end: up
+					};
+				}
+				const start = down;
+				down += value;
+				return {
+					position,
+					letter,
+					frequency,
+					start,
+					end: down
+				};
+			});
+		});
+	}
+	scales(ctx) {
+		const { metric } = this.options;
+		const { columns, symbols } = this.profile();
+		const stacks = this.stacks();
+		const x = scaleBand(columns.map((_, i) => `${i + 1}`), [0, ctx.plot.width]).padding(.06);
+		const top = metric === "probability" ? 1 : metric === "information-bits" ? Math.log2(Math.max(2, symbols.length)) : Math.max(1, max(stacks, (d) => d.end) ?? 1);
+		const bottom = metric === "log-odds" ? Math.min(-1, min(stacks, (d) => d.end) ?? -1) : 0;
+		return {
+			x,
+			y: scaleLinear([bottom, top], [ctx.plot.height, 0])
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	plotMarks(ctx, { x, y }) {
+		const { form, errorBars, metric } = this.options;
+		const { symbols, depth, columns } = this.profile();
+		const stacks = this.stacks().filter((d) => Math.abs(y(d.end) - y(d.start)) > .4);
+		const left = (d) => x(`${d.position + 1}`), wide = x.bandwidth();
+		const tip = (d) => ({
+			title: `Position ${d.position + 1}: ${d.letter}`,
+			color: ctx.palette.color(d.letter),
+			rows: [["Frequency", `${(d.frequency * 100).toFixed(1)}%`], [metric === "information-bits" ? "Bits" : "Height", Math.abs(d.end - d.start).toFixed(2)]]
+		});
+		for (const symbol of symbols) ctx.palette.color(symbol);
+		Draft.rules(ctx, "zero", metric === "log-odds" ? [{
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: y(0),
+			y2: y(0)
+		}] : [], { stroke: ctx.theme.axis });
+		if (form === "blocks") {
+			const blocks = ctx.marks("blocks", "rect", stacks, (d) => `${d.position}/${d.letter}`).attr("fill", (d) => ctx.palette.color(d.letter)).attr("rx", 2);
+			const place = {
+				x: left,
+				width: wide,
+				y: (d) => Math.min(y(d.start), y(d.end)),
+				height: (d) => Math.max(0, Math.abs(y(d.end) - y(d.start)) - 1)
+			};
+			ctx.set(blocks, place, {
+				...place,
+				y: y(0),
+				height: 0
+			}, 3);
+			ctx.hover(blocks, tip);
+		} else {
+			const glyph = (d) => {
+				const tall = Math.abs(y(d.end) - y(d.start)), base = Math.max(y(d.end), y(d.start));
+				return `translate(${left(d) + wide / 2},${base}) scale(${wide / GLYPH.width},${tall / GLYPH.height})`;
+			};
+			const letters = ctx.marks("letters", "text", stacks, (d) => `${d.position}/${d.letter}`).attr("text-anchor", "middle").attr("font-size", 100).attr("font-weight", 700).attr("font-family", FONT).attr("fill", (d) => ctx.palette.color(d.letter)).text((d) => d.letter);
+			ctx.set(letters, { transform: glyph }, { transform: (d) => `translate(${left(d) + wide / 2},${y(0)}) scale(${wide / GLYPH.width},0)` }, 3);
+			ctx.hover(letters, tip);
+		}
+		const whisker = this.error(symbols.length, depth) * 1.96;
+		const tops = !errorBars ? [] : columns.map((_, position) => {
+			return {
+				position,
+				end: max(stacks.filter((d) => d.position === position), (d) => d.end) ?? 0
+			};
+		}).filter((d) => d.end > 0);
+		Draft.rules(ctx, "errors", tops.map((d) => {
+			const middle = x(`${d.position + 1}`) + wide / 2;
+			return {
+				x1: middle,
+				x2: middle,
+				y1: Math.max(0, y(d.end + whisker)),
+				y2: y(Math.max(0, d.end - whisker))
+			};
+		}), {
+			stroke: ctx.theme.ink,
+			width: 1
+		});
+	}
+};
+export { LogoAlphabet, LogoForm, LogoMetric, LogoOrder, SequenceLogoChart };

package/dist/charts/scientific/Simplex.js

@@ -0,0 +1,155 @@
+import { Draft } from "./Draft.js";
+// src/charts/scientific/Simplex.ts
+var RISE = Math.sqrt(3) / 2;
+/** An equilateral composition triangle: `a` at the apex, `b` bottom left, `c` bottom right (flipped when inverted). */
+var Simplex = class Simplex {
+	apex;
+	left;
+	right;
+	constructor(apex, left, right) {
+		this.apex = apex;
+		this.left = left;
+		this.right = right;
+	}
+	/** Largest triangle inside `box`, leaving `inset` around it for labels. */
+	static fit(box, inverted = false, inset = 0) {
+		const side = Math.min(box.width - inset * 2 - 88, (box.height - inset * 2) / RISE);
+		return Simplex.place(box.x + box.width / 2, box.y + box.height / 2, side, inverted);
+	}
+	static place(cx, cy, side, inverted = false) {
+		const half = side * RISE / 2, sign = inverted ? -1 : 1;
+		return new Simplex([cx, cy - sign * half], [cx - side / 2, cy + sign * half], [cx + side / 2, cy + sign * half]);
+	}
+	get side() {
+		return Math.hypot(this.right[0] - this.left[0], this.right[1] - this.left[1]);
+	}
+	get inverted() {
+		return this.apex[1] > this.left[1];
+	}
+	get outline() {
+		return Draft.polygon([
+			this.apex,
+			this.left,
+			this.right
+		]);
+	}
+	/** Barycentric point. Components need not sum to one. */
+	at(a, b, c) {
+		const total = a + b + c || 1;
+		return [(a * this.apex[0] + b * this.left[0] + c * this.right[0]) / total, (a * this.apex[1] + b * this.left[1] + c * this.right[1]) / total];
+	}
+	contains(x, y) {
+		const [ax, ay] = this.apex, [bx, by] = this.left, [cx, cy] = this.right;
+		const area = (bx - ax) * (cy - ay) - (cx - ax) * (by - ay);
+		const s = ((bx - x) * (cy - y) - (cx - x) * (by - y)) / area, t = ((cx - x) * (ay - y) - (ax - x) * (cy - y)) / area;
+		return s >= 0 && t >= 0 && s + t <= 1;
+	}
+	/** Lines of constant composition, every `1 / divisions`. */
+	grid(divisions) {
+		return Array.from({ length: divisions - 1 }, (_, i) => (i + 1) / divisions).flatMap((t) => {
+			const u = 1 - t;
+			return [
+				[this.at(t, u, 0), this.at(t, 0, u)],
+				[this.at(u, t, 0), this.at(0, t, u)],
+				[this.at(0, u, t), this.at(u, 0, t)]
+			].map(([p, q]) => ({
+				x1: p[0],
+				y1: p[1],
+				x2: q[0],
+				y2: q[1]
+			}));
+		});
+	}
+	/** Short outward ticks on all three edges, for a frame with no inner grid. */
+	ticks(divisions, length = 5) {
+		const down = this.inverted ? -1 : 1;
+		return Array.from({ length: divisions - 1 }, (_, i) => (i + 1) / divisions).flatMap((t) => {
+			const u = 1 - t;
+			const [ax, ay] = this.at(t, 0, u), [bx, by] = this.at(u, t, 0), [cx, cy] = this.at(0, u, t);
+			return [
+				{
+					x1: ax,
+					y1: ay,
+					x2: ax + length,
+					y2: ay
+				},
+				{
+					x1: bx,
+					y1: by,
+					x2: bx - length * .5,
+					y2: by - length * RISE * down
+				},
+				{
+					x1: cx,
+					y1: cy,
+					x2: cx - length * .5,
+					y2: cy + length * RISE * down
+				}
+			];
+		});
+	}
+	/** Tick labels, per component in the frame's own domain. */
+	labels(divisions, value) {
+		const down = this.inverted ? -1 : 1;
+		return Array.from({ length: divisions - 1 }, (_, i) => (i + 1) / divisions).flatMap((t) => {
+			const u = 1 - t;
+			const [ax, ay] = this.at(t, 0, u), [bx, by] = this.at(u, t, 0), [cx, cy] = this.at(0, u, t);
+			return [
+				{
+					text: value(0, t),
+					x: ax + 8,
+					y: ay + 4,
+					anchor: "start",
+					size: 10,
+					tone: "muted"
+				},
+				{
+					text: value(1, t),
+					x: bx - 6,
+					y: by - 4 * down + 4,
+					anchor: "end",
+					size: 10,
+					tone: "muted"
+				},
+				{
+					text: value(2, t),
+					x: cx - 3,
+					y: cy + (down > 0 ? 15 : -8),
+					anchor: "middle",
+					size: 10,
+					tone: "muted"
+				}
+			];
+		});
+	}
+	/** Corner names, placed clear of the triangle. */
+	corners(a, b, c) {
+		const down = this.inverted ? -1 : 1;
+		return [
+			{
+				text: a,
+				x: this.apex[0],
+				y: this.apex[1] - (down > 0 ? 8 : -18),
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: b,
+				x: this.left[0] - 7,
+				y: this.left[1] + 4,
+				anchor: "end",
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: c,
+				x: this.right[0] + 7,
+				y: this.right[1] + 4,
+				anchor: "start",
+				weight: 600,
+				tone: "ink"
+			}
+		];
+	}
+};
+export { Simplex };

package/dist/charts/scientific/SkewTChart.js

@@ -0,0 +1,257 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Atmosphere } from "./Atmosphere.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { range, scaleLinear, scaleLog, scalePow } from "d3";
+// src/charts/scientific/SkewTChart.ts
+var SoundingDiagram = /* @__PURE__ */ function(SoundingDiagram) {
+	SoundingDiagram["SkewT"] = "skew-t";
+	SoundingDiagram["Emagram"] = "emagram";
+	SoundingDiagram["Stuve"] = "stuve";
+	return SoundingDiagram;
+}({});
+var SoundingParcel = /* @__PURE__ */ function(SoundingParcel) {
+	SoundingParcel["Cape"] = "cape-shaded";
+	SoundingParcel["Trace"] = "parcel-trace";
+	SoundingParcel["None"] = "no-parcel";
+	return SoundingParcel;
+}({});
+var TOP = 100;
+var BASE = 1050;
+var BARB_ROOM = 46;
+/** Degrees of rightward lean at the top of a skewed diagram. */
+var LEAN = 62;
+/** Upper-air sounding on a thermodynamic diagram, for forecasting stability and storms. */
+var SkewTChart = class extends CartesianChart {
+	static meta = {
+		id: "skew-t",
+		name: "Skew-T log-P diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots a weather balloon sounding of temperature and dew point against pressure to diagnose atmospheric stability.",
+		tags: [
+			"meteorology",
+			"sounding",
+			"emagram",
+			"stuve",
+			"thermodynamic diagram"
+		],
+		sample: (seed) => ScientificSample.sounding(seed),
+		variants: {
+			diagram: Object.values(SoundingDiagram),
+			adiabats: [true, false],
+			mixingLines: [true, false],
+			parcel: Object.values(SoundingParcel),
+			barbs: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			pressure: "pressure",
+			temperature: "temperature",
+			dewpoint: "dewpoint",
+			u: "u",
+			v: "v",
+			grid: true,
+			diagram: "skew-t",
+			adiabats: true,
+			mixingLines: true,
+			parcel: "cape-shaded",
+			barbs: true
+		};
+	}
+	levels() {
+		const { data, pressure, temperature, dewpoint, u, v } = this.options;
+		return data.flatMap((row) => {
+			const [p, t, d] = [
+				row[pressure],
+				row[temperature],
+				row[dewpoint]
+			].map(Draft.number);
+			return p === null || t === null || d === null || p <= 0 ? [] : [{
+				pressure: p,
+				temperature: t,
+				dewpoint: d,
+				u: Draft.number(row[u]),
+				v: Draft.number(row[v])
+			}];
+		}).sort((a, b) => b.pressure - a.pressure);
+	}
+	scales(ctx) {
+		const { diagram, barbs } = this.options;
+		const right = ctx.plot.width - (barbs ? BARB_ROOM : 0);
+		return {
+			x: scaleLinear(diagram === "skew-t" ? [-40, 40] : [-100, 40], [0, right]),
+			y: diagram === "stuve" ? scalePow([BASE, TOP], [ctx.plot.height, 0]).exponent(.2854) : scaleLog([BASE, TOP], [ctx.plot.height, 0])
+		};
+	}
+	yTicks() {
+		return 10;
+	}
+	tickFormat(scale) {
+		if (scale.domain()[0] !== BASE) return super.tickFormat(scale);
+		return (value) => [
+			100,
+			200,
+			300,
+			500,
+			700,
+			1e3
+		].includes(+value) ? `${value}` : "";
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	plotMarks(ctx, { x, y }) {
+		const { diagram, adiabats, mixingLines, parcel, barbs } = this.options;
+		const { height } = ctx.plot;
+		const width = x.range()[1];
+		const levels = this.levels();
+		const lean = diagram === "skew-t" ? (x(LEAN) - x(0)) / height : 0;
+		const place = (temperature, pressure) => [x(temperature) + lean * (height - y(pressure)), y(pressure)];
+		const pressures = range(TOP, 1051, 25);
+		const curve = (points) => Draft.clipped(points, width, height);
+		Draft.paths(ctx, "isotherms", range(-110, 50, 10).map((t) => curve([place(t, BASE), place(t, TOP)])));
+		Draft.paths(ctx, "dry-adiabats", adiabats ? range(-30, 171, 20).map((theta) => curve(pressures.map((p) => place(Atmosphere.dryAdiabat(theta, p), p)))) : [], {
+			stroke: ctx.palette.diverging(.4),
+			opacity: .5
+		});
+		Draft.paths(ctx, "moist-adiabats", adiabats ? range(-8, 33, 8).map((t) => curve(Atmosphere.moistAscent(t, BASE, 200).map((d) => place(d.temperature, d.pressure)))) : [], {
+			stroke: ctx.palette.diverging(-.4),
+			opacity: .5,
+			dash: "5 3"
+		});
+		Draft.paths(ctx, "mixing-lines", mixingLines ? [
+			1,
+			2,
+			4,
+			8,
+			16
+		].map((w) => curve(range(600, 1051, 50).map((p) => place(Atmosphere.dewpoint(w, p), p)))) : [], {
+			stroke: ctx.theme.inkMuted,
+			opacity: .55,
+			dash: "1 3"
+		});
+		ctx.palette.color("Temperature");
+		ctx.palette.color("Dew point");
+		const trace = (key) => curve(levels.map((d) => place(d[key], d.pressure)));
+		if (parcel !== "no-parcel" && levels.length > 1) this.parcel(ctx, levels, place, width);
+		const profiles = ctx.marks("profiles", "path", levels.length ? ["temperature", "dewpoint"] : [], (key) => key).attr("fill", "none").attr("stroke-width", 2.5).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke", (key) => ctx.palette.color(key === "temperature" ? "Temperature" : "Dew point"));
+		ctx.set(profiles, { d: trace }, { d: trace });
+		ctx.drawOn(profiles);
+		const visible = levels.filter((d) => {
+			const [px] = place(d.temperature, d.pressure);
+			return px >= 0 && px <= width;
+		});
+		const targets = ctx.marks("levels", "circle", visible, (d) => d.pressure).attr("fill", ctx.palette.color("Temperature")).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(targets, {
+			cx: (d) => place(d.temperature, d.pressure)[0],
+			cy: (d) => y(d.pressure),
+			r: 3
+		}, {
+			cx: (d) => place(d.temperature, d.pressure)[0],
+			cy: (d) => y(d.pressure),
+			r: 0
+		}, 12);
+		ctx.hover(targets, (d) => ({
+			title: `${d.pressure} hPa`,
+			rows: [["Temperature", `${d.temperature} °C`], ["Dew point", `${d.dewpoint} °C`]]
+		}));
+		let room = Infinity;
+		const winds = !barbs ? [] : levels.filter((d) => {
+			if (d.u === null || d.v === null || room - y(d.pressure) < 22 || y(d.pressure) < 22 || y(d.pressure) > height - 10) return false;
+			room = y(d.pressure);
+			return true;
+		});
+		const mast = ctx.plot.width - 23;
+		Draft.rules(ctx, "barb-staff", barbs ? [{
+			x1: mast,
+			x2: mast,
+			y1: 0,
+			y2: height
+		}] : []);
+		const glyphs = ctx.marks("barbs", "path", winds, (d) => d.pressure).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.25).attr("stroke-linecap", "round");
+		const glyph = (d) => this.barb(d.u, d.v, mast, y(d.pressure));
+		ctx.set(glyphs, { d: glyph }, { d: glyph });
+		ctx.hover(glyphs, (d) => ({
+			title: `${d.pressure} hPa`,
+			rows: [["Wind", `${(Math.hypot(d.u, d.v) * 1.944).toFixed(0)} kt`]]
+		}));
+	}
+	parcel(ctx, levels, place, bound) {
+		const surface = levels[0], ceiling = Math.max(150, levels[levels.length - 1].pressure);
+		const lcl = Atmosphere.condensationLevel(surface.temperature, surface.dewpoint, surface.pressure);
+		const potential = (surface.temperature + 273.15) * (1e3 / surface.pressure) ** .2854 - 273.15;
+		const lifted = [...range(0, 13).map((i) => {
+			const pressure = surface.pressure + (lcl.pressure - surface.pressure) * i / 12;
+			return {
+				pressure,
+				temperature: Atmosphere.dryAdiabat(potential, pressure)
+			};
+		}), ...Atmosphere.moistAscent(lcl.temperature, lcl.pressure, ceiling, 40)];
+		const environment = (pressure) => {
+			const upper = levels.findIndex((d) => d.pressure <= pressure);
+			if (upper <= 0) return levels[Math.max(0, upper)].temperature;
+			const a = levels[upper - 1], b = levels[upper];
+			return a.temperature + (b.temperature - a.temperature) * Math.log(pressure / a.pressure) / Math.log(b.pressure / a.pressure);
+		};
+		Draft.paths(ctx, "parcel", [Draft.clipped(lifted.map((d) => place(d.temperature, d.pressure)), bound, ctx.plot.height)], {
+			stroke: ctx.palette.color("Parcel"),
+			width: 2,
+			dash: "6 3"
+		});
+		if (this.options.parcel !== "cape-shaded") return;
+		let cape = 0;
+		const runs = [];
+		let run = [];
+		lifted.forEach((d, i) => {
+			const excess = d.temperature - environment(d.pressure);
+			if (excess > 0) {
+				run.push(d);
+				const next = lifted[i + 1];
+				if (next) cape += Atmosphere.buoyancy(excess, d.pressure, next.pressure);
+			} else if (run.length) {
+				runs.push(run);
+				run = [];
+			}
+		});
+		if (run.length) runs.push(run);
+		const shapes = runs.filter((list) => list.length > 1).map((list) => Draft.polygon([...list.map((d) => place(d.temperature, d.pressure)), ...[...list].reverse().map((d) => place(environment(d.pressure), d.pressure))]));
+		Draft.paths(ctx, "cape", shapes, { stroke: "none" }, ctx.palette.diverging(.75)).attr("fill-opacity", .28);
+		Draft.captions(ctx, "cape-value", [{
+			text: `CAPE ${Math.round(cape)} J/kg`,
+			x: bound - 6,
+			y: 13,
+			anchor: "end",
+			tone: "ink",
+			weight: 600
+		}]);
+	}
+	/** Staff toward the wind's origin, with 50, 10 and 5 knot feathers. */
+	barb(u, v, x, y) {
+		const knots = Math.round(Math.hypot(u, v) * 1.944 / 5) * 5;
+		if (!knots) return `M${x - 2},${y}a2,2 0 1 0 4,0a2,2 0 1 0 -4,0`;
+		const speed = Math.hypot(u, v), dx = -u / speed, dy = v / speed, nx = -dy, ny = dx;
+		const staff = 20, feather = 7;
+		const tip = (distance) => [x + dx * distance, y + dy * distance];
+		const parts = [`M${x},${y}L${tip(staff).join(",")}`];
+		let rest = knots, at = staff;
+		for (; rest >= 50; rest -= 50, at -= 6) {
+			const [ax, ay] = tip(at), [bx, by] = tip(at - 5);
+			parts.push(`M${ax},${ay}L${ax + nx * feather},${ay + ny * feather}L${bx},${by}Z`);
+		}
+		for (; rest >= 10; rest -= 10, at -= 3.5) {
+			const [ax, ay] = tip(at);
+			parts.push(`M${ax},${ay}l${nx * feather + dx * 2.5},${ny * feather + dy * 2.5}`);
+		}
+		if (rest >= 5) {
+			const [ax, ay] = tip(at === staff ? at - 3.5 : at);
+			parts.push(`M${ax},${ay}l${nx * feather / 2 + dx * 1.25},${ny * feather / 2 + dy * 1.25}`);
+		}
+		return parts.join("");
+	}
+};
+export { SkewTChart, SoundingDiagram, SoundingParcel };