@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threeglobe/ContourGlobe.js

@@ -0,0 +1,117 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { densityRaster } from "./GeoField.js";
+import { GeoMesher } from "./GeoMesher.js";
+import { GlobeContourMode, GlobeFieldWeight, GlobeKernel, GlobeLand, GlobeSurface } from "./GlobeEnums.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { contours, geoArea } from "d3";
+// src/charts/threeglobe/ContourGlobe.ts
+var STEP = 3;
+var RISE = .17;
+/** Isolines of a density field on the earth: for reading where values cross set thresholds. */
+var ContourGlobe = class extends SiteGlobeChart {
+	static meta = {
+		id: "contour-globe",
+		name: "Contour globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Traces a smoothed field as isolines, filled bands or stacked terraces that follow the surface.",
+		tags: [
+			"isolines",
+			"isobands",
+			"topographic",
+			"terrain"
+		],
+		sample: (seed) => GlobeSamples.scatter(seed, 320),
+		variants: {
+			mode: Object.values(GlobeContourMode),
+			levels: [
+				6,
+				4,
+				9
+			],
+			bandwidth: [9, 14],
+			weight: Object.values(GlobeFieldWeight),
+			surface: Object.values(GlobeSurface)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mode: GlobeContourMode.Lines,
+			levels: 6,
+			bandwidth: 9,
+			weight: GlobeFieldWeight.Density,
+			land: GlobeLand.Solid
+		};
+	}
+	/** Spherical winding: d3 reads a polygon wound the wrong way as everything outside it. */
+	rewind(coordinates) {
+		return {
+			type: "MultiPolygon",
+			coordinates: coordinates.map((polygon) => {
+				return geoArea({
+					type: "Polygon",
+					coordinates: polygon
+				}) > Math.PI * 2 ? polygon.map((ring) => [...ring].reverse()) : polygon;
+			})
+		};
+	}
+	draw(ctx) {
+		const { mode, levels, bandwidth, weight } = this.options, { sites } = this;
+		if (!sites.length) return;
+		const field = densityRaster(sites, STEP, bandwidth, GlobeKernel.Gaussian, (site) => weight === GlobeFieldWeight.Value ? Math.abs(site.value) : 1);
+		const thresholds = Array.from({ length: levels }, (_, i) => .15 + .8 * i / levels);
+		const bands = contours().size([field.columns, field.rows]).smooth(true).thresholds(thresholds)(Array.from(field.values)).map((band, index) => {
+			const coordinates = band.coordinates.map((polygon) => polygon.map((ring) => ring.map(([x, y]) => [-180 + (x - .5) * STEP, 90 - (y - .5) * STEP])));
+			return {
+				index,
+				level: band.value,
+				feature: {
+					type: "Feature",
+					properties: null,
+					geometry: this.rewind(coordinates)
+				}
+			};
+		}).filter(({ feature }) => feature.geometry.coordinates.length);
+		const buffer = new MeshBuffer();
+		for (const { index, level, feature } of bands) {
+			const tone = ctx.color(this.heat(ctx, level));
+			if (mode === GlobeContourMode.Lines) for (const ring of GeoMesher.patch(feature, this.body).rings) for (const run of this.runs(ring)) buffer.tube(run.map(([u, v]) => this.body.patchPoint(u, v, .008)), () => .0036, tone, index, 4);
+			else {
+				const top = mode === GlobeContourMode.Terraces ? .008 + level * RISE : .005 + index * .0012;
+				const floor = mode === GlobeContourMode.Terraces ? Math.max(.004, top - RISE / (levels + 1)) : top;
+				this.region(buffer, feature, floor, top, tone, index, mode === GlobeContourMode.Terraces);
+			}
+		}
+		if (buffer.faces) {
+			const mesh = buffer.build(ctx, {
+				roughness: .72,
+				sweep: mode === GlobeContourMode.Lines
+			});
+			mesh.castShadow = mesh.receiveShadow = mode === GlobeContourMode.Terraces;
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => ({
+				title: "Contour",
+				rows: [["Share of peak", `${Math.round((bands.find((band) => band.index === i)?.level ?? 0) * 100)}%`]]
+			}));
+		}
+		this.drawKey(ctx, Array.from({ length: levels }, (_, i) => ({
+			from: i / levels,
+			to: (i + 1) / levels,
+			color: this.heat(ctx, (i + 1) / (levels + 1))
+		})), 0, 1);
+	}
+	/** Cuts a closed ring at the seams so no line runs along the edge of the map. */
+	runs(ring) {
+		const closed = [...ring, ring[0]], runs = [[closed[0]]];
+		for (let i = 1; i < closed.length; i++) {
+			if (this.body.seam(closed[i - 1], closed[i])) runs.push([]);
+			runs.at(-1).push(closed[i]);
+		}
+		return runs.filter((run) => run.length > 1);
+	}
+};
+export { ContourGlobe };

package/dist/charts/threeglobe/CylinderSurface.js

@@ -0,0 +1,39 @@
+import { GeoSurface } from "./GeoSurface.js";
+import { regionLines, regionPolygons, unwrapped } from "./GeoRings.js";
+import { Vector3 } from "three";
+// src/charts/threeglobe/CylinderSurface.ts
+var rad = Math.PI / 180;
+/** Plate carrée wrapped around a drum: the whole world is readable in a single turn. */
+var CylinderSurface = class CylinderSurface extends GeoSurface {
+	static radius = .62;
+	static halfHeight = .72;
+	key = "cylinder";
+	maxEdge = 9;
+	place(lon, lat, lift = 0, out = new Vector3()) {
+		const r = CylinderSurface.radius + lift;
+		return out.set(r * Math.sin(lon * rad), lat / 90 * CylinderSurface.halfHeight, r * Math.cos(lon * rad));
+	}
+	patchPoint(u, v, lift, out) {
+		return this.place(u, v, lift, out);
+	}
+	normal(point, out = new Vector3()) {
+		return out.set(point.x, 0, point.z).normalize();
+	}
+	trace(a, b, steps, lift) {
+		const span = (b[0] - a[0] + 540) % 360 - 180;
+		return Array.from({ length: steps + 1 }, (_, i) => {
+			const t = i / steps;
+			return this.place(a[0] + span * t, a[1] + (b[1] - a[1]) * t, lift(t));
+		});
+	}
+	polygons(geometry) {
+		return unwrapped(regionPolygons(geometry));
+	}
+	lines(geometry) {
+		return regionLines(geometry);
+	}
+	faces(point, camera) {
+		return point.x * camera.x + point.z * camera.z > CylinderSurface.radius ** 2;
+	}
+};
+export { CylinderSurface };

package/dist/charts/threeglobe/DotDensityGlobe.js

@@ -0,0 +1,117 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoMesher } from "./GeoMesher.js";
+import { regionPolygons, unwrapped } from "./GeoRings.js";
+import { GlobeDotPlacement, GlobeLand, GlobeSurface, GlobeSymbol } from "./GlobeEnums.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { RegionGlobeChart } from "./RegionGlobeChart.js";
+import { geoCentroid, group, randomLcg } from "d3";
+import { CircleGeometry, SphereGeometry } from "three";
+// src/charts/threeglobe/DotDensityGlobe.ts
+var LATTICE = 36e3;
+/** One dot per unit inside each country: totals become texture, and small numbers remain individually visible. */
+var DotDensityGlobe = class extends RegionGlobeChart {
+	static meta = {
+		id: "dot-density-globe",
+		name: "Dot density globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Fills each country with one dot per unit of value, so density of dots reads as magnitude.",
+		tags: [
+			"dot density",
+			"population",
+			"pointillist"
+		],
+		sample: (seed) => GlobeSamples.regions(seed),
+		variants: {
+			unit: [
+				2,
+				1,
+				4
+			],
+			placement: [GlobeDotPlacement.Lattice, GlobeDotPlacement.Random],
+			symbol: [GlobeSymbol.Disc, GlobeSymbol.Sphere],
+			land: [GlobeLand.Outline, GlobeLand.Bare],
+			surface: Object.values(GlobeSurface)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			unit: 2,
+			placement: GlobeDotPlacement.Lattice,
+			symbol: GlobeSymbol.Disc,
+			land: GlobeLand.Outline
+		};
+	}
+	lattice() {
+		const { features } = this, { unit } = this.options;
+		const homes = group(GeoMesher.dots(features, LATTICE), (dot) => dot.feature);
+		return features.flatMap((feature, index) => {
+			const count = Math.round(Math.abs(this.reading(feature) ?? 0) / unit), spots = homes.get(index) ?? [];
+			if (!spots.length) {
+				const [lon, lat] = geoCentroid(feature);
+				return count ? [{
+					lon,
+					lat,
+					feature,
+					index
+				}] : [];
+			}
+			return Array.from({ length: Math.min(count, spots.length) }, (_, i) => {
+				const { lon, lat } = spots[Math.floor(i * spots.length / Math.min(count, spots.length))];
+				return {
+					lon,
+					lat,
+					feature,
+					index
+				};
+			});
+		});
+	}
+	scattered() {
+		const { unit } = this.options, random = randomLcg(.61);
+		return this.features.flatMap((feature, index) => {
+			const polygons = unwrapped(regionPolygons(feature.geometry)), points = polygons.flat(2);
+			if (!points.length) return [];
+			const [west, east] = [Math.min(...points.map((p) => p[0])), Math.max(...points.map((p) => p[0]))];
+			const [south, north] = [Math.min(...points.map((p) => p[1])), Math.max(...points.map((p) => p[1]))];
+			const motes = [], count = Math.round(Math.abs(this.reading(feature) ?? 0) / unit);
+			for (let tries = 0; tries < count * 30 && motes.length < count; tries++) {
+				const lon = west + random() * (east - west), lat = south + random() * (north - south);
+				if (polygons.some((polygon) => GeoMesher.inside(polygon, lon, lat))) motes.push({
+					lon,
+					lat,
+					feature,
+					index
+				});
+			}
+			if (count && !motes.length) {
+				const [lon, lat] = geoCentroid(feature);
+				motes.push({
+					lon,
+					lat,
+					feature,
+					index
+				});
+			}
+			return motes;
+		});
+	}
+	draw(ctx) {
+		const { placement, symbol } = this.options;
+		const motes = (placement === GlobeDotPlacement.Lattice ? this.lattice() : this.scattered()).filter(({ lat }) => this.body.covers(lat));
+		const shape = symbol === GlobeSymbol.Sphere ? new SphereGeometry(.0054, 6, 5) : new CircleGeometry(.007, 8);
+		const tone = ctx.palette.sequential(.65);
+		this.stamp(ctx, shape, motes, ({ lon, lat }, _, node, p) => {
+			const at = this.body.place(lon, lat, .004);
+			node.position.copy(at);
+			this.faceOut(node, at);
+			node.scale.setScalar(Math.max(p, .001));
+		}, () => tone, ({ feature }) => this.regionTip(feature, tone), {
+			grow: true,
+			shadow: false
+		});
+	}
+};
+export { DotDensityGlobe };

package/dist/charts/threeglobe/ExtrudedMapChart.js

@@ -0,0 +1,68 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { GlobeClassify, GlobeProjection } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { MapPlaneChart } from "./MapPlaneChart.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+// src/charts/threeglobe/ExtrudedMapChart.ts
+var TALL = .14;
+/** A flat map whose countries rise by value: a choropleth with a second, height-based read of the same number. */
+var ExtrudedMapChart = class extends MapPlaneChart {
+	static meta = {
+		id: "extruded-map",
+		name: "Extruded map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Extrudes each country from a projected map, so height and colour both show the value.",
+		tags: [
+			"3d choropleth",
+			"prism",
+			"city skyline map"
+		],
+		sample: (seed) => GlobeSamples.regions(seed),
+		variants: {
+			projection: [
+				GlobeProjection.NaturalEarth,
+				GlobeProjection.Equirectangular,
+				GlobeProjection.Mercator,
+				GlobeProjection.EqualEarth,
+				GlobeProjection.Robinson
+			],
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Sqrt,
+				ScaleKind.Log
+			],
+			stepped: [false, true],
+			plate: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			scale: ScaleKind.Linear,
+			stepped: false
+		};
+	}
+	draw(ctx) {
+		const { scale, stepped } = this.options, { features } = this;
+		const values = this.values(), size = magnitude(values, scale), classes = this.classes(ctx, values.map(size), stepped ? GlobeClassify.EqualInterval : GlobeClassify.Continuous, 5);
+		const buffer = new MeshBuffer(), neutral = ctx.color(this.missing(ctx));
+		features.forEach((feature, i) => {
+			const value = this.reading(feature);
+			if (value === null) return this.region(buffer, feature, .002, .002, neutral, i);
+			const t = stepped ? classes.level(size(value)) : size(value);
+			this.region(buffer, feature, 0, .008 + t * TALL, ctx.color(classes.color(size(value))), i, true);
+		});
+		const mesh = buffer.build(ctx, {
+			roughness: .7,
+			duration: 1.2
+		});
+		mesh.castShadow = mesh.receiveShadow = true;
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => this.regionTip(features[i]));
+		if (values.length) this.drawKey(ctx, classes.stops, 0, Math.max(...values.map(Math.abs)));
+	}
+};
+export { ExtrudedMapChart };

package/dist/charts/threeglobe/FlatProjectionPlane.js

@@ -0,0 +1,64 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { GlobeLand, GlobeProjection, GlobeSurface } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { geoCircle } from "d3";
+import { SphereGeometry } from "three";
+// src/charts/threeglobe/FlatProjectionPlane.ts
+/** A world map as a physical slab, with any projection: for flat reference maps and for comparing distortion. */
+var FlatProjectionPlane = class extends SiteGlobeChart {
+	static meta = {
+		id: "flat-projection-plane",
+		name: "Projection plane",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Lays the world flat through a chosen projection, with optional Tissot circles exposing its distortion.",
+		tags: [
+			"map projection",
+			"tissot",
+			"mollweide",
+			"robinson",
+			"interrupted"
+		],
+		sample: (seed) => SampleData.cities(seed),
+		variants: {
+			projection: Object.values(GlobeProjection),
+			land: [
+				GlobeLand.Solid,
+				GlobeLand.Dotted,
+				GlobeLand.Outline
+			],
+			graticule: [true, false],
+			tissot: [false, true]
+		},
+		valid: (v) => v.projection !== GlobeProjection.Goode || v.land !== GlobeLand.Solid
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			surface: GlobeSurface.Plane,
+			graticule: true,
+			tissot: false
+		};
+	}
+	draw(ctx) {
+		const { sites } = this, size = magnitude(sites.map((site) => site.value));
+		if (this.options.tissot) {
+			const rings = [];
+			for (let lat = -60; lat <= 60; lat += 30) for (let lon = -150; lon <= 150; lon += 30) rings.push(geoCircle().center([lon, lat]).radius(6).precision(12)());
+			this.polylines(ctx, rings.flatMap((ring) => this.body.lines({
+				type: "LineString",
+				coordinates: ring.coordinates[0]
+			})), this.theme.inkSecondary, .006);
+		}
+		const color = (site) => this.tone(ctx, site, size(site.value));
+		this.stamp(ctx, new SphereGeometry(1, 14, 10), sites, (site, _, node, p) => {
+			node.position.copy(this.body.place(site.lon, site.lat, .018));
+			node.scale.setScalar(Math.max(.016 * p, 1e-4));
+		}, color, (site) => this.siteTip(site, color(site)), { grow: true });
+		this.leaders(ctx, sites, 4, () => .05);
+	}
+};
+export { FlatProjectionPlane };

package/dist/charts/threeglobe/FlowGlobeChart.js

@@ -0,0 +1,95 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeArcProfile, GlobeLand, GlobeLinkWidth, GlobeParticle, GlobeSurface } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { LinkGlobeChart } from "./LinkGlobeChart.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { CapsuleGeometry, ConeGeometry, Object3D, SphereGeometry, Vector3 } from "three";
+// src/charts/threeglobe/FlowGlobeChart.ts
+var SHAPES = {
+	[GlobeParticle.Comet]: () => new ConeGeometry(.009, .075, 8),
+	[GlobeParticle.Bead]: () => new SphereGeometry(.0115, 10, 8),
+	[GlobeParticle.Dash]: () => new CapsuleGeometry(.0065, .04, 3, 8),
+	[GlobeParticle.Arrow]: () => new ConeGeometry(.019, .04, 3)
+};
+var up = new Vector3(0, 1, 0);
+var node = new Object3D();
+var next = new Vector3();
+/** Particles travelling along routes: for movement where direction and rate matter more than the route itself. */
+var FlowGlobeChart = class extends LinkGlobeChart {
+	static meta = {
+		id: "flow-globe",
+		name: "Flow globe",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Sends particles along routes between places, with the number of particles showing volume.",
+		tags: [
+			"particles",
+			"migration",
+			"trade flows",
+			"animated"
+		],
+		sample: (seed) => GlobeSamples.routes(seed),
+		variants: {
+			particle: Object.values(GlobeParticle),
+			rate: Object.values(GlobeLinkWidth),
+			profile: [GlobeArcProfile.Lofted, GlobeArcProfile.Hugging],
+			track: [true, false],
+			surface: Object.values(GlobeSurface)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			particle: GlobeParticle.Comet,
+			rate: GlobeLinkWidth.Value,
+			track: true,
+			speed: .11,
+			land: GlobeLand.Dotted
+		};
+	}
+	draw(ctx) {
+		const { links } = this, { particle, rate, track, speed } = this.options;
+		const size = magnitude(links.map((link) => link.value)), steps = 64;
+		const routes = links.map((link) => ({
+			link,
+			points: this.path(link, steps),
+			color: ctx.palette.color(link.source)
+		}));
+		if (track) {
+			const buffer = new MeshBuffer(), line = ctx.color(this.theme.inkMuted);
+			routes.forEach(({ points }, i) => buffer.tube(points, () => .002, line, i, 4));
+			const mesh = buffer.build(ctx, {
+				sweep: true,
+				duration: .9
+			});
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => this.linkTip(links[i], routes[i].color));
+		}
+		const motes = routes.flatMap((route) => {
+			const count = rate === GlobeLinkWidth.Value ? 2 + Math.round(size(route.link.value) * 6) : 4;
+			return Array.from({ length: count }, (_, k) => ({
+				route,
+				phase: k / count
+			}));
+		});
+		const pose = (mote, t, target) => {
+			const { points } = mote.route, along = (mote.phase + t) % 1 * (points.length - 1), at = Math.floor(along);
+			const a = points[at], b = points[Math.min(at + 1, points.length - 1)];
+			target.position.lerpVectors(a, b, along - at);
+			target.quaternion.setFromUnitVectors(up, next.subVectors(b, a).normalize());
+		};
+		const marks = this.stamp(ctx, SHAPES[particle](), motes, (mote, _, target) => pose(mote, 0, target), ({ route }) => route.color, ({ route }) => this.linkTip(route.link, route.color));
+		ctx.onFrame((seconds) => {
+			motes.forEach((mote, i) => {
+				pose(mote, seconds * speed, node);
+				node.updateMatrix();
+				marks.setMatrixAt(i, node.matrix);
+			});
+			marks.instanceMatrix.needsUpdate = true;
+			marks.boundingSphere = null;
+		});
+	}
+};
+export { FlowGlobeChart };

package/dist/charts/threeglobe/GeoField.js

@@ -0,0 +1,49 @@
+import { GlobeKernel } from "./GlobeEnums.js";
+// src/charts/threeglobe/GeoField.ts
+var rad = Math.PI / 180;
+var KERNELS = {
+	[GlobeKernel.Gaussian]: {
+		reach: 3,
+		shape: (u) => Math.exp(-.5 * u * u)
+	},
+	[GlobeKernel.Epanechnikov]: {
+		reach: 1.8,
+		shape: (u) => 1 - (u / 1.8) ** 2
+	},
+	[GlobeKernel.Triangular]: {
+		reach: 2,
+		shape: (u) => 1 - u / 2
+	}
+};
+/** Kernel density of sites measured along the sphere, so it does not stretch toward the poles. */
+function densityRaster(sites, step, bandwidth, kernel, weigh) {
+	const columns = Math.round(360 / step) + 1, rows = Math.round(180 / step) + 1, values = new Float64Array(columns * rows);
+	const { reach, shape } = KERNELS[kernel], limit = Math.cos(Math.min(180, reach * bandwidth) * rad);
+	const points = sites.map((site) => ({
+		sinLat: Math.sin(site.lat * rad),
+		cosLat: Math.cos(site.lat * rad),
+		sinLon: Math.sin(site.lon * rad),
+		cosLon: Math.cos(site.lon * rad),
+		weight: weigh(site)
+	}));
+	const lonSin = Float64Array.from({ length: columns }, (_, i) => Math.sin((-180 + i * step) * rad)), lonCos = Float64Array.from({ length: columns }, (_, i) => Math.cos((-180 + i * step) * rad));
+	for (let j = 0; j < rows; j++) {
+		const lat = (90 - j * step) * rad, sinLat = Math.sin(lat), cosLat = Math.cos(lat);
+		for (let i = 0; i < columns; i++) {
+			let sum = 0;
+			for (const point of points) {
+				const cosine = sinLat * point.sinLat + cosLat * point.cosLat * (lonCos[i] * point.cosLon + lonSin[i] * point.sinLon);
+				if (cosine > limit) sum += point.weight * shape(Math.acos(Math.min(1, cosine)) / rad / bandwidth);
+			}
+			values[i + j * columns] = sum;
+		}
+	}
+	const top = values.reduce((a, b) => Math.max(a, b), 0) || 1;
+	return {
+		columns,
+		rows,
+		step,
+		values: values.map((v) => v / top)
+	};
+}
+export { densityRaster };