@mstone6969/graph 0.0.0-stage → 0.2.0

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

package/dist/charts/scientific/RoseStrainChart.js

@@ -0,0 +1,305 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { Draft } from "./Draft.js";
+import { ScientificSample } from "./ScientificSample.js";
+import { arc, group, max, range, scaleLinear, scaleSqrt } from "d3";
+// src/charts/scientific/RoseStrainChart.ts
+var RoseSymmetry = /* @__PURE__ */ function(RoseSymmetry) {
+	RoseSymmetry["Axial"] = "axial";
+	RoseSymmetry["Directional"] = "directional";
+	RoseSymmetry["HalfRose"] = "half-rose";
+	return RoseSymmetry;
+}({});
+var RoseRadial = /* @__PURE__ */ function(RoseRadial) {
+	RoseRadial["EqualArea"] = "equal-area";
+	RoseRadial["Linear"] = "equal-length";
+	return RoseRadial;
+}({});
+var RoseForm = /* @__PURE__ */ function(RoseForm) {
+	RoseForm["Wedges"] = "wedges";
+	RoseForm["Kite"] = "kite";
+	RoseForm["Spokes"] = "spokes";
+	return RoseForm;
+}({});
+var rad = Math.PI / 180;
+/** Orientation data such as fractures, foliation or strain markers, binned around the compass. */
+var RoseStrainChart = class extends RadialChart {
+	static meta = {
+		id: "rose-strain",
+		name: "Strain rose diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Bins directional or axial measurements around a compass and fits the strain ellipse of the fabric.",
+		tags: [
+			"structural geology",
+			"orientation",
+			"rose",
+			"strain ellipse"
+		],
+		sample: (seed) => ScientificSample.fabric(seed),
+		variants: {
+			bins: [
+				36,
+				24,
+				12
+			],
+			symmetry: Object.values(RoseSymmetry),
+			radial: Object.values(RoseRadial),
+			form: Object.values(RoseForm),
+			ellipse: [false, true]
+		},
+		valid: (values) => values.symmetry !== "half-rose" || values.ellipse === false
+	};
+	defaults() {
+		return {
+			azimuth: "azimuth",
+			magnitude: "magnitude",
+			set: "set",
+			weighted: false,
+			bins: 36,
+			symmetry: "axial",
+			radial: "equal-area",
+			form: "wedges",
+			ellipse: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 18,
+			right: 18,
+			bottom: 16,
+			left: 18
+		};
+	}
+	measures() {
+		const { data, azimuth, magnitude, set } = this.options;
+		return data.flatMap((row) => {
+			const a = Draft.number(row[azimuth]);
+			return a === null ? [] : [{
+				azimuth: (a % 360 + 360) % 360,
+				weight: Draft.number(row[magnitude]) ?? 1,
+				set: String(row[set] ?? "Fabric")
+			}];
+		});
+	}
+	binned() {
+		const { bins, symmetry, weighted } = this.options;
+		const half = symmetry === "half-rose";
+		const step = (half ? 180 : 360) / bins, offset = half ? -90 : 0;
+		const measures = this.measures().flatMap((d) => {
+			if (symmetry === "directional") return [d];
+			if (symmetry === "axial") return [d, {
+				...d,
+				azimuth: (d.azimuth + 180) % 360
+			}];
+			const fold = (d.azimuth + 90) % 180 - 90;
+			return [{
+				...d,
+				azimuth: fold
+			}];
+		});
+		return [...group(measures, (d) => d.set)].flatMap(([set, list]) => {
+			const totals = new Array(bins).fill(0);
+			for (const d of list) totals[Math.min(bins - 1, Math.floor((d.azimuth - offset) / step))] += weighted ? d.weight : 1;
+			return totals.map((value, index) => ({
+				index,
+				set,
+				low: offset + index * step,
+				high: offset + (index + 1) * step,
+				value,
+				start: 0,
+				end: value
+			}));
+		});
+	}
+	draw(ctx) {
+		Draft.fresh(ctx, this.meta, this.options);
+		super.draw(ctx);
+	}
+	drawRadial(root, { radius: outer }) {
+		const { symmetry, radial, form, ellipse } = this.options;
+		const half = symmetry === "half-rose";
+		const ctx = half ? root.nest(`translate(0,${outer * .5})`, "half") : root;
+		const radius = half ? Math.min(outer * 1.4, root.plot.width / 2 - 20) : outer - 6;
+		const parts = this.binned();
+		for (const [, list] of group(parts, (d) => d.index)) {
+			let cursor = 0;
+			for (const part of list) {
+				part.start = cursor;
+				cursor += part.value;
+				part.end = cursor;
+			}
+		}
+		const peak = Math.max(1, max(parts, (d) => d.end) ?? 1);
+		const r = radial === "equal-area" ? scaleSqrt([0, peak], [0, radius]) : scaleLinear([0, peak], [0, radius]);
+		const ticks = scaleLinear([0, peak], [0, 1]).ticks(3).filter((tick) => tick > 0);
+		const ring = (value) => {
+			const size = r(value);
+			return half ? `M${-size},0A${size},${size} 0 0 1 ${size},0` : `M${-size},0A${size},${size} 0 1 1 ${size},0A${size},${size} 0 1 1 ${-size},0`;
+		};
+		Draft.paths(ctx, "rings", ticks.map(ring));
+		const spokes = range(half ? -90 : 0, half ? 91 : 360, 45);
+		Draft.rules(ctx, "spokes", spokes.map((angle) => ({
+			x1: 0,
+			y1: 0,
+			x2: Math.sin(angle * rad) * radius,
+			y2: -Math.cos(angle * rad) * radius
+		})));
+		Draft.paths(ctx, "frame", [half ? `${ring(peak)}Z` : ring(peak)], { stroke: ctx.theme.axis });
+		const compass = [{
+			text: "N",
+			x: 0,
+			y: -radius - 6,
+			tone: "ink",
+			weight: 600
+		}, ...half ? [{
+			text: "E",
+			x: radius + 10,
+			y: 4,
+			tone: "muted"
+		}, {
+			text: "W",
+			x: -radius - 10,
+			y: 4,
+			tone: "muted"
+		}] : [
+			{
+				text: "E",
+				x: radius + 10,
+				y: 4,
+				tone: "muted"
+			},
+			{
+				text: "S",
+				x: 0,
+				y: radius + 14,
+				tone: "muted"
+			},
+			{
+				text: "W",
+				x: -radius - 10,
+				y: 4,
+				tone: "muted"
+			}
+		]];
+		Draft.captions(ctx, "compass", compass);
+		Draft.captions(ctx, "scale", ticks.map((tick) => ({
+			text: `${tick}`,
+			x: Math.sin(22.5 * rad) * r(tick) + 2,
+			y: -Math.cos(22.5 * rad) * r(tick) - 2,
+			anchor: "start",
+			size: 10,
+			tone: "muted"
+		})));
+		const tip = (d) => ({
+			title: `${d.low.toFixed(0)}–${d.high.toFixed(0)}°`,
+			color: ctx.palette.color(d.set),
+			rows: [[d.set, +d.value.toFixed(1)]]
+		});
+		const visible = parts.filter((d) => d.value > 0);
+		if (form === "wedges") {
+			const wedge = arc().innerRadius((d) => r(d.start)).outerRadius((d) => r(d.end)).startAngle((d) => d.low * rad).endAngle((d) => d.high * rad).padAngle(.012).padRadius(radius / 2).cornerRadius(1.5);
+			const wedges = ctx.marks("wedges", "path", visible, (d) => `${d.set}/${d.index}`).attr("fill", (d) => ctx.palette.color(d.set));
+			ctx.set(wedges, { d: (d) => wedge(d) ?? "" }, { d: (d) => wedge(d) ?? "" });
+			ctx.hover(wedges, tip);
+		} else if (form === "kite") {
+			const polygons = [...group(parts, (d) => d.set)].map(([set, list]) => {
+				const vertex = (d) => {
+					const angle = (d.low + d.high) / 2 * rad;
+					return [Math.sin(angle) * r(d.value), -Math.cos(angle) * r(d.value)];
+				};
+				return {
+					set,
+					peak: list,
+					d: half ? `${Draft.polyline([
+						[0, 0],
+						...list.map(vertex),
+						[0, 0]
+					])}Z` : Draft.polygon(list.map(vertex))
+				};
+			});
+			const kites = ctx.marks("kites", "path", polygons, (d) => d.set).attr("fill", (d) => ctx.palette.color(d.set)).attr("fill-opacity", .3).attr("stroke", (d) => ctx.palette.color(d.set)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+			ctx.set(kites, { d: (d) => d.d }, { d: (d) => d.d });
+			ctx.hover(kites, (d) => ({
+				title: d.set,
+				color: ctx.palette.color(d.set),
+				rows: [["Peak bin", max(d.peak, (bin) => bin.value) ?? 0]]
+			}));
+		} else {
+			const mid = (d) => (d.low + d.high) / 2 * rad;
+			const stalks = ctx.marks("spokes-data", "line", visible, (d) => `${d.set}/${d.index}`).attr("stroke", (d) => ctx.palette.color(d.set)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+			const end = {
+				x1: (d) => Math.sin(mid(d)) * r(d.start),
+				y1: (d) => -Math.cos(mid(d)) * r(d.start),
+				x2: (d) => Math.sin(mid(d)) * r(d.end),
+				y2: (d) => -Math.cos(mid(d)) * r(d.end)
+			};
+			ctx.set(stalks, end, {
+				...end,
+				x2: end.x1,
+				y2: end.y1
+			}, 8);
+			ctx.hover(stalks, tip);
+			const heads = ctx.marks("spoke-heads", "circle", visible, (d) => `${d.set}/${d.index}`).attr("fill", (d) => ctx.palette.color(d.set)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+			ctx.set(heads, {
+				cx: end.x2,
+				cy: end.y2,
+				r: 3.5
+			}, {
+				cx: end.x2,
+				cy: end.y2,
+				r: 0
+			}, 8);
+			ctx.hover(heads, tip);
+		}
+		if (ellipse && !half) this.ellipse(ctx, radius * .82);
+	}
+	/** The orientation tensor's eigenvectors give the ellipse axes; their ratio its axial strain. */
+	ellipse(ctx, radius) {
+		const measures = this.measures();
+		if (!measures.length) return;
+		let xx = 0, yy = 0, xy = 0;
+		for (const d of measures) {
+			const s = Math.sin(d.azimuth * rad), c = Math.cos(d.azimuth * rad);
+			xx += s * s;
+			yy += c * c;
+			xy += s * c;
+		}
+		const total = measures.length;
+		xx /= total;
+		yy /= total;
+		xy /= total;
+		const root = Math.sqrt(((xx - yy) / 2) ** 2 + xy * xy), major = (xx + yy) / 2 + root, minor = Math.max(.02, (xx + yy) / 2 - root);
+		const angle = .5 * Math.atan2(2 * xy, xx - yy);
+		const ratio = Math.sqrt(major / minor);
+		const a = radius, b = radius / ratio;
+		const points = range(0, 361, 6).map((t) => {
+			const u = a * Math.cos(t * rad), v = b * Math.sin(t * rad);
+			return [u * Math.cos(angle) - v * Math.sin(angle), -(u * Math.sin(angle) + v * Math.cos(angle))];
+		});
+		Draft.paths(ctx, "strain-ellipse", [Draft.polyline(points)], {
+			stroke: ctx.theme.ink,
+			width: 2
+		});
+		Draft.rules(ctx, "strain-axis", [{
+			x1: -a * Math.cos(angle),
+			y1: a * Math.sin(angle),
+			x2: a * Math.cos(angle),
+			y2: -a * Math.sin(angle)
+		}], {
+			stroke: ctx.theme.ink,
+			dash: "4 3",
+			width: 1
+		});
+		Draft.captions(ctx, "strain-ratio", [{
+			text: `Rf ${ratio.toFixed(2)}`,
+			x: ctx.plot.width / 2 - 8,
+			y: -ctx.plot.height / 2 + 12,
+			anchor: "end",
+			tone: "ink",
+			weight: 600
+		}]);
+	}
+};
+export { RoseForm, RoseRadial, RoseStrainChart, RoseSymmetry };