@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geomaps/GraticuleMap.js

@@ -0,0 +1,42 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { WorldSample } from "../../data/WorldSample.js";
+import { GeoProjections } from "./GeoProjection.js";
+import { RegionMap } from "./RegionMap.js";
+// src/charts/geomaps/GraticuleMap.ts
+/** The projection atlas: the world's grid and coastlines, for choosing or teaching a projection. */
+var GraticuleMap = class extends RegionMap {
+	static meta = {
+		id: "graticule-map",
+		name: "Graticule map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Draws meridians, parallels and land in any of 41 projections, to compare how each distorts the globe.",
+		tags: [
+			"map",
+			"projection",
+			"atlas",
+			"grid",
+			"reference"
+		],
+		sample: (seed) => WorldSample.countries(seed),
+		variants: {
+			projection: GeoProjections.world,
+			graticuleStep: [
+				30,
+				15,
+				10
+			]
+		}
+	};
+	target() {
+		return null;
+	}
+	drawMap(ctx, frame) {
+		const { theme } = ctx;
+		const shapes = ctx.marks("regions", "path", this.regions(), (d) => d.key).attr("fill", theme.axis).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		this.fill(ctx, shapes, (d) => frame.path(d.feature) ?? "", .75);
+		ctx.hover(shapes, (d) => ({ title: d.name }));
+	}
+};
+export { GraticuleMap };

package/dist/charts/geomaps/HatchedChoropleth.js

@@ -0,0 +1,110 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { GeoClasses, GeoClassification } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { range, scaleLinear } from "d3";
+// src/charts/geomaps/HatchedChoropleth.ts
+var GeoHatch = /* @__PURE__ */ function(GeoHatch) {
+	GeoHatch["Diagonal"] = "diagonal";
+	GeoHatch["Horizontal"] = "horizontal";
+	GeoHatch["Vertical"] = "vertical";
+	GeoHatch["Crosshatch"] = "crosshatch";
+	GeoHatch["Stipple"] = "stipple";
+	return GeoHatch;
+}({});
+var patterns = 0;
+/** Class patterns instead of colour, for print, greyscale and colour-blind-safe reading: denser means higher. */
+var HatchedChoropleth = class extends RegionMap {
+	static meta = {
+		id: "hatched-choropleth",
+		name: "Hatched choropleth",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Fills regions with line or dot patterns whose density rises with value, for print and monochrome maps.",
+		tags: [
+			"map",
+			"pattern",
+			"monochrome",
+			"print",
+			"engraved"
+		],
+		sample: (seed) => GeoSamples.regions(seed),
+		variants: {
+			hatch: [
+				"diagonal",
+				"horizontal",
+				"vertical",
+				"crosshatch",
+				"stipple"
+			],
+			classification: [
+				GeoClassification.Quantile,
+				GeoClassification.EqualInterval,
+				GeoClassification.NaturalBreaks
+			],
+			bins: [
+				4,
+				3,
+				5
+			],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth
+			]
+		}
+	};
+	patternId = `geo-hatch-${++patterns}`;
+	defaults() {
+		return {
+			...super.defaults(),
+			hatch: "diagonal",
+			classification: GeoClassification.Quantile,
+			bins: 4,
+			graticule: false
+		};
+	}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	tile(spacing) {
+		const s = spacing, mid = s / 2;
+		switch (this.options.hatch) {
+			case "horizontal": return `M0,${mid}H${s}`;
+			case "vertical": return `M${mid},0V${s}`;
+			case "crosshatch": return `M0,${mid}H${s}M${mid},0V${s}`;
+			case "stipple": return `M${mid},${mid}h0.01`;
+			default: return `M0,${s}L${s},0M${-mid},${mid}L${mid},${-mid}M${mid},${s + mid}L${s + mid},${mid}`;
+		}
+	}
+	drawPatterns(ctx, classes) {
+		const spacings = scaleLinear([0, Math.max(1, classes.bins - 1)], [9, 3]);
+		const tiles = ctx.marks("patterns", "pattern", range(classes.bins)).attr("id", (i) => `${this.patternId}-${i}`).attr("patternUnits", "userSpaceOnUse").attr("width", (i) => spacings(i)).attr("height", (i) => spacings(i));
+		tiles.selectAll("rect").data((i) => [i]).join("rect").attr("width", (i) => spacings(i)).attr("height", (i) => spacings(i)).attr("fill", ctx.theme.surface);
+		tiles.selectAll("path").data((i) => [i]).join("path").attr("d", (i) => this.tile(spacings(i))).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", this.options.hatch === "stipple" ? 1.8 : .9).attr("stroke-linecap", "round");
+	}
+	classes() {
+		return new GeoClasses(this.known(this.regions()).map((region) => region.value), this.options.classification, this.options.bins);
+	}
+	drawMap(ctx, frame) {
+		const classes = this.classes(), { theme } = ctx;
+		this.drawPatterns(ctx, classes);
+		const shapes = ctx.marks("regions", "path", this.regions(), (d) => d.key).attr("fill", (d) => d.value === null ? theme.grid : `url(#${this.patternId}-${classes.bin(d.value)})`).attr("stroke", theme.inkMuted).attr("stroke-width", this.hairline(ctx));
+		this.fill(ctx, shapes, (d) => frame.path(d.feature) ?? "");
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			rows: [[this.options.value, d.value ?? "No data"]]
+		}));
+	}
+	drawKey(ctx, frame) {
+		const classes = this.classes(), width = Math.min(190, ctx.plot.width * .6), y = frame.height + 8;
+		const x = scaleLinear([classes.min, classes.max], [0, width]);
+		ctx.marks("key-swatches", "rect", range(classes.bins)).attr("x", (i) => x(classes.breaks[i])).attr("y", y).attr("height", 10).attr("width", (i) => Math.max(1, x(classes.breaks[i + 1]) - x(classes.breaks[i]) - 2)).attr("fill", (i) => `url(#${this.patternId}-${i})`).attr("stroke", ctx.theme.inkMuted).attr("stroke-width", .5);
+		ctx.text(ctx.marks("key-ticks", "text", [classes.min, classes.max]).attr("x", (d) => x(d)).attr("y", y + 21).attr("text-anchor", (_, i) => i ? "end" : "start").text((d) => Scales.format(d, classes.max)), 10, "muted");
+	}
+};
+export { GeoHatch, HatchedChoropleth };

package/dist/charts/geomaps/HeatMapGeo.js

@@ -0,0 +1,114 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoField, GeoInterpolation, GeoKernel } from "./GeoField.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoClasses } from "./GeoClasses.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { max, range } from "d3";
+// src/charts/geomaps/HeatMapGeo.ts
+var CUTOFF = .04;
+/** Smooths values into a gridded heat surface on the graticule, so cells stay true to latitude and longitude. */
+var HeatMapGeo = class extends PointMap {
+	static meta = {
+		id: "heat-map-geo",
+		name: "Geographic heat map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Spreads each value through a spherical kernel onto a lat/lon grid, showing smooth hot spots.",
+		tags: [
+			"map",
+			"heatmap",
+			"kernel",
+			"hot spot",
+			"grid"
+		],
+		sample: (seed) => GeoSamples.scatter(seed, 240),
+		variants: {
+			kernel: [
+				GeoKernel.Gaussian,
+				GeoKernel.Quartic,
+				GeoKernel.Uniform
+			],
+			bandwidth: [16, 28],
+			resolution: [
+				3,
+				5,
+				8
+			],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Orthographic,
+				GeoProjectionKind.AzimuthalEqualArea
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			kernel: GeoKernel.Gaussian,
+			bandwidth: 16,
+			resolution: 3,
+			graticule: false
+		};
+	}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	cells() {
+		const { kernel, bandwidth, resolution } = this.options;
+		const field = new GeoField(this.coordinates(), {
+			interpolation: GeoInterpolation.Kernel,
+			kernel,
+			bandwidth
+		});
+		const step = resolution;
+		const cells = range(-90, 90, step).flatMap((south) => range(-180, 180, step).map((west) => {
+			const lon = west + step / 2, lat = south + step / 2;
+			return {
+				key: `${west},${south}`,
+				west,
+				south,
+				lon,
+				lat,
+				heat: field.at(lon, lat)
+			};
+		}));
+		const top = max(cells, (d) => d.heat) || 1;
+		return {
+			top,
+			cells: cells.filter((d) => d.heat > top * CUTOFF)
+		};
+	}
+	/** Cell outline with subdivided edges, so parallels bend with the projection. */
+	polygon(west, south) {
+		const step = this.options.resolution, east = Math.min(180, west + step), north = Math.min(90, south + step), mid = (west + east) / 2;
+		return {
+			type: "Polygon",
+			coordinates: [[
+				[west, south],
+				[west, north],
+				[mid, north],
+				[east, north],
+				[east, south],
+				[mid, south],
+				[west, south]
+			]]
+		};
+	}
+	drawMap(ctx, frame) {
+		this.drawGround(ctx, frame);
+		const { cells, top } = this.cells();
+		const shapes = ctx.marks("cells", "path", cells, (d) => d.key).attr("fill", (d) => ctx.palette.sequential(d.heat / top)).attr("stroke", (d) => ctx.palette.sequential(d.heat / top)).attr("stroke-width", .5);
+		this.fill(ctx, shapes, (d) => frame.path(this.polygon(d.west, d.south)) ?? "", .86);
+		ctx.hover(shapes, (d) => ({
+			title: `${d.lat.toFixed(1)}°, ${d.lon.toFixed(1)}°`,
+			rows: [["Heat", +d.heat.toFixed(1)]]
+		}));
+		GeoLegend.classes(ctx, frame, new GeoClasses([0, top]), (value) => ctx.palette.sequential(value / top));
+	}
+};
+export { HeatMapGeo };

package/dist/charts/geomaps/HexTileMap.js

@@ -0,0 +1,96 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { TileMap } from "./TileMap.js";
+import { range } from "d3";
+// src/charts/geomaps/HexTileMap.ts
+var GeoHexOrientation = /* @__PURE__ */ function(GeoHexOrientation) {
+	GeoHexOrientation["Pointy"] = "pointy";
+	GeoHexOrientation["Flat"] = "flat";
+	return GeoHexOrientation;
+}({});
+var hexagon = (radius, offset) => `${range(6).map((i) => {
+	const angle = offset + i * Math.PI / 3;
+	return `${i ? "L" : "M"}${(Math.cos(angle) * radius).toFixed(2)},${(Math.sin(angle) * radius).toFixed(2)}`;
+}).join("")}Z`;
+/** Equal hexagons per region, so small and large regions weigh the same: the honest choropleth for unequal areas. */
+var HexTileMap = class extends TileMap {
+	static meta = {
+		id: "hex-tile-map",
+		name: "Hex tile map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Gives every region one equal hexagon near its true place, so tiny regions are as visible as vast ones.",
+		tags: [
+			"map",
+			"hexagon",
+			"tile",
+			"cartogram",
+			"grid"
+		],
+		sample: (seed) => GeoSamples.inhabited(seed),
+		variants: {
+			orientation: ["pointy", "flat"],
+			coverage: [
+				.42,
+				.3,
+				.6
+			],
+			projection: [
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.Miller
+			],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: "pointy"
+		};
+	}
+	get pointy() {
+		return this.options.orientation === "pointy";
+	}
+	/** Circumradius of a hexagon of this area. */
+	sizeFor(area) {
+		return Math.sqrt(2 * area / (3 * Math.sqrt(3)));
+	}
+	lattice(radius, { width, height }) {
+		const wide = Math.sqrt(3) * radius, tall = 1.5 * radius;
+		const [major, minor] = this.pointy ? [height, width] : [width, height];
+		const cells = [];
+		range(Math.floor((major - 2 * radius) / tall) + 1).forEach((row) => {
+			for (let along = wide / 2 + (row % 2 ? wide / 2 : 0); along <= minor - wide / 2; along += wide) {
+				const across = radius + row * tall;
+				cells.push(this.pointy ? [along, across] : [across, along]);
+			}
+		});
+		return cells;
+	}
+	drawMap(ctx, frame) {
+		const tiles = this.tiles(frame), tone = this.tone(ctx, tiles), radius = tiles[0]?.size ?? 0;
+		const shape = hexagon(Math.max(0, radius - 1), this.pointy ? Math.PI / 6 : 0);
+		const hexes = ctx.marks("tiles", "path", tiles, (d) => d.key).attr("fill", tone);
+		ctx.set(hexes, {
+			d: shape,
+			transform: (d) => `translate(${d.x},${d.y})`,
+			"fill-opacity": 1
+		}, {
+			d: shape,
+			transform: (d) => `translate(${d.x},${d.y})`,
+			"fill-opacity": 0
+		}, 2);
+		ctx.hover(hexes, (d) => ({
+			title: d.name,
+			color: tone(d),
+			rows: [[this.options.value, d.value ?? "No data"]]
+		}));
+		this.drawCodes(ctx, tiles, tone, radius * 1.6);
+	}
+};
+export { GeoHexOrientation, HexTileMap };

package/dist/charts/geomaps/InsetMap.js

@@ -0,0 +1,124 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoClasses } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoFraming, GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { geoGraticule, geoNaturalEarth1, geoOrthographic, geoPath } from "d3";
+// src/charts/geomaps/InsetMap.ts
+var GeoFocus = /* @__PURE__ */ function(GeoFocus) {
+	GeoFocus["Europe"] = "europe";
+	GeoFocus["NorthAmerica"] = "north-america";
+	GeoFocus["SouthAmerica"] = "south-america";
+	GeoFocus["Africa"] = "africa";
+	GeoFocus["Asia"] = "asia";
+	GeoFocus["Oceania"] = "oceania";
+	return GeoFocus;
+}({});
+var GeoLocator = /* @__PURE__ */ function(GeoLocator) {
+	GeoLocator["Globe"] = "globe";
+	GeoLocator["World"] = "world";
+	return GeoLocator;
+}({});
+var GeoCorner = /* @__PURE__ */ function(GeoCorner) {
+	GeoCorner["BottomLeft"] = "bottom-left";
+	GeoCorner["TopRight"] = "top-right";
+	return GeoCorner;
+}({});
+var BOXES = {
+	["europe"]: [[-12, 35], [36, 62]],
+	["north-america"]: [[-128, 14], [-62, 56]],
+	["south-america"]: [[-84, -56], [-32, 13]],
+	["africa"]: [[-19, -36], [52, 38]],
+	["asia"]: [[60, 2], [146, 54]],
+	["oceania"]: [[110, -48], [180, -6]]
+};
+/** A detailed regional map with a small locator, so readers always know where in the world they are looking. */
+var InsetMap = class extends RegionMap {
+	static meta = {
+		id: "inset-map",
+		name: "Inset locator map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Zooms a thematic map to one region and adds a small globe or world inset that marks the extent.",
+		tags: [
+			"map",
+			"locator",
+			"overview",
+			"detail",
+			"zoom"
+		],
+		sample: (seed) => GeoSamples.regions(seed),
+		variants: {
+			focus: [
+				"europe",
+				"north-america",
+				"south-america",
+				"africa",
+				"asia",
+				"oceania"
+			],
+			locator: ["globe", "world"],
+			corner: ["top-right", "bottom-left"],
+			projection: [
+				GeoProjectionKind.Albers,
+				GeoProjectionKind.AzimuthalEqualArea,
+				GeoProjectionKind.Mercator
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			focus: "europe",
+			locator: "globe",
+			corner: "top-right",
+			projection: GeoProjectionKind.Albers,
+			framing: GeoFraming.Data,
+			graticule: false
+		};
+	}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	get box() {
+		return this.options.box ?? BOXES[this.options.focus];
+	}
+	get outline() {
+		const [[west, south], [east, north]] = this.box;
+		return geoGraticule().extent([[west, south], [east, north]]).precision(2).outline();
+	}
+	target() {
+		return this.outline;
+	}
+	drawMap(ctx, frame) {
+		const { theme } = ctx, regions = this.regions().map((region) => ({
+			...region,
+			d: frame.path(region.feature) ?? ""
+		})).filter((region) => region.d);
+		const classes = new GeoClasses(this.known(regions).map((region) => region.value));
+		const shapes = ctx.marks("regions", "path", regions, (d) => d.key).attr("fill", (d) => d.value === null ? theme.grid : ctx.palette.sequential(classes.tone(d.value))).attr("stroke", theme.surface).attr("stroke-width", Math.max(.5, this.hairline(ctx)));
+		this.fill(ctx, shapes, (d) => d.d);
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			rows: [[this.options.value, d.value ?? "No data"]]
+		}));
+		this.drawLocator(ctx, frame);
+		GeoLegend.classes(ctx, frame, classes, (value) => ctx.palette.sequential(classes.tone(value)));
+	}
+	drawLocator(ctx, frame) {
+		const { locator, corner, data } = this.options, { theme } = ctx, [[west, south], [east, north]] = this.box;
+		const globe = locator === "globe";
+		const tall = Math.max(44, Math.min(frame.height * .36, 100)), wide = globe ? tall : tall * 1.9;
+		const left = corner === "top-right" ? frame.width - wide - 4 : 4, top = corner === "top-right" ? 4 : frame.height - tall - 4;
+		const projection = globe ? geoOrthographic().rotate([-(west + east) / 2, -(south + north) / 2]) : geoNaturalEarth1();
+		projection.fitExtent([[left + 3, top + 3], [left + wide - 3, top + tall - 3]], { type: "Sphere" });
+		const path = geoPath(projection);
+		ctx.marks("inset-frame", "rect", [0]).attr("x", left).attr("y", top).attr("width", wide).attr("height", tall).attr("rx", 4).attr("fill", theme.surface).attr("stroke", theme.axis).attr("stroke-width", 1);
+		ctx.marks("inset-sphere", "path", [{ type: "Sphere" }]).attr("d", (d) => path(d) ?? "").attr("fill", theme.grid).attr("fill-opacity", .4).attr("stroke", theme.axis).attr("stroke-width", .75);
+		ctx.marks("inset-land", "path", [data], () => "land").attr("d", (d) => path(d) ?? "").attr("fill", theme.axis);
+		ctx.marks("inset-focus", "path", [this.outline]).attr("d", (d) => path(d) ?? "").attr("fill", ctx.palette.color(this.options.value)).attr("fill-opacity", .35).attr("stroke", ctx.palette.color(this.options.value)).attr("stroke-width", 1.5);
+	}
+};
+export { GeoCorner, GeoFocus, GeoLocator, InsetMap };