@mstone6969/graph 0.0.0-stage → 0.1.0

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

package/dist/charts/geomaps/LabelledMap.js

@@ -0,0 +1,247 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { descending } from "d3";
+// src/charts/geomaps/LabelledMap.ts
+/** Fixed sets the label to the right; Best tries eight positions; Leader pulls labels clear on a thin line. */
+var GeoLabelPlacement = /* @__PURE__ */ function(GeoLabelPlacement) {
+	GeoLabelPlacement["Best"] = "best";
+	GeoLabelPlacement["Fixed"] = "fixed";
+	GeoLabelPlacement["Leader"] = "leader";
+	return GeoLabelPlacement;
+}({});
+var GeoLabelSubject = /* @__PURE__ */ function(GeoLabelSubject) {
+	GeoLabelSubject["Places"] = "places";
+	GeoLabelSubject["Regions"] = "regions";
+	GeoLabelSubject["Both"] = "both";
+	return GeoLabelSubject;
+}({});
+var CHAR = 6.2;
+var LINE = 13;
+var overlaps = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+/** Reference map with collision-free labels, ranked by importance: orient readers before showing data. */
+var LabelledMap = class extends PointMap {
+	static meta = {
+		id: "labelled-map",
+		name: "Labelled reference map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Names places and regions with greedy, collision-free label placement ranked by value, for orientation.",
+		tags: [
+			"map",
+			"reference",
+			"labels",
+			"atlas",
+			"annotation"
+		],
+		sample: (seed) => GeoSamples.cities(seed),
+		variants: {
+			placement: [
+				"best",
+				"fixed",
+				"leader"
+			],
+			subject: [
+				"places",
+				"regions",
+				"both"
+			],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Bertin
+			]
+		},
+		valid: (values) => values.subject !== "regions" || values.placement === "best"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			placement: "best",
+			subject: "places",
+			graticule: true
+		};
+	}
+	candidates(dot) {
+		const { placement } = this.options, gap = dot + 3;
+		if (placement === "fixed") return [[
+			gap,
+			4,
+			"start"
+		]];
+		if (placement === "leader") {
+			const far = gap + 16;
+			return [
+				[
+					far,
+					-far * .6,
+					"start"
+				],
+				[
+					-far,
+					-far * .6,
+					"end"
+				],
+				[
+					far,
+					far * .8,
+					"start"
+				],
+				[
+					-far,
+					far * .8,
+					"end"
+				],
+				[
+					far * 1.5,
+					4,
+					"start"
+				],
+				[
+					-far * 1.5,
+					4,
+					"end"
+				]
+			];
+		}
+		return [
+			[
+				gap,
+				4,
+				"start"
+			],
+			[
+				-gap,
+				4,
+				"end"
+			],
+			[
+				0,
+				-gap,
+				"middle"
+			],
+			[
+				0,
+				gap + 9,
+				"middle"
+			],
+			[
+				gap - 1,
+				-gap + 1,
+				"start"
+			],
+			[
+				1 - gap,
+				-gap + 1,
+				"end"
+			],
+			[
+				gap - 1,
+				gap + 7,
+				"start"
+			],
+			[
+				1 - gap,
+				gap + 7,
+				"end"
+			]
+		];
+	}
+	placeLabels(frame, sites, dot) {
+		const { subject, placement } = this.options;
+		const blocked = sites.map((d) => ({
+			x: d.x - dot,
+			y: d.y - dot,
+			w: dot * 2,
+			h: dot * 2
+		}));
+		const labels = [];
+		const fits = (box) => box.x >= 0 && box.y >= 0 && box.x + box.w <= frame.width && box.y + box.h <= frame.height && !blocked.some((other) => overlaps({
+			...box,
+			x: box.x - 3,
+			w: box.w + 6
+		}, other));
+		const boxOf = (x, y, width, anchor) => ({
+			x: anchor === "start" ? x : anchor === "end" ? x - width : x - width / 2,
+			y: y - LINE + 3,
+			w: width,
+			h: LINE
+		});
+		if (subject !== "regions") for (const site of [...sites].sort((a, b) => descending(a.value, b.value))) {
+			const width = site.name.length * CHAR;
+			for (const [dx, dy, anchor] of this.candidates(dot)) {
+				const textX = site.x + dx, textY = site.y + dy, box = boxOf(textX, textY, width, anchor);
+				if (!fits(box)) continue;
+				blocked.push(box);
+				labels.push({
+					...box,
+					key: `p${site.key}`,
+					text: site.name,
+					anchor,
+					textX,
+					textY,
+					tone: "ink",
+					from: placement === "leader" ? [site.x, site.y] : void 0
+				});
+				break;
+			}
+		}
+		if (subject !== "places") {
+			const regions = this.land.features.map((feature) => ({
+				feature,
+				area: frame.path.area(feature),
+				name: String(feature.properties?.name ?? ""),
+				bounds: frame.path.bounds(feature)
+			})).sort((a, b) => descending(a.area, b.area));
+			for (const { feature, name, bounds } of regions) {
+				const at = frame.anchor(feature), width = name.length * CHAR;
+				if (!at || !name || width > (bounds[1][0] - bounds[0][0]) * 1.35) continue;
+				const box = boxOf(at[0], at[1] + 4, width, "middle");
+				if (!fits(box)) continue;
+				blocked.push(box);
+				labels.push({
+					...box,
+					key: `r${name}`,
+					text: name,
+					anchor: "middle",
+					textX: at[0],
+					textY: at[1] + 4,
+					tone: "secondary"
+				});
+			}
+		}
+		return labels;
+	}
+	drawMap(ctx, frame) {
+		const { subject, value } = this.options, { theme } = ctx, dot = 4;
+		const lands = ctx.marks("land", "path", this.land.features, (d, i) => String(d.id ?? i)).attr("fill", theme.grid).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		this.fill(ctx, lands, (d) => frame.path(d) ?? "");
+		ctx.hover(lands, (d) => ({ title: String(d.properties?.name ?? "") }));
+		const sites = subject === "regions" ? [] : this.sites(frame);
+		const labels = this.placeLabels(frame, sites, dot);
+		ctx.marks("leaders", "line", labels.filter((d) => d.from), (d) => d.key).attr("x1", (d) => d.from[0]).attr("y1", (d) => d.from[1]).attr("x2", (d) => d.textX).attr("y2", (d) => d.textY - 4).attr("stroke", theme.inkMuted).attr("stroke-width", 1);
+		const fill = ctx.palette.color(value);
+		const dots = ctx.marks("places", "circle", sites, (d) => d.key).attr("fill", fill).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: dot
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 10);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [[value, d.value]]
+		}));
+		const text = ctx.marks("labels", "text", labels, (d) => d.key).attr("x", (d) => d.textX).attr("y", (d) => d.textY).attr("text-anchor", (d) => d.anchor).attr("pointer-events", "none").text((d) => d.text);
+		this.halo(ctx, ctx.text(text, 11).attr("fill", (d) => d.tone === "ink" ? theme.ink : theme.inkSecondary));
+	}
+};
+export { GeoLabelPlacement, GeoLabelSubject, LabelledMap };

package/dist/charts/geomaps/NonContiguousCartogram.js

@@ -0,0 +1,75 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { descending, quantile } from "d3";
+// src/charts/geomaps/NonContiguousCartogram.ts
+/** Olson's cartogram: each region shrinks in place until its area shows its value, keeping its true shape. */
+var NonContiguousCartogram = class extends RegionMap {
+	static meta = {
+		id: "non-contiguous-cartogram",
+		name: "Non-contiguous cartogram",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Scales each region about its centre so drawn area matches value, keeping shapes recognisable.",
+		tags: [
+			"map",
+			"cartogram",
+			"olson",
+			"value by area"
+		],
+		sample: (seed) => GeoSamples.totals(seed),
+		variants: {
+			reference: [
+				.9,
+				1,
+				.7
+			],
+			ghost: [true, false],
+			projection: [
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Robinson
+			],
+			graticule: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			reference: .9,
+			ghost: true,
+			projection: GeoProjectionKind.EqualEarth
+		};
+	}
+	drawMap(ctx, frame) {
+		const { theme, palette } = ctx, { ghost, reference, value } = this.options;
+		const regions = this.known(this.regions()).flatMap((region) => {
+			const area = frame.path.area(region.feature), at = frame.anchor(region.feature);
+			return at && area > 0 ? [{
+				...region,
+				area,
+				density: Math.abs(region.value) / area,
+				x: at[0],
+				y: at[1]
+			}] : [];
+		});
+		const full = quantile(regions.map((d) => d.density).sort((a, b) => a - b), reference) || 1;
+		const placed = regions.map((d) => ({
+			...d,
+			scale: Math.min(1, Math.sqrt(d.density / full))
+		})).sort((a, b) => descending(a.area, b.area));
+		ctx.marks("ghost", "path", ghost ? placed : [], (d) => d.key).attr("d", (d) => frame.path(d.feature) ?? "").attr("fill", "none").attr("stroke", theme.axis).attr("stroke-width", .5);
+		const fill = palette.color(value);
+		const shapes = ctx.marks("regions", "path", placed, (d) => d.key).attr("fill", fill).attr("d", (d) => frame.path(d.feature) ?? "");
+		ctx.set(shapes, { transform: (d) => `translate(${d.x},${d.y}) scale(${d.scale}) translate(${-d.x},${-d.y})` }, { transform: (d) => `translate(${d.x},${d.y}) scale(0) translate(${-d.x},${-d.y})` }, 2);
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [[value, d.value], ["Scale", `${Math.round(d.scale * 100)}%`]]
+		}));
+	}
+};
+export { NonContiguousCartogram };