@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scientific/StiffDiagram.js

@@ -0,0 +1,271 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { axisBottom, curveCardinalClosed, group, line, max, mean, range, scaleLinear, scaleLog } from "d3";
+// src/charts/scientific/StiffDiagram.ts
+var StiffLayout = /* @__PURE__ */ function(StiffLayout) {
+	StiffLayout["Overlay"] = "overlay";
+	StiffLayout["Grid"] = "small-multiples";
+	StiffLayout["Stack"] = "stacked";
+	return StiffLayout;
+}({});
+var StiffForm = /* @__PURE__ */ function(StiffForm) {
+	StiffForm["Polygon"] = "polygon";
+	StiffForm["Ribbon"] = "ribbon";
+	StiffForm["Bars"] = "paired-bars";
+	return StiffForm;
+}({});
+var StiffUnit = /* @__PURE__ */ function(StiffUnit) {
+	StiffUnit["Groups"] = "group-means";
+	StiffUnit["Samples"] = "samples";
+	return StiffUnit;
+}({});
+/** Water-chemistry fingerprints: each sample becomes a polygon whose shape identifies its type at a glance. */
+var StiffDiagram = class extends Chart2D {
+	static meta = {
+		id: "stiff-diagram",
+		name: "Stiff diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws cations and anions of a water sample either side of a central axis, making a shape that fingerprints its chemistry.",
+		tags: [
+			"hydrochemistry",
+			"water quality",
+			"ions"
+		],
+		sample: (seed) => ScientificSample.waters(seed),
+		variants: {
+			layout: Object.values(StiffLayout),
+			form: Object.values(StiffForm),
+			unit: Object.values(StiffUnit),
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			rows: [4, 3]
+		},
+		valid: (values) => !(values.form === "paired-bars" && values.scale === ScaleKind.Log)
+	};
+	defaults() {
+		return {
+			cations: [
+				"Na",
+				"Ca",
+				"Mg",
+				"Fe"
+			],
+			anions: [
+				"Cl",
+				"HCO3",
+				"SO4",
+				"CO3"
+			],
+			rows: 4,
+			sample: "sample",
+			group: "group",
+			limit: 6,
+			layout: "overlay",
+			form: "polygon",
+			unit: "group-means",
+			scale: ScaleKind.Linear
+		};
+	}
+	plotMargin() {
+		return {
+			top: 10,
+			right: 16,
+			bottom: 26,
+			left: 16
+		};
+	}
+	waters(ctx) {
+		const { data, cations, anions, rows, sample, group: groupKey, limit, unit } = this.options;
+		const count = Math.min(rows, cations.length, anions.length);
+		const pick = (list, names) => names.slice(0, count).map((ion) => mean(list, (row) => Draft.number(row[ion]) ?? 0) ?? 0);
+		if (unit === "group-means") return [...group(data, (row) => String(row[groupKey] ?? "Water"))].slice(0, limit).map(([name, list]) => ({
+			name,
+			color: ctx.palette.color(name),
+			cations: pick(list, cations),
+			anions: pick(list, anions)
+		}));
+		return data.slice(0, limit).map((row) => {
+			const name = String(row[sample] ?? ""), family = String(row[groupKey] ?? "Water");
+			return {
+				name: name || family,
+				color: ctx.palette.color(family),
+				cations: pick([row], cations),
+				anions: pick([row], anions)
+			};
+		});
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		const { layout, scale, cations, anions } = this.options;
+		const { width, height } = ctx.plot;
+		const waters = this.waters(ctx);
+		const peak = Math.max(1, max(waters.flatMap((d) => [...d.cations, ...d.anions])) ?? 1);
+		const log = scale === ScaleKind.Log;
+		const count = waters[0]?.cations.length ?? 0;
+		const columns = layout === "small-multiples" ? Math.max(1, Math.ceil(Math.sqrt(waters.length * width / Math.max(1, height * 2)))) : 1;
+		const lines = layout === "overlay" ? 1 : layout === "small-multiples" ? Math.ceil(waters.length / columns) : Math.max(1, waters.length);
+		const gap = 14;
+		const cell = (i) => {
+			const w = (width - gap * (columns - 1)) / columns, h = (height - 10 * (lines - 1)) / lines;
+			const c = layout === "overlay" ? 0 : i % columns, r = layout === "overlay" ? 0 : Math.floor(i / columns);
+			return {
+				x: c * (w + gap),
+				y: r * (h + 10),
+				width: w,
+				height: h
+			};
+		};
+		const first = cell(0);
+		const side = first.width > 180 ? 44 : 0;
+		const half = Math.max(20, first.width / 2 - side);
+		const toX = log ? scaleLog([.05, peak], [0, half]).clamp(true) : scaleLinear([0, peak], [0, half]);
+		const panels = layout === "overlay" ? [{
+			water: null,
+			box: first
+		}] : waters.map((water, i) => ({
+			water,
+			box: cell(i)
+		}));
+		const spines = panels.map(({ box }) => ({
+			x1: box.x + box.width / 2,
+			x2: box.x + box.width / 2,
+			y1: box.y,
+			y2: box.y + box.height
+		}));
+		Draft.rules(ctx, "spines", spines, { stroke: ctx.theme.axis });
+		const head = layout === "small-multiples" ? 14 : 0;
+		const rowY = (box, i) => box.y + head + (i + .5) * (box.height - head) / Math.max(1, count);
+		Draft.rules(ctx, "rows", panels.flatMap(({ box }) => range(count).map((i) => ({
+			x1: box.x,
+			x2: box.x + box.width,
+			y1: rowY(box, i),
+			y2: rowY(box, i)
+		}))));
+		const rowRoom = (first.height - head) / Math.max(1, count);
+		const ionLabels = side && rowRoom >= 13 && layout !== "stacked" ? panels.flatMap(({ box }) => range(count).flatMap((i) => [{
+			text: cations[i],
+			x: box.x + 2,
+			y: rowY(box, i) - 3,
+			anchor: "start",
+			size: 10,
+			tone: "muted"
+		}, {
+			text: anions[i],
+			x: box.x + box.width - 2,
+			y: rowY(box, i) - 3,
+			anchor: "end",
+			size: 10,
+			tone: "muted"
+		}])) : [];
+		Draft.captions(ctx, "ions", ionLabels);
+		const names = layout === "overlay" ? [] : panels.map(({ water, box }) => layout === "small-multiples" ? {
+			text: water.name,
+			x: box.x + box.width / 2,
+			y: box.y + 10,
+			size: 10,
+			tone: "ink",
+			weight: 600
+		} : {
+			text: water.name,
+			x: box.x,
+			y: box.y + box.height / 2 + 4,
+			anchor: "start",
+			size: 10,
+			tone: "ink",
+			weight: 600
+		});
+		Draft.captions(ctx, "names", names);
+		if (layout === "overlay") {
+			const centre = first.width / 2;
+			const ticks = log ? [
+				.1,
+				1,
+				10
+			].filter((tick) => tick <= peak) : toX.ticks(3).filter((tick) => tick > 0);
+			const mirrored = scaleLinear([-1, 1], [centre - half, centre + half]);
+			const axis = axisBottom(mirrored).tickValues([...ticks.map((tick) => -toX(tick) / half), ...ticks.map((tick) => toX(tick) / half)]).tickSize(4).tickFormat((value) => {
+				const magnitude = Math.abs(+value) * half;
+				return `${ticks.reduce((best, tick) => Math.abs(toX(tick) - magnitude) < Math.abs(toX(best) - magnitude) ? tick : best, ticks[0])}`;
+			});
+			Draft.axis(ctx, "axis-meq", axis, `translate(0,${height})`);
+			Draft.captions(ctx, "unit", [{
+				text: "meq/L",
+				x: width,
+				y: height + 16,
+				anchor: "end",
+				size: 10,
+				tone: "muted"
+			}]);
+		} else {
+			const unit = log ? 10 : toX.ticks(2).slice(-1)[0] ?? 1;
+			const bar = log ? half / Math.log10(peak / .05) : toX(unit);
+			Draft.rules(ctx, "scale-bar", [{
+				x1: 0,
+				x2: bar,
+				y1: height + 12,
+				y2: height + 12
+			}], {
+				stroke: ctx.theme.inkSecondary,
+				width: 2
+			});
+			Draft.captions(ctx, "scale-name", [{
+				text: log ? "×10 meq/L" : `${unit} meq/L`,
+				x: bar + 6,
+				y: height + 16,
+				anchor: "start",
+				size: 10,
+				tone: "muted"
+			}]);
+		}
+		const box = (water) => layout === "overlay" ? first : cell(waters.indexOf(water));
+		const vertices = (water) => {
+			const panel = box(water), mid = panel.x + panel.width / 2;
+			return [...water.cations.map((v, i) => [mid - toX(v), rowY(panel, i)]), ...[...water.anions].reverse().map((v, i) => [mid + toX(v), rowY(panel, water.anions.length - 1 - i)])];
+		};
+		const tooltip = (d) => ({
+			title: d.name,
+			color: d.color,
+			rows: [...d.cations.map((v, i) => [cations[i], v.toFixed(2)]), ...d.anions.map((v, i) => [anions[i], v.toFixed(2)])]
+		});
+		if (this.options.form === "paired-bars") {
+			const thick = Math.max(3, Math.min(layout === "overlay" ? 40 : 12, rowRoom * .66));
+			const bars = waters.flatMap((water) => range(count).flatMap((i) => [{
+				water,
+				i,
+				side: -1,
+				value: water.cations[i]
+			}, {
+				water,
+				i,
+				side: 1,
+				value: water.anions[i]
+			}]));
+			const layer = layout === "overlay" ? Math.max(1, waters.length) : 1;
+			const shift = (d) => layout === "overlay" ? (waters.indexOf(d.water) - (layer - 1) / 2) * thick * 1.15 / layer : 0;
+			const mid = (d) => box(d.water).x + box(d.water).width / 2;
+			const rects = ctx.marks("bars", "rect", bars, (d) => `${d.water.name}/${d.i}/${d.side}`).attr("fill", (d) => d.water.color).attr("rx", 1.5);
+			const final = {
+				x: (d) => d.side < 0 ? mid(d) - toX(d.value) - 1 : mid(d) + 1,
+				width: (d) => Math.max(.5, toX(d.value)),
+				y: (d) => rowY(box(d.water), d.i) - thick / (2 * layer) + shift(d),
+				height: Math.max(1.5, thick / layer - 1)
+			};
+			ctx.set(rects, final, {
+				...final,
+				x: mid,
+				width: 0
+			}, 6);
+			ctx.hover(rects, (d) => tooltip(d.water));
+			return;
+		}
+		const ribbon = line().curve(curveCardinalClosed.tension(.25));
+		const shape = (d) => this.options.form === "ribbon" ? ribbon(vertices(d)) ?? "" : Draft.polygon(vertices(d));
+		const shapes = ctx.marks("waters", "path", waters, (d) => d.name).attr("fill", (d) => d.color).attr("fill-opacity", layout === "overlay" ? .28 : .8).attr("stroke", (d) => d.color).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(shapes, { d: shape }, { d: shape });
+		ctx.hover(shapes, tooltip);
+	}
+};
+export { StiffDiagram, StiffForm, StiffLayout, StiffUnit };

package/dist/charts/scientific/TaylorDiagram.js

@@ -0,0 +1,253 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { group, max, range, scaleLinear } from "d3";
+// src/charts/scientific/TaylorDiagram.ts
+var TaylorSpan = /* @__PURE__ */ function(TaylorSpan) {
+	TaylorSpan["Quadrant"] = "positive-quadrant";
+	TaylorSpan["Half"] = "full-half-circle";
+	return TaylorSpan;
+}({});
+var TaylorMark = /* @__PURE__ */ function(TaylorMark) {
+	TaylorMark["Dots"] = "dots";
+	TaylorMark["Numbered"] = "numbered";
+	TaylorMark["Arrows"] = "run-arrows";
+	return TaylorMark;
+}({});
+var LABELLED = [
+	0,
+	.2,
+	.4,
+	.6,
+	.8,
+	.9,
+	.95,
+	.99,
+	1
+];
+/** Summarises model skill in one figure: correlation, spread and centred error against a reference. */
+var TaylorDiagram = class extends Chart2D {
+	static meta = {
+		id: "taylor-diagram",
+		name: "Taylor diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares models with observations by correlation, standard deviation and centred RMS error on a single polar plot.",
+		tags: [
+			"climate models",
+			"model evaluation",
+			"skill"
+		],
+		sample: (seed) => ScientificSample.skill(seed),
+		variants: {
+			span: Object.values(TaylorSpan),
+			mark: Object.values(TaylorMark),
+			normalized: [true, false],
+			rmsArcs: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			model: "model",
+			run: "run",
+			correlation: "correlation",
+			deviation: "deviation",
+			referenceName: "Observed",
+			span: "positive-quadrant",
+			mark: "dots",
+			normalized: true,
+			rmsArcs: true
+		};
+	}
+	plotMargin() {
+		return {
+			top: 20,
+			right: 38,
+			bottom: 24,
+			left: 38
+		};
+	}
+	skills() {
+		const { data, model, run, correlation, deviation } = this.options;
+		return data.flatMap((row) => {
+			const r = Draft.number(row[correlation]), s = Draft.number(row[deviation]);
+			return r === null || s === null || s < 0 ? [] : [{
+				model: String(row[model] ?? ""),
+				run: String(row[run] ?? ""),
+				correlation: Math.max(-1, Math.min(1, r)),
+				deviation: s
+			}];
+		});
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		const { span, mark, normalized, rmsArcs, reference, referenceName } = this.options;
+		const { width, height } = ctx.plot;
+		const half = span === "full-half-circle";
+		const rows = this.skills();
+		const named = rows.find((d) => d.model === referenceName);
+		const scaleBy = reference || named?.deviation || 1;
+		const skills = rows.filter((d) => d !== named).map((d) => ({
+			...d,
+			deviation: normalized ? d.deviation / scaleBy : d.deviation
+		}));
+		const anchor = normalized ? 1 : scaleBy;
+		for (const d of skills) ctx.palette.color(d.run);
+		const size = half ? Math.min(width / 2, height) : Math.min(width, height);
+		const origin = [half ? width / 2 : (width - size) / 2, (height + size) / 2];
+		const limit = scaleLinear([0, Math.max(anchor * 1.5, (max(skills, (d) => d.deviation) ?? 0) * 1.1)], [0, size]).nice(5);
+		const top = limit.domain()[1], radius = limit(top);
+		const polar = (r, c) => [origin[0] + limit(r) * c, origin[1] - limit(r) * Math.sqrt(Math.max(0, 1 - c * c))];
+		const place = (d) => polar(d.deviation, d.correlation);
+		const reachAngle = half ? Math.PI : Math.PI / 2;
+		const arcAt = (r) => Draft.polyline(range(0, 61).map((i) => polar(r, Math.cos(reachAngle * i / 60))));
+		const ticks = limit.ticks(5).filter((tick) => tick > 0);
+		Draft.paths(ctx, "deviation-arcs", ticks.filter((tick) => tick < top).map(arcAt));
+		const spokes = [...LABELLED.slice(1, -1), ...half ? LABELLED.slice(0, -2).map((c) => -c) : []];
+		Draft.rules(ctx, "correlation-spokes", [...new Set(spokes)].map((c) => {
+			const [x2, y2] = polar(top, c);
+			return {
+				x1: origin[0],
+				y1: origin[1],
+				x2,
+				y2
+			};
+		}));
+		const rms = rmsArcs ? limit.ticks(4).filter((r) => r > 0 && r < top).map((r) => {
+			const [cx] = polar(anchor, 1);
+			const runs = [[]];
+			for (const angle of range(0, 181, 3)) {
+				const x = cx + limit(r) * Math.cos(angle * Math.PI / 180), y = origin[1] - limit(r) * Math.sin(angle * Math.PI / 180);
+				if (Math.hypot(x - origin[0], y - origin[1]) <= radius && (half || x >= origin[0])) runs[runs.length - 1].push([x, y]);
+				else if (runs[runs.length - 1].length) runs.push([]);
+			}
+			return runs.filter((run) => run.length > 1).map((run) => Draft.polyline(run)).join("");
+		}).filter(Boolean) : [];
+		Draft.paths(ctx, "rms-arcs", rms, {
+			stroke: ctx.theme.inkMuted,
+			dash: "2 4",
+			opacity: .8
+		});
+		Draft.paths(ctx, "frame", [`${arcAt(top)}L${origin[0]},${origin[1]}Z`], {
+			stroke: ctx.theme.axis,
+			width: 1.25
+		});
+		const ring = [.../* @__PURE__ */ new Set([...LABELLED, ...half ? LABELLED.slice(0, -2).map((c) => -c) : []])].map((c) => {
+			const [x, y] = polar(top * 1.045, c);
+			return {
+				text: `${c}`,
+				x,
+				y: y + 4,
+				size: 10,
+				tone: "muted",
+				anchor: x > origin[0] + 4 ? "start" : x < origin[0] - 4 ? "end" : "middle"
+			};
+		});
+		const scale = ticks.map((tick) => ({
+			text: `${tick}`,
+			x: polar(tick, 1)[0],
+			y: origin[1] + 14,
+			size: 10,
+			tone: "muted"
+		}));
+		const left = half ? ticks.map((tick) => ({
+			text: `${tick}`,
+			x: polar(tick, -1)[0],
+			y: origin[1] + 14,
+			size: 10,
+			tone: "muted"
+		})) : [];
+		const gutter = 36;
+		const fitted = Draft.declutter(ring.map((d) => ({
+			...d,
+			x: d.x + gutter,
+			y: d.y + 18
+		})), width + 72, height + 18).map((d) => ({
+			...d,
+			x: d.x - gutter,
+			y: d.y - 18
+		}));
+		Draft.captions(ctx, "scale", [
+			...fitted,
+			...scale,
+			...left
+		]);
+		Draft.captions(ctx, "titles", [{
+			text: "Correlation",
+			x: half ? origin[0] : polar(top * 1.1, Math.SQRT1_2)[0] + 8,
+			y: half ? origin[1] - radius + 26 : polar(top * 1.1, Math.SQRT1_2)[1],
+			anchor: half ? "middle" : "start",
+			size: 10.5,
+			tone: "secondary"
+		}]);
+		const [rx, ry] = polar(anchor, 1);
+		const target = ctx.marks("reference", "path", [anchor], () => "reference").attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("d", "M0,-7L6.6,-2.2L4.1,5.7H-4.1L-6.6,-2.2Z");
+		ctx.set(target, { transform: `translate(${rx},${ry - 1})` }, { transform: `translate(${rx},${ry - 1})` });
+		ctx.hover(target, (d) => ({
+			title: referenceName ?? "Reference",
+			rows: [["Deviation", d.toFixed(2)]]
+		}));
+		const tooltip = (d) => ({
+			title: d.model,
+			color: ctx.palette.color(d.run),
+			rows: [
+				["Run", d.run],
+				["Correlation", d.correlation.toFixed(3)],
+				["Deviation", d.deviation.toFixed(2)]
+			]
+		});
+		if (mark === "run-arrows") {
+			const pairs = [...group(skills, (d) => d.model)].flatMap(([model, list]) => list.length > 1 ? [{
+				model,
+				from: list[0],
+				to: list[list.length - 1]
+			}] : []);
+			const arrows = ctx.marks("arrows", "path", pairs, (d) => d.model).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.to.run)).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+			const shape = ({ from, to }) => {
+				const [ax, ay] = place(from), [bx, by] = place(to), angle = Math.atan2(by - ay, bx - ax);
+				const wing = (turn) => `${bx - 8 * Math.cos(angle + turn)},${by - 8 * Math.sin(angle + turn)}`;
+				return `M${ax},${ay}L${bx},${by}M${wing(.45)}L${bx},${by}L${wing(-.45)}`;
+			};
+			ctx.set(arrows, { d: shape }, { d: shape }, 20);
+			ctx.hover(arrows, (d) => tooltip(d.to));
+			const heads = pairs.map((d) => ({ d: d.from }));
+			const tails = ctx.marks("points", "circle", heads, (_, i) => i).attr("fill", (d) => ctx.palette.color(d.d.run)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+			ctx.set(tails, {
+				cx: (d) => place(d.d)[0],
+				cy: (d) => place(d.d)[1],
+				r: 4
+			}, {
+				cx: (d) => place(d.d)[0],
+				cy: (d) => place(d.d)[1],
+				r: 0
+			});
+			ctx.hover(tails, (d) => tooltip(d.d));
+			return;
+		}
+		const numbered = mark === "numbered";
+		const dots = ctx.marks("points", "circle", skills, (d) => `${d.model}/${d.run}`).attr("fill", (d) => ctx.palette.color(d.run)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => place(d)[0],
+			cy: (d) => place(d)[1],
+			r: numbered ? 8 : 4.5
+		}, {
+			cx: (d) => place(d)[0],
+			cy: (d) => place(d)[1],
+			r: 0
+		}, 15);
+		ctx.hover(dots, tooltip);
+		if (numbered) {
+			const seats = [];
+			const clear = skills.filter((d) => {
+				const [x, y] = place(d);
+				if (seats.some(([a, b]) => Math.abs(a - x) < 12 && Math.abs(b - y) < 11)) return false;
+				seats.push([x, y]);
+				return true;
+			});
+			ctx.marks("numbers", "text", clear, (d) => `${d.model}/${d.run}`).attr("text-anchor", "middle").attr("font-size", 9).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("x", (d) => place(d)[0]).attr("y", (d) => place(d)[1] + 3).attr("fill", (d) => ctx.palette.inkOn(ctx.palette.color(d.run))).style("pointer-events", "none").text((d) => d.model.replace(/\D/g, "") || d.model.slice(0, 2));
+		}
+	}
+};
+export { TaylorDiagram, TaylorMark, TaylorSpan };