@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geomaps/PrismLikeShadedMap.js

@@ -0,0 +1,168 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { GeoClasses } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { ascending, color, descending, geoStream, max, scaleLinear, scaleSqrt } from "d3";
+// src/charts/geomaps/PrismLikeShadedMap.ts
+/** Where the viewer stands: height rises straight up the page, or skews to one side. */
+var GeoPrismView = /* @__PURE__ */ function(GeoPrismView) {
+	GeoPrismView["Front"] = "front";
+	GeoPrismView["Left"] = "left";
+	GeoPrismView["Right"] = "right";
+	return GeoPrismView;
+}({});
+var LEAN = .45;
+/** Prism map in SVG: regions extruded by value and lit from one side, a 2.5D take for a few standout totals. */
+var PrismLikeShadedMap = class extends RegionMap {
+	static meta = {
+		id: "prism-shaded-map",
+		name: "Prism map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Extrudes each region into a shaded prism whose height shows value, giving a tactile 2.5D overview.",
+		tags: [
+			"map",
+			"prism",
+			"extrusion",
+			"2.5d",
+			"block"
+		],
+		sample: (seed) => GeoSamples.regions(seed),
+		variants: {
+			view: [
+				"right",
+				"front",
+				"left"
+			],
+			tilt: [
+				.72,
+				1,
+				.5
+			],
+			scale: [ScaleKind.Linear, ScaleKind.Sqrt],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.Miller
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			view: "right",
+			tilt: .72,
+			scale: ScaleKind.Linear,
+			reach: .075,
+			graticule: false
+		};
+	}
+	get framed() {
+		return false;
+	}
+	inset(ctx) {
+		const rise = ctx.plot.height * this.options.reach;
+		return {
+			top: rise,
+			left: rise * LEAN,
+			right: rise * LEAN
+		};
+	}
+	/** Projected, clipped rings of a feature, ready to extrude. */
+	rings(feature, frame) {
+		const rings = [];
+		let ring = [];
+		geoStream(feature, frame.projection.stream({
+			point: (x, y) => {
+				ring.push([x, y]);
+			},
+			lineStart: () => {
+				ring = [];
+			},
+			lineEnd: () => {
+				if (ring.length > 2) rings.push(ring);
+			},
+			polygonStart: () => {},
+			polygonEnd: () => {},
+			sphere: () => {}
+		}));
+		return rings;
+	}
+	polygon(rings) {
+		return rings.map((ring) => `M${ring.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join("L")}Z`).join("");
+	}
+	walls(rings, dx, dy, lit) {
+		let d = "";
+		for (const ring of rings) ring.forEach((a, i) => {
+			const b = ring[(i + 1) % ring.length];
+			if (b[0] >= a[0] !== lit) return;
+			d += `M${a[0].toFixed(1)},${a[1].toFixed(1)}L${b[0].toFixed(1)},${b[1].toFixed(1)}L${(b[0] + dx).toFixed(1)},${(b[1] + dy).toFixed(1)}L${(a[0] + dx).toFixed(1)},${(a[1] + dy).toFixed(1)}Z`;
+		});
+		return d;
+	}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	drawKey(ctx, frame) {
+		const classes = new GeoClasses(this.known(this.regions()).map((region) => region.value));
+		GeoLegend.classes(ctx, frame, classes, (value) => ctx.palette.sequential(classes.tone(value)));
+	}
+	drawMap(ctx, frame) {
+		const { view, tilt, scale, reach, value } = this.options, { palette, theme } = ctx;
+		const known = this.known(this.regions()), classes = new GeoClasses(known.map((region) => region.value));
+		const top = max(known, (d) => Math.abs(d.value)) || 1, rise = ctx.plot.height * reach;
+		const height = (scale === ScaleKind.Sqrt ? scaleSqrt() : scaleLinear()).domain([0, top]).range([0, rise]);
+		const lean = view === "front" ? 0 : view === "left" ? -.45 : LEAN;
+		const floor = (frame.height + rise - tilt * (rise + frame.height)) / 2;
+		const squash = (rings) => rings.map((ring) => ring.map(([x, y]) => [x, floor + y * tilt]));
+		const prisms = known.flatMap((region) => {
+			const base = squash(this.rings(region.feature, frame));
+			if (!base.length) return [];
+			const h = height(Math.abs(region.value)), dx = h * lean, dy = -h;
+			const tone = palette.sequential(classes.tone(region.value));
+			const shade = color(tone), sideLit = shade.darker(.5).formatHex(), sideDark = shade.darker(1.1).formatHex();
+			const roof = this.polygon(base.map((ring) => ring.map(([x, y]) => [x + dx, y + dy])));
+			const south = Math.max(...base.flat().map(([, y]) => y));
+			return [
+				{
+					key: `${region.key}/a`,
+					region,
+					south,
+					order: 0,
+					d: this.walls(base, dx, dy, true),
+					fill: sideDark
+				},
+				{
+					key: `${region.key}/b`,
+					region,
+					south,
+					order: 1,
+					d: this.walls(base, dx, dy, false),
+					fill: sideLit
+				},
+				{
+					key: `${region.key}/c`,
+					region,
+					south,
+					order: 2,
+					d: roof,
+					fill: tone
+				}
+			];
+		}).sort((a, b) => ascending(a.south, b.south) || descending(b.order, a.order));
+		ctx.marks("plate", "path", [{ type: "Sphere" }]).attr("d", (d) => this.polygon(squash(this.rings(d, frame)))).attr("fill", theme.grid).attr("fill-opacity", .28).attr("stroke", theme.axis).attr("stroke-width", 1);
+		ctx.marks("ground", "path", this.regions().filter((d) => d.value === null), (d) => d.key).attr("d", (d) => this.polygon(squash(this.rings(d.feature, frame)))).attr("fill", theme.grid);
+		const faces = ctx.marks("faces", "path", prisms, (d) => d.key).attr("fill", (d) => d.fill);
+		this.fill(ctx, faces, (d) => d.d, 1);
+		ctx.hover(faces, (d) => ({
+			title: d.region.name,
+			color: d.fill,
+			rows: [[value, d.region.value]]
+		}));
+	}
+};
+export { GeoPrismView, PrismLikeShadedMap };

package/dist/charts/geomaps/ProportionalSymbolMap.js

@@ -0,0 +1,144 @@
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { max, scaleLinear, scaleThreshold, symbol } from "d3";
+// src/charts/geomaps/ProportionalSymbolMap.ts
+/** Proportional: area follows each value. Graduated: area steps through a few classes, for cleaner reading. */
+var GeoSizing = /* @__PURE__ */ function(GeoSizing) {
+	GeoSizing["Proportional"] = "proportional";
+	GeoSizing["Graduated"] = "graduated";
+	return GeoSizing;
+}({});
+var CLASS_LIMITS = [
+	.05,
+	.2,
+	.5
+];
+var CLASS_SIZES = [
+	.03,
+	.12,
+	.35,
+	1
+];
+/** Reach of each d3 symbol from its origin, in radii of the circle of equal area. */
+var SYMBOL_REACH = {
+	[SymbolKind.Square]: {
+		up: .89,
+		down: .89,
+		side: .89
+	},
+	[SymbolKind.Diamond]: {
+		up: 1.65,
+		down: 1.65,
+		side: .96
+	},
+	[SymbolKind.Triangle]: {
+		up: 1.56,
+		down: .78,
+		side: 1.35
+	},
+	[SymbolKind.Star]: {
+		up: 1.68,
+		down: 1.36,
+		side: 1.6
+	}
+};
+/** Encode totals, which choropleths misrepresent, with a symbol at each region whose area follows the value. */
+var ProportionalSymbolMap = class extends RegionMap {
+	static meta = {
+		id: "proportional-symbol-map",
+		name: "Proportional symbol map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Places a symbol on each region with area proportional to its value, the right form for counts and totals.",
+		tags: [
+			"map",
+			"graduated",
+			"symbol",
+			"totals"
+		],
+		sample: (seed) => GeoSamples.totals(seed),
+		variants: {
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond,
+				SymbolKind.Triangle,
+				SymbolKind.Star
+			],
+			sizing: ["proportional", "graduated"],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide
+			],
+			graticule: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: SymbolKind.Circle,
+			sizing: "proportional",
+			reach: .055
+		};
+	}
+	/** Square pixels per unit of value, so marks and key stay honest. */
+	area(ctx, top) {
+		const biggest = Math.PI * (Math.min(ctx.plot.width, ctx.plot.height) * this.options.reach) ** 2;
+		const linear = scaleLinear([0, top || 1], [0, biggest]);
+		if (this.options.sizing === "proportional") return (value) => linear(Math.abs(value));
+		const graded = scaleThreshold().domain(CLASS_LIMITS.map((limit) => limit * top)).range(CLASS_SIZES.map((size) => linear(size * top)));
+		return (value) => graded(Math.abs(value));
+	}
+	shape(area) {
+		return symbol(Scales.symbol(this.options.symbol), area)() ?? "";
+	}
+	drawMap(ctx, frame) {
+		const regions = this.known(this.regions());
+		const top = max(regions, (d) => Math.abs(d.value)) ?? 0;
+		const area = this.area(ctx, top), { theme } = ctx;
+		const placed = regions.flatMap((region) => {
+			const at = frame.anchor(region.feature);
+			return at ? [{
+				...region,
+				x: at[0],
+				y: at[1],
+				area: area(region.value)
+			}] : [];
+		}).sort((a, b) => b.area - a.area);
+		ctx.marks("land", "path", this.regions(), (d) => d.key).attr("d", (d) => frame.path(d.feature) ?? "").attr("fill", theme.grid).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		const fill = ctx.palette.color(this.options.value);
+		const marks = ctx.marks("symbols", "path", placed, (d) => d.key).attr("fill", fill).attr("stroke", theme.surface).attr("stroke-width", 1).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		ctx.set(marks, {
+			d: (d) => this.shape(d.area),
+			"fill-opacity": .72
+		}, {
+			d: this.shape(0),
+			"fill-opacity": 0
+		}, 2);
+		ctx.hover(marks, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [[this.options.value, d.value]]
+		}));
+		const entries = (this.options.sizing === "graduated" ? [...CLASS_SIZES.slice(1)].reverse() : [
+			1,
+			.5,
+			.15
+		]).map((share) => {
+			const value = +(top * share).toPrecision(2);
+			return {
+				value,
+				radius: Math.sqrt(area(value) / Math.PI)
+			};
+		});
+		GeoLegend.nested(ctx, frame, entries, (radius) => this.shape(Math.PI * radius * radius), SYMBOL_REACH[this.options.symbol]);
+	}
+};
+export { GeoSizing, ProportionalSymbolMap };

package/dist/charts/geomaps/RegionMap.js

@@ -0,0 +1,118 @@
+import { GeoAtlas, GeoLayer } from "../../data/GeoAtlas.js";
+import { GeoChart } from "./GeoChart.js";
+import { index } from "d3";
+// src/charts/geomaps/RegionMap.ts
+var SHARPEN_AT = 3;
+var finite = (value) => {
+	if (value === null || value === void 0 || value === "") return null;
+	const number = +value;
+	return Number.isFinite(number) ? number : null;
+};
+/** Maps whose data is a FeatureCollection, optionally joined to a table of values. */
+var RegionMap = class extends GeoChart {
+	#layer;
+	#loading;
+	#given;
+	defaults() {
+		return {
+			...super.defaults(),
+			value: "value",
+			name: "name",
+			join: "name"
+		};
+	}
+	/** Whether `data` stays on screen while `geography` loads, because it is a fair stand-in. */
+	get placeholder() {
+		return false;
+	}
+	/** Shapes a layer brings in, given the `data` the chart was created with. */
+	adopt(layer, _given) {
+		return layer;
+	}
+	/** Features on show. */
+	get features() {
+		return this.options.data?.features ?? [];
+	}
+	render() {
+		const layer = this.options.geography;
+		if (layer && layer !== this.#layer) this.#place(layer);
+		return super.render();
+	}
+	async ready() {
+		await super.ready();
+		const layer = this.options.geography;
+		if (!layer) return;
+		await GeoAtlas.load(layer);
+		if (this.host && layer !== this.#layer) this.render();
+	}
+	#place(layer) {
+		if (!this.#layer) this.#given ??= this.options.data;
+		const ready = GeoAtlas.peek(layer);
+		if (ready) {
+			this.#layer = layer;
+			this.options = {
+				...this.options,
+				data: this.adopt(ready, this.#given)
+			};
+			return;
+		}
+		if (!this.#layer && !this.placeholder) this.options = {
+			...this.options,
+			data: void 0
+		};
+		if (this.#loading === layer) return;
+		this.#loading = layer;
+		GeoAtlas.load(layer).then(() => {
+			this.#loading = void 0;
+			if (this.options.geography === layer && this.host) this.render();
+		}).catch((error) => {
+			this.#loading = void 0;
+			console.error(error);
+		});
+	}
+	/** Coarse world outlines give way to finer ones once the view is close enough to show it. */
+	settled(scale) {
+		if (scale >= SHARPEN_AT && this.options.geography === GeoLayer.World110m) this.update({ geography: GeoLayer.World50m });
+	}
+	target() {
+		const { features } = this;
+		return features.length ? {
+			type: "FeatureCollection",
+			features
+		} : null;
+	}
+	regions() {
+		const { rows, join, value, name } = this.options;
+		const table = rows && index(rows, (row) => String(row[join]));
+		const generated = !!rows && !!this.options.data?.demo;
+		const seen = /* @__PURE__ */ new Map();
+		return this.features.map((feature, i) => {
+			const properties = feature.properties ?? {};
+			const id = String(properties[join] ?? feature.id ?? i);
+			const row = {
+				...properties,
+				...generated ? { [value]: null } : {},
+				...table?.get(id)
+			};
+			const count = seen.get(id) ?? 0;
+			seen.set(id, count + 1);
+			return {
+				key: count ? `${id}#${count}` : id,
+				feature,
+				name: String(row[name] ?? id),
+				value: finite(row[value]),
+				row
+			};
+		});
+	}
+	known(regions) {
+		return regions.filter((region) => region.value !== null);
+	}
+	table() {
+		return {
+			columns: ["name", "value"],
+			rows: this.regions().map((region) => [region.name, region.value])
+		};
+	}
+};
+export { RegionMap };

package/dist/charts/geomaps/RidgelineMap.js

@@ -0,0 +1,109 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoField, GeoInterpolation } from "./GeoField.js";
+import { GeoLand } from "./GeoLand.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { curveBasis, line, max, range } from "d3";
+// src/charts/geomaps/RidgelineMap.ts
+var STEPS = 150;
+/** Joy-plot map: parallels lifted by value, an expressive way to show a surface as a mountain range. */
+var RidgelineMap = class extends PointMap {
+	static meta = {
+		id: "ridgeline-map",
+		name: "Ridgeline map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Lifts lines of latitude by a smoothed value, so concentration reads like ridges rising from the map.",
+		tags: [
+			"map",
+			"joy plot",
+			"ridgeline",
+			"relief",
+			"lines"
+		],
+		sample: (seed) => GeoSamples.scatter(seed, 240),
+		variants: {
+			rows: [
+				34,
+				24,
+				46
+			],
+			projection: [
+				GeoProjectionKind.Equirectangular,
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Miller,
+				GeoProjectionKind.EqualEarth
+			],
+			occlude: [true, false],
+			landOnly: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			rows: 34,
+			projection: GeoProjectionKind.Equirectangular,
+			occlude: true,
+			landOnly: false,
+			graticule: false
+		};
+	}
+	get framed() {
+		return false;
+	}
+	gap(ctx) {
+		return ctx.plot.height / this.options.rows;
+	}
+	inset(ctx) {
+		return { top: this.gap(ctx) * 6 };
+	}
+	drawMap(ctx, frame) {
+		const { rows, occlude, landOnly, value } = this.options, { theme, palette } = ctx;
+		const field = new GeoField(this.coordinates(), {
+			interpolation: GeoInterpolation.Kernel,
+			bandwidth: 12
+		});
+		const latitudes = range(rows).map((i) => 74 - i * 130 / (rows - 1));
+		const lift = this.gap(ctx) * 5.5, land = this.land;
+		const samples = latitudes.map((lat) => range(151).map((i) => {
+			const lon = -179.9 + i * 359.8 / STEPS;
+			return {
+				lon,
+				lat,
+				at: frame.locate(lon, lat),
+				heat: landOnly && !GeoLand.at(land, lon, lat) ? 0 : field.at(lon, lat)
+			};
+		}));
+		const top = max(samples.flat(), (d) => d.heat) || 1;
+		const ridges = samples.map((points, i) => {
+			const visible = points.filter((d) => d.at);
+			const coords = visible.map((d) => [d.at[0], d.at[1] - d.heat / top * lift]);
+			const base = visible.map((d) => d.at);
+			return {
+				key: `${i}`,
+				lat: latitudes[i],
+				coords,
+				base,
+				peak: Math.max(0, ...visible.map((d) => d.heat))
+			};
+		}).filter((d) => d.coords.length > 1);
+		const stroke = palette.color(value), trace = line().curve(curveBasis);
+		const parts = ridges.flatMap((ridge) => [...occlude ? [{
+			...ridge,
+			part: "mask"
+		}] : [], {
+			...ridge,
+			part: "line"
+		}]);
+		const lines = ctx.marks("ridges", "path", parts, (d) => `${d.key}/${d.part}`).order().attr("d", (d) => d.part === "line" ? trace(d.coords) ?? "" : `${trace(d.coords)}L${[...d.base].reverse().map(([x, y]) => `${x},${y}`).join("L")}Z`).attr("fill", (d) => d.part === "line" ? "none" : theme.surface).attr("stroke", (d) => d.part === "line" ? stroke : "none").attr("stroke-width", 1.1).attr("stroke-linejoin", "round").filter((d) => d.part === "line");
+		ctx.drawOn(lines);
+		ctx.hover(lines, (d) => ({
+			title: `Latitude ${d.lat.toFixed(0)}°`,
+			color: stroke,
+			rows: [["Peak", +d.peak.toFixed(1)]]
+		}));
+	}
+};
+export { RidgelineMap };