@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/density/GeoFreeShadedSurface.js

@@ -0,0 +1,108 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FieldLevels } from "./FieldLevels.js";
+import { GridFieldChart } from "./GridFieldChart.js";
+import { ShadeRaster } from "./ShadeRaster.js";
+import { hsl } from "d3";
+// src/charts/density/GeoFreeShadedSurface.ts
+/** How a slope turns into light. */
+var ReliefModel = /* @__PURE__ */ function(ReliefModel) {
+	ReliefModel["Lambert"] = "lambert";
+	ReliefModel["MultiDirectional"] = "multi-directional";
+	ReliefModel["Slope"] = "slope";
+	return ReliefModel;
+}({});
+var CELL = 3;
+var RELIEF_PX = 40;
+/** Hill-shades any two-variable surface without a map. Use it to expose fine structure that contours and colour hide. */
+var GeoFreeShadedSurface = class extends GridFieldChart {
+	static meta = {
+		id: "field-shaded-surface",
+		name: "Shaded surface",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Grid,
+		description: "Lights a two-variable surface like a relief map, from a chosen direction, to bring out ridges, slopes and small structure.",
+		tags: [
+			"hillshade",
+			"relief",
+			"lighting",
+			"surface"
+		],
+		sample: (seed) => SampleData.surface(seed, 64),
+		variants: {
+			model: [
+				"lambert",
+				"multi-directional",
+				"slope"
+			],
+			azimuth: [
+				315,
+				45,
+				135,
+				225
+			],
+			altitude: [
+				45,
+				25,
+				65
+			],
+			relief: [1, 3],
+			contours: [false, true]
+		},
+		valid: ({ model, azimuth, altitude }) => model === "lambert" || azimuth === 315 && (model === "multi-directional" || altitude === 45)
+	};
+	defaults() {
+		return {
+			model: "lambert",
+			azimuth: 315,
+			altitude: 45,
+			relief: 1,
+			contours: false
+		};
+	}
+	/** Reflected light in 0..1 for a slope, in value per pixel. */
+	light(gx, gy, azimuth) {
+		const altitude = this.options.altitude * Math.PI / 180, bearing = azimuth * Math.PI / 180;
+		const lx = Math.sin(bearing) * Math.cos(altitude), ly = -Math.cos(bearing) * Math.cos(altitude), lz = Math.sin(altitude);
+		return Math.max(0, (-gx * lx - gy * ly + lz) / Math.hypot(gx, gy, 1));
+	}
+	plotMarks(ctx, axes) {
+		const { model, azimuth, relief, contours } = this.options;
+		const { width, height } = ctx.plot;
+		const field = this.field();
+		const usable = field.columns > 1 && field.rows > 1 && field.high > field.low;
+		const columns = usable ? Math.round(width / CELL) : 0, rows = usable ? Math.round(height / CELL) : 0;
+		const gradient = this.gradient(axes, field);
+		const gain = relief * RELIEF_PX / (field.high - field.low || 1);
+		const shades = Int16Array.from({ length: columns * rows }, (_, k) => {
+			const [gx, gy] = gradient((k % columns + .5) * CELL, (Math.floor(k / columns) + .5) * CELL).map((g) => g * gain);
+			if (!Number.isFinite(gx) || !Number.isFinite(gy)) return -1;
+			const lit = model === "slope" ? 1 - Math.atan(Math.hypot(gx, gy)) / (Math.PI / 2) : model === "multi-directional" ? [
+				0,
+				90,
+				180,
+				270
+			].reduce((sum, bearing) => sum + this.light(gx, gy, bearing), 0) / 4 : this.light(gx, gy, azimuth);
+			return Math.round(Math.min(1, lit) * 23);
+		});
+		const layers = ShadeRaster.layers(shades, columns, rows, width, height);
+		const brightFirst = hsl(ctx.palette.sequential(0)).l > hsl(ctx.palette.sequential(1)).l;
+		const tone = (shade) => ctx.palette.sequential(brightFirst ? 1 - shade / 23 : shade / 23);
+		const shading = ctx.marks("relief", "path", layers, (d) => d.shade).attr("fill", (d) => tone(d.shade)).attr("shape-rendering", "crispEdges");
+		this.reveal(ctx, shading, { d: (d) => d.d }, 14);
+		ctx.hover(shading, (d) => ({
+			color: tone(d.shade),
+			rows: [["Light", `${Math.round(d.shade / 23 * 100)}%`]]
+		}));
+		const extract = this.contours(axes, field);
+		const lines = contours ? FieldLevels.of(field.values, 9).map((level) => ({
+			...level,
+			...extract.at(level.value)
+		})) : [];
+		const paths = ctx.marks("lines", "path", lines, (d) => d.value).attr("fill", "none").attr("stroke", ctx.theme.surface).attr("stroke-opacity", .75).attr("stroke-width", 1);
+		this.reveal(ctx, paths, { d: (d) => d.line });
+		this.showRamp(ctx, 1, (t) => tone(t * 23), (t) => `${Math.round(t * 100)}%`);
+	}
+};
+export { GeoFreeShadedSurface, ReliefModel };

package/dist/charts/density/GradientFieldChart.js

@@ -0,0 +1,156 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FieldLevels } from "./FieldLevels.js";
+import { GridFieldChart } from "./GridFieldChart.js";
+import { randomLcg } from "d3";
+// src/charts/density/GradientFieldChart.ts
+var GradientMark = /* @__PURE__ */ function(GradientMark) {
+	GradientMark["Arrow"] = "arrow";
+	GradientMark["Comet"] = "comet";
+	GradientMark["Streamline"] = "streamline";
+	return GradientMark;
+}({});
+/** Which vector the field gives at each point. */
+var GradientFlow = /* @__PURE__ */ function(GradientFlow) {
+	GradientFlow["Ascent"] = "ascent";
+	GradientFlow["Descent"] = "descent";
+	GradientFlow["Isogonal"] = "isogonal";
+	return GradientFlow;
+}({});
+var GradientSeeding = /* @__PURE__ */ function(GradientSeeding) {
+	GradientSeeding["Lattice"] = "lattice";
+	GradientSeeding["Jitter"] = "jitter";
+	return GradientSeeding;
+}({});
+/** The gradient of a surface as a vector field. Use it to show direction of steepest change, or flow along level lines. */
+var GradientFieldChart = class extends GridFieldChart {
+	static meta = {
+		id: "field-gradient",
+		name: "Gradient field",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Grid,
+		description: "Derives the slope of a surface and draws it as arrows, comets or streamlines, showing how the field changes at every point.",
+		tags: [
+			"vector field",
+			"quiver",
+			"streamline",
+			"slope"
+		],
+		sample: (seed) => SampleData.surface(seed, 60),
+		variants: {
+			mark: [
+				"arrow",
+				"comet",
+				"streamline"
+			],
+			flow: [
+				"ascent",
+				"descent",
+				"isogonal"
+			],
+			density: [
+				20,
+				14,
+				28
+			],
+			scaled: [true, false],
+			seeding: ["lattice", "jitter"],
+			backdrop: [false, true]
+		},
+		valid: ({ scaled, mark, seeding, density }) => (scaled || mark !== "streamline") && (seeding === "lattice" || density === 20)
+	};
+	defaults() {
+		return {
+			density: 20,
+			mark: "arrow",
+			flow: "ascent",
+			scaled: true,
+			seeding: "lattice",
+			backdrop: false
+		};
+	}
+	direction([gx, gy]) {
+		return this.options.flow === "descent" ? [-gx, -gy] : this.options.flow === "isogonal" ? [-gy, gx] : [gx, gy];
+	}
+	glyph(x, y, ux, uy, length) {
+		const tipX = x + ux * length, tipY = y + uy * length;
+		const fixed = (v) => v.toFixed(1);
+		if (this.options.mark === "comet") {
+			const side = 1.8;
+			return `M${fixed(x)},${fixed(y)}L${fixed(tipX - uy * side)},${fixed(tipY + ux * side)}A${side},${side} 0 1,0 ${fixed(tipX + uy * side)},${fixed(tipY - ux * side)}Z`;
+		}
+		const head = Math.min(4.5, length * .5);
+		return `M${fixed(x)},${fixed(y)}L${fixed(tipX)},${fixed(tipY)}M${fixed(tipX - ux * head - uy * head * .6)},${fixed(tipY - uy * head + ux * head * .6)}L${fixed(tipX)},${fixed(tipY)}L${fixed(tipX - ux * head + uy * head * .6)},${fixed(tipY - uy * head - ux * head * .6)}`;
+	}
+	stream(x, y, step, slope, width, height) {
+		const path = [[x, y]];
+		let px = x, py = y;
+		for (let k = 0; k < 14; k++) {
+			const [dx, dy] = this.direction(slope(px, py)), size = Math.hypot(dx, dy);
+			if (!size || !Number.isFinite(size)) break;
+			px += dx / size * step;
+			py += dy / size * step;
+			if (px < 0 || py < 0 || px > width || py > height) break;
+			path.push([px, py]);
+		}
+		return `M${path.map(([a, b]) => `${a.toFixed(1)},${b.toFixed(1)}`).join("L")}`;
+	}
+	plotMarks(ctx, axes) {
+		const { density, mark, scaled, seeding, backdrop } = this.options;
+		const { width, height } = ctx.plot;
+		const field = this.field();
+		const usable = field.columns > 1 && field.rows > 1;
+		const slope = this.gradient(axes, field);
+		const pitch = width / density, inset = pitch * .5;
+		const rows = usable ? Math.max(1, Math.floor((height - pitch * .6) / pitch)) : 0, columns = usable ? density : 0;
+		const jitter = randomLcg(.37);
+		const shake = () => seeding === "jitter" ? (jitter() - .5) * pitch * .8 : 0;
+		const probes = Array.from({ length: rows * columns }, (_, k) => ({
+			key: k,
+			x: inset + k % columns * pitch + shake(),
+			y: pitch * .6 + Math.floor(k / columns) * pitch + shake()
+		})).map((seed) => ({
+			...seed,
+			vector: this.direction(slope(seed.x, seed.y))
+		})).filter(({ vector: [a, b] }) => Number.isFinite(a) && Number.isFinite(b));
+		const peak = probes.reduce((top, { vector: [a, b] }) => Math.max(top, Math.hypot(a, b)), 0) || 1;
+		const glyphs = probes.flatMap(({ key, x, y, vector: [dx, dy] }) => {
+			const size = Math.hypot(dx, dy), magnitude = size / peak;
+			if (size === 0) return [];
+			if (mark === "streamline") return [{
+				key,
+				x,
+				y,
+				magnitude,
+				d: this.stream(x, y, pitch * .16, slope, width, height)
+			}];
+			const reach = pitch * .92 * (scaled ? .25 + .75 * magnitude : .8);
+			const startX = x - dx / size * reach / 2, startY = y - dy / size * reach / 2;
+			return [{
+				key,
+				x,
+				y,
+				magnitude,
+				d: this.glyph(startX, startY, dx / size, dy / size, reach)
+			}];
+		});
+		const extract = this.contours(axes, field);
+		const bands = backdrop ? FieldLevels.of(field.values, 7).map((level) => ({
+			...level,
+			...extract.at(level.value)
+		})) : [];
+		const under = ctx.marks("backdrop", "path", bands, (d) => d.value).attr("fill", ctx.theme.grid).attr("fill-opacity", .32).attr("stroke", ctx.theme.axis).attr("stroke-opacity", .4);
+		this.reveal(ctx, under, { d: (d) => d.area });
+		const tone = (d) => ctx.palette.sequential(.35 + .65 * d.magnitude);
+		const comet = mark === "comet";
+		const marks = ctx.marks("glyphs", "path", glyphs, (d) => d.key).attr("fill", (d) => comet ? tone(d) : "none").attr("stroke", (d) => comet ? "none" : tone(d)).attr("stroke-width", mark === "streamline" ? 1.25 : 1.5).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		this.reveal(ctx, marks, { d: (d) => d.d }, 1);
+		ctx.hover(marks, (d) => ({
+			color: tone(d),
+			rows: [["Relative slope", `${Math.round(d.magnitude * 100)}%`]]
+		}));
+		this.showRamp(ctx, 1, (t) => ctx.palette.sequential(.35 + .65 * t), (t) => `${Math.round(t * 100)}%`);
+	}
+};
+export { GradientFieldChart, GradientFlow, GradientMark, GradientSeeding };

package/dist/charts/density/GridFieldChart.js

@@ -0,0 +1,103 @@
+import { FieldInterpolation } from "./DensityEnums.js";
+import { FieldChart } from "./FieldChart.js";
+import { FieldContours } from "./FieldContours.js";
+import { extent, scaleLinear } from "d3";
+// src/charts/density/GridFieldChart.ts
+/** Charts of a scalar field on a regular or stretched grid. Rows may be jagged and cells may be null. */
+var GridFieldChart = class extends FieldChart {
+	field() {
+		const { x = [], y = [], z = [] } = this.options.data ?? {};
+		const planar = x.length > 1 && y.length > 1;
+		const columns = planar ? x.length : 0, rows = planar ? y.length : 0;
+		const values = Array.from({ length: columns * rows }, (_, k) => {
+			const cell = z[Math.floor(k / columns)]?.[k % columns];
+			return cell === null || cell === void 0 ? NaN : +cell;
+		});
+		const [low = 0, high = 0] = extent(values.filter(Number.isFinite));
+		return {
+			columns,
+			rows,
+			values,
+			low,
+			high,
+			reach: Math.max(Math.abs(low), Math.abs(high))
+		};
+	}
+	scales(ctx) {
+		this.clearRamp();
+		const { x = [], y = [] } = this.options.data ?? {};
+		const widen = ([low = 0, high = 1]) => low === high ? [low - 1, high + 1] : [low, high];
+		return {
+			x: scaleLinear(widen(extent(x)), [0, ctx.plot.width]),
+			y: scaleLinear(widen(extent(y)), [ctx.plot.height, 0])
+		};
+	}
+	/** Fractional grid index to pixels; stretched axes stay correct. */
+	projector({ x: sx, y: sy }) {
+		const { x = [], y = [] } = this.options.data ?? {};
+		const across = scaleLinear(x.map((_, i) => i), x.map((v) => sx(v)));
+		const down = scaleLinear(y.map((_, j) => j), y.map((v) => sy(v)));
+		return (i, j) => [across(i), down(j)];
+	}
+	contours(axes, field, interpolation = FieldInterpolation.Smooth) {
+		return new FieldContours(field.values, field.columns, field.rows, this.projector(axes), interpolation);
+	}
+	/** Bilinear sample at fractional grid indexes; gaps read as NaN. */
+	sample({ columns, rows, values }, i, j) {
+		const u = Math.max(0, Math.min(columns - 1, i)), v = Math.max(0, Math.min(rows - 1, j));
+		const i0 = Math.min(columns - 2, Math.floor(u)), j0 = Math.min(rows - 2, Math.floor(v));
+		const fu = u - i0, fv = v - j0;
+		const at = (a, b) => values[a + b * columns];
+		return (at(i0, j0) * (1 - fu) + at(i0 + 1, j0) * fu) * (1 - fv) + (at(i0, j0 + 1) * (1 - fu) + at(i0 + 1, j0 + 1) * fu) * fv;
+	}
+	/** Pixels back to fractional grid indexes. */
+	indexer({ x: sx, y: sy }) {
+		const { x = [], y = [] } = this.options.data ?? {};
+		const across = scaleLinear(x.map((v) => sx(v)), x.map((_, i) => i));
+		const down = scaleLinear(y.map((v) => sy(v)), y.map((_, j) => j));
+		return (px, py) => [across(px), down(py)];
+	}
+	/** Field change per pixel at a pixel, by central differences one grid cell wide; NaN over gaps. */
+	gradient(axes, field) {
+		const index = this.indexer(axes);
+		const dx = Math.abs(axes.x.range()[1] / Math.max(1, field.columns - 1)), dy = Math.abs(axes.y.range()[0] / Math.max(1, field.rows - 1));
+		const value = (px, py) => {
+			const [i, j] = index(px, py);
+			return this.sample(field, i, j);
+		};
+		return (px, py) => [(value(px + dx, py) - value(px - dx, py)) / (2 * dx), (value(px, py + dy) - value(px, py - dy)) / (2 * dy)];
+	}
+	/** Magnitude tone: signed fields read on the diverging scale, one-sided fields on the sequential one. */
+	tone(ctx, { low, high, reach }, value, floor = .35) {
+		if (low < 0 && high > 0) {
+			const t = Math.abs(value) / (reach || 1);
+			return ctx.palette.diverging(Math.sign(value) * (floor + (1 - floor) * t));
+		}
+		return ctx.palette.sequential(floor + (1 - floor) * (value - low) / (high - low || 1));
+	}
+	/** Legend chips that match `tone`. */
+	fieldRamp(ctx, field) {
+		const { low, high, reach } = field;
+		if (low < 0 && high > 0) this.showRamp(ctx, reach, (t) => ctx.palette.diverging((t - .5) * 2), (t) => FieldChart.short((t - .5) * 2 * reach));
+		else this.showRamp(ctx, high - low, ctx.palette.sequential, (t) => FieldChart.short(low + t * (high - low)));
+	}
+	zName() {
+		return this.options.zLabel ?? "Value";
+	}
+	table() {
+		const { x = [], y = [], z = [] } = this.options.data ?? {};
+		return {
+			columns: [
+				"x",
+				"y",
+				"z"
+			],
+			rows: y.flatMap((vy, j) => x.map((vx, i) => [
+				vx,
+				vy,
+				z[j]?.[i] ?? null
+			]))
+		};
+	}
+};
+export { GridFieldChart };

package/dist/charts/density/HexbinChart.js

@@ -0,0 +1,130 @@
+import { ChartFamily, DataShape, Dimension, Orientation, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PlaneGeometry } from "./PlaneGeometry.js";
+import { PointDensityChart } from "./PointDensityChart.js";
+import { mean, sum } from "d3";
+import { hexbin } from "d3-hexbin";
+// src/charts/density/HexbinChart.ts
+/** How a bin shows its value: tone on a full hexagon, or area of a hexagon or dot. */
+var HexEncoding = /* @__PURE__ */ function(HexEncoding) {
+	HexEncoding["Tone"] = "tone";
+	HexEncoding["Area"] = "area";
+	HexEncoding["Dot"] = "dot";
+	return HexEncoding;
+}({});
+var HexAggregate = /* @__PURE__ */ function(HexAggregate) {
+	HexAggregate["Count"] = "count";
+	HexAggregate["Sum"] = "sum";
+	HexAggregate["Mean"] = "mean";
+	return HexAggregate;
+}({});
+/** Aggregates a dense scatter into hexagons. Use it for 10k+ points, where a scatter plot would turn solid. */
+var HexbinChart = class extends PointDensityChart {
+	static meta = {
+		id: "density-hexbin",
+		name: "Hexbin plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Counts or summarises points inside a hexagonal lattice to show where a large scatter concentrates, by tone or by area.",
+		tags: [
+			"hexagon",
+			"binning",
+			"heatmap",
+			"large data"
+		],
+		sample: (seed) => SampleData.points(seed, 700, 3),
+		variants: {
+			radius: [
+				12,
+				8,
+				18
+			],
+			encoding: [
+				"tone",
+				"area",
+				"dot"
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			mesh: [false, true],
+			aggregate: [
+				"count",
+				"sum",
+				"mean"
+			],
+			labels: [false, true]
+		},
+		valid: ({ encoding, aggregate, labels, radius }) => (encoding === "tone" ? aggregate === "count" : !labels) && !(labels && radius === 8)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			weight: "size",
+			radius: 12,
+			encoding: "tone",
+			aggregate: "count",
+			orientation: Orientation.Vertical,
+			mesh: false,
+			labels: false,
+			toneScale: ScaleKind.Linear
+		};
+	}
+	get sizeEncoded() {
+		return this.options.encoding !== "tone";
+	}
+	aggregate(points) {
+		const { aggregate } = this.options;
+		return aggregate === "count" ? points.length : aggregate === "sum" ? sum(points, (d) => d.w) : mean(points, (d) => d.w) ?? 0;
+	}
+	drawDensity(ctx, _axes, points) {
+		const { radius, encoding, orientation, mesh, labels, toneScale } = this.options;
+		const { width, height } = ctx.plot;
+		const flat = orientation === Orientation.Horizontal;
+		const lay = (a, b) => flat ? [b, a] : [a, b];
+		const binner = hexbin().radius(radius).x((d) => flat ? d.py : d.px).y((d) => flat ? d.px : d.py).extent([[0, 0], lay(width, height)]);
+		const cells = binner(points).map((bin) => {
+			const [cx, cy] = lay(bin.x, bin.y);
+			return {
+				cx,
+				cy,
+				value: this.aggregate(bin),
+				count: bin.length
+			};
+		});
+		const top = cells.reduce((best, cell) => Math.max(best, cell.value), 0) || 1;
+		const shape = (cx, cy, size) => PlaneGeometry.path(PlaneGeometry.hexagon(cx, cy, size, flat));
+		const fits = ([x, y]) => x >= radius * .5 && y >= radius * .5 && x <= width - radius * .5 && y <= height - radius * .5;
+		const lattice = ctx.marks("mesh", "path", mesh ? [binner.centers().map(([a, b]) => lay(a, b)).filter(fits).map(([x, y]) => shape(x, y, radius - 1)).join("")] : []).attr("fill", "none").attr("stroke", ctx.theme.grid);
+		ctx.set(lattice, { d: (d) => d });
+		const scale = (value) => Math.sqrt(value / top);
+		const curve = (value) => toneScale === ScaleKind.Log ? Math.log1p(value) : toneScale === ScaleKind.Sqrt ? Math.sqrt(value) : value;
+		const tone = (d) => ctx.palette.sequential(encoding === "tone" ? .12 + .88 * curve(d.value) / curve(top) : .72);
+		const gapped = radius - 1;
+		const inner = (d) => encoding === "tone" ? gapped : Math.max(1.5, gapped * scale(d.value));
+		const isDot = encoding === "dot";
+		const hexes = ctx.marks("hexes", "path", isDot ? [] : cells, (d) => `${d.cx.toFixed(1)}/${d.cy.toFixed(1)}`).attr("fill", tone);
+		ctx.set(hexes, { d: (d) => shape(d.cx, d.cy, inner(d)) }, { d: (d) => shape(d.cx, d.cy, .01) }, 2);
+		const dots = ctx.marks("dots", "circle", isDot ? cells : [], (d) => `${d.cx.toFixed(1)}/${d.cy.toFixed(1)}`).attr("fill", tone);
+		ctx.set(dots, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: (d) => inner(d) * .92
+		}, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: 0
+		}, 2);
+		for (const marks of [hexes, dots]) ctx.hover(marks, (d) => ({
+			color: tone(d),
+			rows: [["Points", d.count], ...this.options.aggregate === "count" ? [] : [[`${this.options.aggregate} of ${this.options.weight}`, +d.value.toFixed(1)]]]
+		}));
+		const room = radius >= 12 ? cells.filter((d) => d.value >= top * .45 && fits([d.cx, d.cy])) : [];
+		const text = ctx.marks("hex-labels", "text", labels ? room : [], (d) => `${d.cx}/${d.cy}`).attr("text-anchor", "middle").attr("dy", "0.34em").attr("font-size", 10).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => this.inkOn(ctx, tone(d))).style("pointer-events", "none").text((d) => d.value);
+		ctx.set(text, {
+			x: (d) => d.cx,
+			y: (d) => d.cy
+		});
+		this.showRamp(ctx, top, (t) => ctx.palette.sequential(.12 + .88 * t));
+	}
+};
+export { HexAggregate, HexEncoding, HexbinChart };

package/dist/charts/density/IsolineChart.js

@@ -0,0 +1,165 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ContourLabels } from "./ContourLabels.js";
+import { FieldInterpolation } from "./DensityEnums.js";
+import { FieldLevels } from "./FieldLevels.js";
+import { GridFieldChart } from "./GridFieldChart.js";
+import { hsl } from "d3";
+// src/charts/density/IsolineChart.ts
+/** Cartographic treatment of the lines. */
+var IsolineStyle = /* @__PURE__ */ function(IsolineStyle) {
+	IsolineStyle["Plain"] = "plain";
+	IsolineStyle["Index"] = "index";
+	IsolineStyle["Hachure"] = "hachure";
+	IsolineStyle["Tanaka"] = "tanaka";
+	return IsolineStyle;
+}({});
+/** Which part of the value range gets lines. */
+var IsolineRange = /* @__PURE__ */ function(IsolineRange) {
+	IsolineRange["Full"] = "full";
+	IsolineRange["Above"] = "above-zero";
+	IsolineRange["Below"] = "below-zero";
+	return IsolineRange;
+}({});
+var HACHURE_STEP = 14;
+var HACHURE_SIZE = 5;
+var INDEX_EVERY = 4;
+var LIGHT_SHIFT = 1.2;
+var clips = 0;
+/** Map-maker's isolines: index contours, downhill hachures and Tanaka relief. Use it when a field should read as terrain. */
+var IsolineChart = class extends GridFieldChart {
+	static meta = {
+		id: "field-isoline",
+		name: "Isoline map",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Grid,
+		description: "Draws isolines with cartographic conventions (index lines, downhill hachures, illuminated Tanaka relief) so a field reads as terrain.",
+		tags: [
+			"isopleth",
+			"tanaka",
+			"hachure",
+			"cartography"
+		],
+		sample: (seed) => SampleData.surface(seed, 60),
+		variants: {
+			isolineStyle: [
+				"index",
+				"plain",
+				"hachure",
+				"tanaka"
+			],
+			count: [
+				12,
+				7,
+				18
+			],
+			range: [
+				"full",
+				"above-zero",
+				"below-zero"
+			],
+			edgeLabels: [false, true]
+		},
+		valid: ({ isolineStyle, range }) => isolineStyle !== "tanaka" || range === "full"
+	};
+	clipId = `isoline-clip-${++clips}`;
+	defaults() {
+		return {
+			count: 12,
+			isolineStyle: "index",
+			range: "full",
+			edgeLabels: false
+		};
+	}
+	levels(field) {
+		const { count, range } = this.options;
+		return FieldLevels.of(field.values, count).filter((level) => range === "above-zero" ? level.value >= 0 : range === "below-zero" ? level.value <= 0 : true);
+	}
+	/** Short ticks along a line, pointing downhill. */
+	hachures(lines, slope) {
+		return lines.flatMap((run) => run.filter((_, i) => i % Math.max(1, Math.round(HACHURE_STEP / 6)) === 0).map(([x, y]) => {
+			const [gx, gy] = slope(x, y), size = Math.hypot(gx, gy);
+			if (!size) return "";
+			const dx = -gx / size * HACHURE_SIZE, dy = -gy / size * HACHURE_SIZE;
+			return `M${x.toFixed(1)},${y.toFixed(1)}l${dx.toFixed(1)},${dy.toFixed(1)}`;
+		})).join("");
+	}
+	edgeTags(lines, ctx) {
+		const { width, height } = ctx.plot;
+		const taken = [];
+		for (const { label, polylines } of lines) for (const run of polylines) for (const end of [run[0], run[run.length - 1]]) {
+			const [x, y] = end, half = label.length * 5.6 / 2 + 4;
+			const onEdge = x < 6 || y < 6 || x > width - 6 || y > height - 6;
+			const px = Math.max(half, Math.min(width - half, x)), py = Math.max(8, Math.min(height - 8, y));
+			if (onEdge && !taken.some((tag) => Math.abs(tag.x - px) < half * 2 + 6 && Math.abs(tag.y - py) < 14)) taken.push({
+				text: label,
+				x: px,
+				y: py
+			});
+		}
+		return taken;
+	}
+	plotMarks(ctx, axes) {
+		const { isolineStyle, edgeLabels } = this.options;
+		const field = this.field(), { low, high } = field;
+		const contours = this.contours(axes, field, FieldInterpolation.Smooth);
+		const lines = this.levels(field).map((level, index) => ({
+			...level,
+			index,
+			major: index % INDEX_EVERY === 0,
+			...contours.at(level.value)
+		}));
+		const tanaka = isolineStyle === "tanaka", indexed = isolineStyle === "index";
+		const fill = (value) => ctx.palette.sequential(.1 + .8 * (value - low) / (high - low || 1));
+		const reliefs = tanaka ? lines : [];
+		const [dark, bright] = [ctx.theme.ink, ctx.theme.surface].sort((a, b) => hsl(a).l - hsl(b).l);
+		const stack = ctx.group("relief").attr("clip-path", `url(#${this.clipId})`);
+		stack.selectAll("path").remove();
+		stack.selectAll("clipPath").data(tanaka ? [0] : []).join("clipPath").attr("id", this.clipId).selectAll("rect").data([0]).join("rect").attr("width", ctx.plot.width).attr("height", ctx.plot.height);
+		const shade = stack.selectAll("path.relief-dark").data(reliefs).join("path").attr("class", "relief-dark").attr("fill", dark).attr("fill-opacity", .45);
+		const glow = stack.selectAll("path.relief-light").data(reliefs).join("path").attr("class", "relief-light").attr("fill", bright).attr("fill-opacity", .85);
+		const face = stack.selectAll("path.relief-face").data(reliefs).join("path").attr("class", "relief-face").attr("fill", (d) => fill(d.value));
+		reliefs.forEach((_, i) => {
+			stack.append(() => shade.nodes()[i]);
+			stack.append(() => glow.nodes()[i]);
+			stack.append(() => face.nodes()[i]);
+		});
+		ctx.set(shade, {
+			d: (d) => d.area,
+			transform: `translate(${LIGHT_SHIFT},${LIGHT_SHIFT})`
+		});
+		ctx.set(glow, {
+			d: (d) => d.area,
+			transform: `translate(-1.2,-1.2)`
+		});
+		ctx.set(face, { d: (d) => d.area });
+		ctx.hover(face, (d) => ({
+			rows: [[`${this.zName()} from`, d.label]],
+			color: fill(d.value)
+		}));
+		const tone = (d) => this.tone(ctx, field, d.value);
+		const paths = ctx.marks("lines", "path", tanaka ? [] : lines, (d) => d.value).attr("fill", "none").attr("stroke", tone).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", (d) => indexed ? d.major ? 2.25 : .75 : 1.5);
+		this.reveal(ctx, paths, { d: (d) => d.line }, 30);
+		ctx.hover(paths, (d) => ({
+			rows: [[this.zName(), d.label]],
+			color: tone(d)
+		}));
+		const slope = this.gradient(axes, field);
+		const ticks = ctx.marks("hachures", "path", isolineStyle === "hachure" ? lines : [], (d) => d.value).attr("fill", "none").attr("stroke", tone).attr("stroke-width", 1);
+		this.reveal(ctx, ticks, { d: (d) => this.hachures(d.polylines, slope) });
+		ContourLabels.draw(ctx, indexed ? lines.filter((d) => d.major).map((d) => ({
+			text: d.label,
+			polylines: d.polylines
+		})) : []);
+		const tags = ctx.marks("edge-tags", "text", edgeLabels ? this.edgeTags(lines, ctx) : [], (d) => `${d.text}/${d.x}/${d.y}`).attr("text-anchor", "middle").attr("dy", "0.32em").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").text((d) => d.text);
+		ctx.text(tags, 10, "secondary");
+		ctx.set(tags, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		if (tanaka) this.showRamp(ctx, 1, (t) => fill(low + t * (high - low)), (t) => GridFieldChart.short(low + t * (high - low)));
+		else this.fieldRamp(ctx, field);
+	}
+};
+export { IsolineChart, IsolineRange, IsolineStyle };