@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scientific/PhaseDiagram.js

@@ -0,0 +1,392 @@
+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 { line, polygonCentroid, scaleLinear, scaleLog } from "d3";
+// src/charts/scientific/PhaseDiagram.ts
+var PhaseDiagramSystem = /* @__PURE__ */ function(PhaseDiagramSystem) {
+	PhaseDiagramSystem["Unary"] = "unary-pt";
+	PhaseDiagramSystem["Eutectic"] = "binary-eutectic";
+	PhaseDiagramSystem["Lens"] = "solid-solution-lens";
+	return PhaseDiagramSystem;
+}({});
+var PhaseBoundary = /* @__PURE__ */ function(PhaseBoundary) {
+	PhaseBoundary["Sublimation"] = "sublimation";
+	PhaseBoundary["Fusion"] = "fusion";
+	PhaseBoundary["Vaporization"] = "vaporization";
+	PhaseBoundary["LiquidusA"] = "liquidus-a";
+	PhaseBoundary["LiquidusB"] = "liquidus-b";
+	PhaseBoundary["Solidus"] = "solidus";
+	PhaseBoundary["LensLiquidus"] = "lens-liquidus";
+	PhaseBoundary["LensSolidus"] = "lens-solidus";
+	return PhaseBoundary;
+}({});
+var KEYS = {
+	["unary-pt"]: [
+		"sublimation",
+		"fusion",
+		"vaporization"
+	],
+	["binary-eutectic"]: [
+		"liquidus-a",
+		"liquidus-b",
+		"solidus"
+	],
+	["solid-solution-lens"]: ["lens-liquidus", "lens-solidus"]
+};
+/** Stable phases of a material across temperature, pressure or composition, from its boundary curves. */
+var PhaseDiagram = class extends CartesianChart {
+	static meta = {
+		id: "phase-diagram",
+		name: "Phase diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws the fields where solid, liquid and gas are stable, for pure substances and binary alloys.",
+		tags: [
+			"thermodynamics",
+			"materials",
+			"eutectic",
+			"triple point"
+		],
+		sample: (seed) => ScientificSample.phases(seed),
+		variants: {
+			system: Object.values(PhaseDiagramSystem),
+			scale: [ScaleKind.Log, ScaleKind.Linear],
+			regions: [true, false],
+			landmarks: [true, false],
+			tieLine: [false, true],
+			names: [true, false]
+		},
+		valid: (values) => {
+			if (values.system === "unary-pt") return values.tieLine === false;
+			return values.scale === ScaleKind.Log && (values.system === "binary-eutectic" || values.landmarks === true);
+		}
+	};
+	defaults() {
+		return {
+			boundary: "boundary",
+			x: "x",
+			y: "y",
+			grid: true,
+			system: "unary-pt",
+			scale: ScaleKind.Log,
+			regions: true,
+			landmarks: true,
+			tieLine: false,
+			names: true
+		};
+	}
+	curves() {
+		const { data, boundary, x, y, system } = this.options;
+		const keys = KEYS[system];
+		const found = new Map(keys.map((key) => [key, []]));
+		for (const row of data) {
+			const list = found.get(row[boundary]), a = Draft.number(row[x]), b = Draft.number(row[y]);
+			if (list && a !== null && b !== null && (!this.logarithmic || b > 0)) list.push([a, b]);
+		}
+		for (const [key, list] of found) list.sort(key === "fusion" ? (a, b) => a[1] - b[1] : (a, b) => a[0] - b[0]);
+		return found;
+	}
+	get logarithmic() {
+		return this.options.system === "unary-pt" && this.options.scale === ScaleKind.Log;
+	}
+	scales(ctx) {
+		const { system } = this.options;
+		const points = [...this.curves().values()].flat();
+		const xs = points.map((d) => d[0]), ys = points.map((d) => d[1]).filter((v) => !this.logarithmic || v > 0);
+		const [left, right] = [Math.min(...xs, Infinity), Math.max(...xs, -Infinity)];
+		const [low, high] = [Math.min(...ys, Infinity), Math.max(...ys, -Infinity)];
+		if (!points.length) return {
+			x: scaleLinear([0, 1], [0, ctx.plot.width]),
+			y: scaleLinear([0, 1], [ctx.plot.height, 0])
+		};
+		return {
+			x: system === "unary-pt" ? scaleLinear([left - (right - left) * .04, right + (right - left) * .22], [0, ctx.plot.width]) : scaleLinear([left, right], [0, ctx.plot.width]),
+			y: this.logarithmic ? scaleLog([low / 3, high * 3], [ctx.plot.height, 0]) : system === "unary-pt" ? scaleLinear([0, high * 1.12], [ctx.plot.height, 0]) : scaleLinear([low - (high - low) * .3, high + (high - low) * .18], [ctx.plot.height, 0])
+		};
+	}
+	tickFormat(scale) {
+		if (!scale.base) return super.tickFormat(scale);
+		return (value) => {
+			const power = Math.log10(+value);
+			return Number.isInteger(Math.round(power * 1e6) / 1e6) && Math.round(power) % 2 === 0 ? `10${String(Math.round(power)).replace(/-/g, "⁻").replace(/\d/g, (d) => "⁰¹²³⁴⁵⁶⁷⁸⁹"[+d])}` : "";
+		};
+	}
+	layout(curves, axes, width, height) {
+		const { system } = this.options;
+		const px = ([a, b]) => [axes.x(a), Math.max(0, Math.min(height, axes.y(b)))];
+		const take = (key) => (curves.get(key) ?? []).map(px);
+		if (system === "unary-pt") {
+			const sub = take("sublimation"), fus = take("fusion"), vap = take("vaporization");
+			if (!sub.length || !fus.length || !vap.length) return {
+				regions: [],
+				landmarks: [],
+				dashes: []
+			};
+			const critical = vap[vap.length - 1], triple = vap[0], ceiling = fus[fus.length - 1];
+			return {
+				regions: [
+					{
+						name: "Solid",
+						shape: [
+							[0, height],
+							[sub[0][0], height],
+							...sub,
+							...fus,
+							[ceiling[0], 0],
+							[0, 0]
+						]
+					},
+					{
+						name: "Liquid",
+						shape: [
+							...vap,
+							[critical[0], 0],
+							[ceiling[0], 0],
+							...[...fus].reverse()
+						]
+					},
+					{
+						name: "Gas",
+						shape: [
+							[sub[0][0], height],
+							...sub,
+							...vap,
+							[width, critical[1]],
+							[width, height]
+						]
+					},
+					{
+						name: "Supercritical fluid",
+						shape: [
+							critical,
+							[critical[0], 0],
+							[width, 0],
+							[width, critical[1]]
+						]
+					}
+				],
+				landmarks: [{
+					name: "Triple point",
+					at: triple
+				}, {
+					name: "Critical point",
+					at: critical
+				}],
+				dashes: [{
+					x1: critical[0],
+					y1: critical[1],
+					x2: critical[0],
+					y2: 0
+				}, {
+					x1: critical[0],
+					y1: critical[1],
+					x2: width,
+					y2: critical[1]
+				}]
+			};
+		}
+		if (system === "binary-eutectic") {
+			const a = take("liquidus-a"), b = take("liquidus-b"), solidus = take("solidus");
+			if (!a.length || !b.length) return {
+				regions: [],
+				landmarks: [],
+				dashes: []
+			};
+			const eutectic = a[a.length - 1], floor = solidus[0]?.[1] ?? eutectic[1];
+			return {
+				regions: [
+					{
+						name: "Liquid",
+						shape: [
+							[0, 0],
+							...a,
+							...b,
+							[width, 0]
+						]
+					},
+					{
+						name: "L + α",
+						shape: [...a, [a[0][0], floor]]
+					},
+					{
+						name: "L + β",
+						shape: [...b, [b[b.length - 1][0], floor]]
+					},
+					{
+						name: "α + β",
+						shape: [
+							[0, floor],
+							[width, floor],
+							[width, height],
+							[0, height]
+						]
+					}
+				],
+				landmarks: [{
+					name: "Eutectic",
+					at: eutectic
+				}],
+				dashes: []
+			};
+		}
+		const liquidus = take("lens-liquidus"), solidus = take("lens-solidus");
+		if (!liquidus.length || !solidus.length) return {
+			regions: [],
+			landmarks: [],
+			dashes: []
+		};
+		return {
+			regions: [
+				{
+					name: "Liquid",
+					shape: [
+						[0, 0],
+						...liquidus,
+						[width, 0]
+					]
+				},
+				{
+					name: "L + S",
+					shape: [...liquidus, ...[...solidus].reverse()]
+				},
+				{
+					name: "Solid solution",
+					shape: [
+						...solidus,
+						[width, height],
+						[0, height]
+					]
+				}
+			],
+			landmarks: [],
+			dashes: []
+		};
+	}
+	tie(curves, axes) {
+		const { system } = this.options;
+		const crossing = (list, value) => {
+			for (let i = 1; i < list.length; i++) {
+				const [ax, ay] = list[i - 1], [bx, by] = list[i];
+				if ((ay - value) * (by - value) <= 0 && ay !== by) return ax + (bx - ax) * (value - ay) / (by - ay);
+			}
+			return null;
+		};
+		const pair = system === "binary-eutectic" ? curves.get("liquidus-a") : curves.get("lens-liquidus");
+		const lower = system === "binary-eutectic" ? null : curves.get("lens-solidus");
+		if (!pair.length || lower && !lower.length) return null;
+		const first = pair[0][1], last = pair[pair.length - 1][1], level = lower ? (first + last) / 2 : first * .45 + last * .55;
+		const hot = crossing(pair, level), cold = lower ? crossing(lower, level) : pair[0][0];
+		if (hot === null || cold === null) return null;
+		return {
+			x1: axes.x(Math.min(hot, cold)),
+			x2: axes.x(Math.max(hot, cold)),
+			y1: axes.y(level),
+			y2: axes.y(level)
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	plotMarks(ctx, axes) {
+		const { regions, landmarks, tieLine, names, system, xLabel, yLabel } = this.options;
+		const { width, height } = ctx.plot;
+		const curves = this.curves();
+		const plan = this.layout(curves, axes, width, height);
+		const fields = ctx.marks("regions", "path", regions ? plan.regions : [], (d) => d.name).attr("fill", (d) => ctx.palette.color(d.name)).attr("fill-opacity", .16);
+		ctx.set(fields, { d: (d) => Draft.polygon(d.shape) }, { d: (d) => Draft.polygon(d.shape) });
+		ctx.hover(fields, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.name)
+		}));
+		Draft.rules(ctx, "limits", plan.dashes, {
+			stroke: ctx.theme.inkMuted,
+			dash: "4 4"
+		});
+		const trace = line().x((d) => axes.x(d[0])).y((d) => Math.max(0, Math.min(height, axes.y(d[1]))));
+		const lines = ctx.marks("boundaries", "path", [...curves].filter(([, list]) => list.length), ([key]) => key).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: ([, list]) => trace(list) ?? "" }, { d: ([, list]) => trace(list) ?? "" });
+		ctx.drawOn(lines);
+		ctx.hover(lines, ([key, list]) => ({
+			title: key.replace("-", " "),
+			rows: [["Points", list.length]]
+		}));
+		const tie = tieLine && system !== "unary-pt" ? this.tie(curves, axes) : null;
+		Draft.rules(ctx, "tie-line", tie ? [tie] : [], {
+			stroke: ctx.theme.inkSecondary,
+			width: 1.5,
+			dash: "6 3"
+		});
+		const ends = tie ? [
+			[tie.x1, tie.y1],
+			[tie.x2, tie.y2],
+			[(tie.x1 + tie.x2) / 2, tie.y1]
+		] : [];
+		const tips = ctx.marks("tie-ends", "circle", ends, (_, i) => i).attr("fill", ctx.theme.surface).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2);
+		ctx.set(tips, {
+			cx: (d) => d[0],
+			cy: (d) => d[1],
+			r: 4
+		}, {
+			cx: (d) => d[0],
+			cy: (d) => d[1],
+			r: 0
+		});
+		const shown = landmarks ? plan.landmarks : [];
+		const dots = ctx.marks("landmarks", "circle", shown, (d) => d.name).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: 5
+		}, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: 0
+		});
+		ctx.hover(dots, (d) => ({ title: d.name }));
+		const captions = [...shown.map((d) => {
+			const flip = d.at[0] > width * .6;
+			return {
+				text: d.name,
+				x: d.at[0] + (flip ? -8 : 8),
+				y: d.at[1] + 14,
+				anchor: flip ? "end" : "start",
+				size: 10.5,
+				tone: "ink"
+			};
+		}), ...names ? plan.regions.map((d) => {
+			const [x, y] = polygonCentroid(d.shape);
+			return {
+				text: d.name,
+				x,
+				y: y + 4,
+				size: 12,
+				tone: "ink",
+				weight: 600
+			};
+		}) : []];
+		Draft.captions(ctx, "names", Draft.declutter(captions, width, height)).attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke");
+		const unary = system === "unary-pt";
+		Draft.captions(ctx, "units", [...yLabel ? [] : [{
+			text: unary ? "kPa" : "°C",
+			x: 6,
+			y: 12,
+			anchor: "start",
+			size: 10,
+			tone: "muted"
+		}], ...xLabel ? [] : [{
+			text: unary ? "°C" : "% B",
+			x: width - 6,
+			y: height - 6,
+			anchor: "end",
+			size: 10,
+			tone: "muted"
+		}]]);
+	}
+	legendItems() {
+		return [];
+	}
+};
+export { PhaseBoundary, PhaseDiagram, PhaseDiagramSystem };

package/dist/charts/scientific/PiperDiagram.js

@@ -0,0 +1,286 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { Simplex } from "./Simplex.js";
+import { scaleSqrt, symbol } from "d3";
+// src/charts/scientific/PiperDiagram.ts
+var PiperPanels = /* @__PURE__ */ function(PiperPanels) {
+	PiperPanels["Full"] = "full";
+	PiperPanels["Ternaries"] = "ternaries";
+	PiperPanels["Diamond"] = "diamond";
+	return PiperPanels;
+}({});
+var PiperSizing = /* @__PURE__ */ function(PiperSizing) {
+	PiperSizing["Fixed"] = "fixed";
+	PiperSizing["Tds"] = "tds";
+	return PiperSizing;
+}({});
+var RISE = Math.sqrt(3) / 2;
+var GAP = .18;
+/** Compares major-ion water chemistry on paired cation and anion triangles projected into a diamond. */
+var PiperDiagram = class extends Chart2D {
+	static meta = {
+		id: "piper-diagram",
+		name: "Piper diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Classifies groundwater by plotting major cations and anions on two triangles and their projection in a diamond.",
+		tags: [
+			"hydrochemistry",
+			"trilinear",
+			"water facies"
+		],
+		sample: (seed) => ScientificSample.waters(seed),
+		variants: {
+			panels: Object.values(PiperPanels),
+			symbolKind: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Triangle,
+				SymbolKind.Diamond
+			],
+			sizing: Object.values(PiperSizing),
+			facies: [true, false],
+			ties: [false, true]
+		},
+		valid: (values) => {
+			if (values.panels === "ternaries" && values.facies === false) return false;
+			return values.panels === "full" || values.ties === false;
+		}
+	};
+	defaults() {
+		return {
+			calcium: "Ca",
+			magnesium: "Mg",
+			sodium: "Na",
+			potassium: "K",
+			bicarbonate: "HCO3",
+			carbonate: "CO3",
+			sulfate: "SO4",
+			chloride: "Cl",
+			group: "group",
+			sample: "sample",
+			tds: "tds",
+			panels: "full",
+			symbolKind: SymbolKind.Circle,
+			sizing: "fixed",
+			facies: true,
+			ties: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 14,
+			right: 16,
+			bottom: 22,
+			left: 16
+		};
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		const { panels, facies, ties, symbolKind, sizing, data, group, sample, tds, calcium, magnesium, sodium, potassium, bicarbonate, carbonate, sulfate, chloride } = this.options;
+		const { width, height } = ctx.plot;
+		const unitH = panels === "ternaries" ? RISE : panels === "diamond" ? 2 * RISE : 2 * RISE + RISE * GAP;
+		const unitW = panels === "diamond" ? 1 : 2.18;
+		const s = Math.min(width / unitW, height / unitH);
+		const offsetX = (width - unitW * s) / 2 + (panels === "diamond" ? -(1.18 * s) / 2 : 0);
+		const baseY = (height + unitH * s) / 2 + (panels === "diamond" ? RISE * GAP * s : 0);
+		const cations = new Simplex([offsetX + s / 2, baseY - RISE * s], [offsetX, baseY], [offsetX + s, baseY]);
+		const anions = new Simplex([offsetX + s * 1.68, baseY - RISE * s], [offsetX + s * 1.18, baseY], [offsetX + s * 2.18, baseY]);
+		const gap = GAP * s;
+		const south = [offsetX + s + gap / 2, baseY - RISE * gap];
+		const east = [south[0] + s / 2, south[1] - RISE * s], west = [south[0] - s / 2, south[1] - RISE * s], north = [south[0], south[1] - 2 * RISE * s];
+		const project = ([px, py], [qx, qy]) => {
+			const t = qx - px + (py - qy) / Math.sqrt(3);
+			return [px + t / 2, py - t * RISE];
+		};
+		const waters = data.flatMap((row) => {
+			const read = (key) => Draft.number(row[key]) ?? 0;
+			const ca = read(calcium), mg = read(magnesium), na = read(sodium) + read(potassium), hco = read(bicarbonate) + read(carbonate), so = read(sulfate), cl = read(chloride);
+			if (ca + mg + na <= 0 || hco + so + cl <= 0) return [];
+			const cation = cations.at(mg, ca, na), anion = anions.at(so, hco, cl);
+			return [{
+				row,
+				name: String(row[sample] ?? ""),
+				group: String(row[group] ?? "Water"),
+				tds: Draft.number(row[tds]) ?? 0,
+				cation,
+				anion,
+				diamond: project(cation, anion)
+			}];
+		});
+		const showTriangles = panels !== "diamond", showDiamond = panels !== "ternaries";
+		const lines = [...showTriangles ? [...cations.grid(5), ...anions.grid(5)] : [], ...showDiamond ? this.diamondGrid(west, north, east, south) : []];
+		Draft.rules(ctx, "grid", lines);
+		Draft.paths(ctx, "outline", [...showTriangles ? [cations.outline, anions.outline] : [], ...showDiamond ? [Draft.polygon([
+			south,
+			east,
+			north,
+			west
+		])] : []], { stroke: ctx.theme.axis });
+		const centre = [(west[0] + east[0]) / 2, (north[1] + south[1]) / 2];
+		Draft.rules(ctx, "facies", showDiamond && facies ? [{
+			x1: (west[0] + north[0]) / 2,
+			y1: (west[1] + north[1]) / 2,
+			x2: (south[0] + east[0]) / 2,
+			y2: (south[1] + east[1]) / 2
+		}, {
+			x1: (north[0] + east[0]) / 2,
+			y1: (north[1] + east[1]) / 2,
+			x2: (west[0] + south[0]) / 2,
+			y2: (west[1] + south[1]) / 2
+		}] : [], {
+			stroke: ctx.theme.inkMuted,
+			width: 1.5
+		});
+		const names = showDiamond && facies && s > 170 ? [
+			{
+				text: "Ca–SO₄",
+				x: centre[0],
+				y: north[1] + s * .38,
+				size: 10,
+				tone: "muted"
+			},
+			{
+				text: "Na–Cl",
+				x: east[0] - s * .3,
+				y: centre[1] + 4,
+				size: 10,
+				tone: "muted"
+			},
+			{
+				text: "Na–HCO₃",
+				x: centre[0],
+				y: south[1] - s * .3,
+				size: 10,
+				tone: "muted"
+			},
+			{
+				text: "Ca–HCO₃",
+				x: west[0] + s * .32,
+				y: centre[1] + 4,
+				size: 10,
+				tone: "muted"
+			}
+		] : [];
+		Draft.captions(ctx, "names", names);
+		const corners = showTriangles ? [
+			{
+				text: "Mg",
+				x: cations.apex[0],
+				y: cations.apex[1] - 5,
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: "SO₄",
+				x: anions.apex[0],
+				y: anions.apex[1] - 5,
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: "Ca",
+				x: cations.left[0],
+				y: baseY + 14,
+				anchor: "start",
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: "Na+K",
+				x: cations.right[0],
+				y: baseY + 14,
+				anchor: "end",
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: "HCO₃",
+				x: anions.left[0],
+				y: baseY + 14,
+				anchor: "start",
+				weight: 600,
+				tone: "ink"
+			},
+			{
+				text: "Cl",
+				x: anions.right[0],
+				y: baseY + 14,
+				anchor: "end",
+				weight: 600,
+				tone: "ink"
+			}
+		] : [];
+		const diamondNames = panels === "diamond" ? [{
+			text: "SO₄+Cl",
+			x: (west[0] + north[0]) / 2 - 6,
+			y: (west[1] + north[1]) / 2 - 8,
+			anchor: "end",
+			weight: 600,
+			tone: "ink"
+		}, {
+			text: "Ca+Mg",
+			x: (east[0] + north[0]) / 2 + 6,
+			y: (east[1] + north[1]) / 2 - 8,
+			anchor: "start",
+			weight: 600,
+			tone: "ink"
+		}] : [];
+		Draft.captions(ctx, "corners", [...corners, ...diamondNames]);
+		const tieLines = ties ? waters.flatMap(({ cation, anion, diamond }) => [Draft.polyline([
+			cation,
+			diamond,
+			anion
+		])]) : [];
+		Draft.paths(ctx, "ties", tieLines, {
+			stroke: ctx.theme.inkMuted,
+			width: 1,
+			opacity: .45
+		});
+		const area = scaleSqrt([0, Math.max(1, ...waters.map((d) => d.tds))], [0, 9]);
+		const glyph = symbol(Scales.symbol(symbolKind));
+		const places = waters.flatMap((water) => [...showTriangles ? [{
+			water,
+			at: water.cation
+		}, {
+			water,
+			at: water.anion
+		}] : [], ...showDiamond ? [{
+			water,
+			at: water.diamond
+		}] : []]);
+		const size = (d) => sizing === "tds" ? Math.max(2.5, area(d.tds)) : 4;
+		const marks = ctx.marks("waters", "path", places, (_, i) => i).attr("fill", ({ water }) => ctx.palette.color(water.group)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(marks, {
+			d: ({ water }) => glyph.size(Math.PI * size(water) ** 2)() ?? "",
+			transform: ({ at }) => `translate(${at[0]},${at[1]})`
+		}, {
+			d: ({ water }) => glyph.size(Math.PI * size(water) ** 2)() ?? "",
+			transform: ({ at }) => `translate(${at[0]},${at[1]})`
+		});
+		ctx.hover(marks, ({ water }) => ({
+			title: water.name || water.group,
+			color: ctx.palette.color(water.group),
+			rows: [["Group", water.group], ["TDS", water.tds]]
+		}));
+	}
+	diamondGrid(west, north, east, south) {
+		const mix = ([ax, ay], [bx, by], t) => [ax + (bx - ax) * t, ay + (by - ay) * t];
+		return [
+			.2,
+			.4,
+			.6,
+			.8
+		].flatMap((t) => [[mix(west, north, t), mix(south, east, t)], [mix(west, south, t), mix(north, east, t)]]).map(([p, q]) => ({
+			x1: p[0],
+			y1: p[1],
+			x2: q[0],
+			y2: q[1]
+		}));
+	}
+};
+export { PiperDiagram, PiperPanels, PiperSizing };