@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/maps/choropleth.js

@@ -0,0 +1,295 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { clamp as r, noteSpace as i, sansWidth as a, stagger as o } from "../util.js";
+import { DimGroup as s, TipText as c } from "../hover.js";
+import { FootNote as l } from "../plot-note.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { HALFTONE_R as f, TEXTURE_PITCH as p, useTextureIds as m } from "../texture-ids.js";
+import { DotScreen as h, PlateLabel as g } from "../texture.js";
+import { mainCentroid as _ } from "./geo.js";
+import { stepFill as v } from "./step-fill.js";
+import { Legend as y } from "./legend.js";
+import { useMemo as b, useState as x } from "react";
+import { scaleThreshold as S } from "d3-scale";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { geoContains as T, geoPath as E } from "d3-geo";
+//#region src/charts/maps/choropleth.tsx
+var D = 52, O = 28, k = f.map((e) => ({
+	pitch: p.screen,
+	r: e,
+	tone: "fill-l3"
+})), A = "fill-hero", j = (e, t) => e.solid ? { className: A } : v(e.bin, t), M = (e) => /* @__PURE__ */ C("defs", { children: k.map((t, n) => /* @__PURE__ */ C(h, {
+	id: `${e.pid}-${n}`,
+	pitch: t.pitch,
+	r: t.r,
+	tone: t.tone
+}, `${t.pitch}-${t.r}`)) }), N = ({ hero: e, mapH: t, project: n, regions: r, thresholds: i, values: a, width: o }) => {
+	let s = {
+		features: r.map((e) => e.feature),
+		type: "FeatureCollection"
+	}, c = n([o, t], s), l = E(c), u = S().domain(i).range([
+		0,
+		1,
+		2,
+		3,
+		4
+	]), d = [];
+	for (let t of r) {
+		let n = l(t.feature) ?? "";
+		if (n === "") continue;
+		let r = a.get(t.key)?.value, i = (e, n) => {
+			let r = c.invert?.([e, n]);
+			return r != null && T(t.feature, r);
+		}, o = r === void 0 ? -1 : u(r);
+		d.push({
+			anchor: _(t.feature, l),
+			bin: o,
+			covers: (e) => i(e.x0, e.y0) && i(e.x1, e.y0) && i(e.x0, e.y1) && i(e.x1, e.y1),
+			d: n,
+			key: t.key,
+			name: t.name,
+			solid: t.key === e && o === k.length - 1
+		});
+	}
+	return d;
+}, P = "stroke-l5", F = (e) => /* @__PURE__ */ C("g", {
+	className: "transition-opacity group-data-[focus=true]/map:opacity-30",
+	children: e.territories.map((t) => {
+		let n = j(t, e.pid);
+		return /* @__PURE__ */ C("path", {
+			className: `fade ${P} ${n.className}`,
+			d: t.d,
+			"data-key": t.key,
+			fill: n.fill,
+			strokeLinejoin: "round",
+			strokeWidth: 1,
+			style: o(Math.round(t.anchor[0] / e.width * 24), "mark")
+		}, t.key);
+	})
+}), I = (e) => e < 0 ? "end" : e > 0 ? "start" : "middle", L = 8, R = [
+	0,
+	-1,
+	1,
+	-2,
+	2
+], z = 4, B = (e) => {
+	let t = Math.ceil(a(e.text, 11)) + 8, n = {
+		end: t,
+		middle: t / 2,
+		start: 0
+	}[e.anchor];
+	return {
+		x0: e.x - n,
+		x1: e.x - n + t,
+		y0: e.y - L,
+		y1: e.y + L
+	};
+}, V = (e) => {
+	let t = B(e);
+	return {
+		x0: t.x0 + z,
+		x1: t.x1 - z,
+		y0: e.y - 4,
+		y1: e.y + 4
+	};
+}, H = (e) => !e.leader && e.solid && e.covers(V(e)), U = (e, t) => e.x0 < t.x1 && t.x0 < e.x1 && e.y0 < t.y1 && t.y0 < e.y1, W = (e, t) => {
+	let n = B(e), i = r(0, 2 - n.x0, t - 2 - n.x1);
+	return {
+		...e,
+		x: e.x + i
+	};
+}, G = (e, t) => {
+	let n = {
+		...e,
+		text: t
+	};
+	return e.covers(V(n)) ? n : e;
+}, K = (e, t, n, r) => {
+	let i = t.values.get(e), a = i?.dx ?? 0, o = i?.dy ?? 0, s = a !== 0 || o !== 0;
+	if (n === void 0 || i === void 0 || s && t.narrow) return null;
+	let c = {
+		anchor: I(a),
+		ax: n.anchor[0],
+		ay: n.anchor[1],
+		covers: n.covers,
+		dy: o,
+		key: e,
+		leader: s,
+		solid: n.solid,
+		text: `${i.label ?? e} ${t.short(i.value)}`,
+		x: n.anchor[0] + a,
+		y: n.anchor[1] + o
+	};
+	return !t.narrow || n.covers(V(c)) ? c : r ? G(c, i.label ?? e) : null;
+}, q = (e) => {
+	let t = [], n = new Map(e.territories.map((e) => [e.key, e]));
+	for (let r of e.labels) {
+		let i = K(r, e, n.get(r), t.length === 0);
+		if (i === null) continue;
+		let a = R.map((t) => W({
+			...i,
+			dy: t === 0 ? i.dy : t * L * 2,
+			leader: i.leader || t !== 0,
+			y: i.y + t * L * 2
+		}, e.width)).find((e) => t.every((t) => !U(B(e), B(t))));
+		a !== void 0 && t.push(a);
+	}
+	return t;
+}, J = (e) => /* @__PURE__ */ C("g", {
+	className: "pointer-events-none",
+	children: q(e).map((t, n) => /* @__PURE__ */ C("g", {
+		className: "fade",
+		style: o(10 + n, "mark"),
+		children: /* @__PURE__ */ w(s, {
+			dim: e.lit !== null && !e.lit.has(t.key),
+			children: [t.leader && /* @__PURE__ */ C("line", {
+				className: "rule",
+				x1: t.ax,
+				x2: t.x,
+				y1: t.ay,
+				y2: t.y + (t.dy < 0 ? 5 : -5)
+			}), t.leader ? /* @__PURE__ */ C(d, {
+				anchor: t.anchor,
+				dy: "0.35em",
+				halo: !0,
+				voice: "value",
+				x: t.x,
+				y: t.y,
+				children: t.text
+			}) : /* @__PURE__ */ C(g, {
+				anchor: t.anchor,
+				hero: H(t),
+				text: t.text,
+				x: t.x,
+				y: t.y
+			})]
+		})
+	}, t.key))
+}), Y = (e) => /* @__PURE__ */ C("g", {
+	className: "pointer-events-none",
+	children: e.lit.map((t) => {
+		let n = j(t, e.pid);
+		return /* @__PURE__ */ C("path", {
+			className: `stroke-ink ${n.className}`,
+			d: t.d,
+			fill: n.fill,
+			strokeLinejoin: "round",
+			strokeWidth: 1
+		}, t.key);
+	})
+}), X = (e) => {
+	let { focus: t, hover: n, onFocus: r, values: a, width: o } = e, s = Math.round(Math.min(e.maxHeight ?? Infinity, o * e.aspect)), c = s + D + i(e.note, o - 16, 18), { project: d, regions: f, thresholds: p } = e, h = m("map")("screen"), g = e.labels.at(0), _ = b(() => N({
+		hero: g,
+		mapH: s,
+		project: d,
+		regions: f,
+		thresholds: p,
+		values: a,
+		width: o
+	}), [
+		g,
+		s,
+		d,
+		f,
+		p,
+		a,
+		o
+	]), v = b(() => /* @__PURE__ */ C(F, {
+		pid: h,
+		territories: _,
+		width: o
+	}), [
+		h,
+		_,
+		o
+	]), x = t?.kind === "region" ? _.find((e) => e.key === t.key)?.bin ?? null : t?.bin ?? null, S = t === null ? [] : _.filter((e) => t.kind === "region" ? e.key === t.key : e.bin === t.bin), T = (e) => {
+		let { target: i } = e;
+		if (!(i instanceof SVGElement)) return;
+		let { key: a } = i.dataset;
+		if (a === void 0) return;
+		(t?.kind !== "region" || t.key !== a) && r({
+			key: a,
+			kind: "region"
+		});
+		let o = (e.currentTarget.ownerSVGElement ?? e.currentTarget).getBoundingClientRect();
+		n.show(a, e.clientX - o.left, e.clientY - o.top - 6);
+	}, E = () => {
+		r(null), n.clear();
+	};
+	return /* @__PURE__ */ w(u, {
+		className: "group/map",
+		"data-focus": t !== null,
+		height: c,
+		label: e.ariaLabel,
+		leave: E,
+		width: o,
+		children: [
+			/* @__PURE__ */ C(M, { pid: h }),
+			/* @__PURE__ */ C("g", {
+				onPointerLeave: E,
+				onPointerMove: T,
+				children: v
+			}),
+			/* @__PURE__ */ C(Y, {
+				lit: S,
+				pid: h
+			}),
+			/* @__PURE__ */ C(J, {
+				labels: e.labels,
+				lit: t === null ? null : new Set(S.map((e) => e.key)),
+				narrow: o < 560,
+				short: e.short,
+				territories: _,
+				values: a,
+				width: o
+			}),
+			/* @__PURE__ */ C(y, {
+				active: x,
+				emptyLabel: e.emptyLabel,
+				onStep: (e) => {
+					n.clear(), r(e === null ? null : {
+						bin: e,
+						kind: "bin"
+					});
+				},
+				pid: h,
+				short: e.short,
+				thresholds: p,
+				width: o,
+				y: s + O
+			}),
+			/* @__PURE__ */ C(l, {
+				height: c,
+				text: e.note,
+				width: o
+			})
+		]
+	});
+}, Z = (r) => {
+	let [i, a] = x(null), o = e(), s = b(() => new Map(r.data.map((e) => [e.key, e])), [r.data]), l = b(() => new Map(r.regions.map((e) => [e.key, e.name])), [r.regions]);
+	return /* @__PURE__ */ C(t, {
+		overlay: o.at === null ? null : /* @__PURE__ */ C(n, {
+			x: o.at.x,
+			y: o.at.y,
+			children: /* @__PURE__ */ C(c, {
+				facts: [((e) => {
+					let t = s.get(e);
+					return t === void 0 ? r.emptyLabel ?? "No data" : `${r.format(t.value)}${r.unit === void 0 ? "" : ` ${r.unit}`}`;
+				})(o.at.key)],
+				lead: l.get(o.at.key) ?? ""
+			})
+		}),
+		children: (e) => /* @__PURE__ */ C(X, {
+			...r,
+			focus: i,
+			hover: o,
+			onFocus: a,
+			values: s,
+			width: e
+		})
+	});
+};
+//#endregion
+export { Z as Choropleth };

package/lib/charts/maps/geo.js

@@ -0,0 +1,84 @@
+"use client";
+import { geoArea as e, geoCentroid as t, geoDistance as n } from "d3-geo";
+import { feature as r } from "topojson-client";
+//#region src/charts/maps/geo.ts
+var i = (e) => e.type === "Topology", a = (e, t, n) => {
+	if (!i(e)) throw Error("Expected a TopoJSON topology");
+	let { geometries: a } = e.objects[t], o = r(e, e.objects[t]), s = o.type === "FeatureCollection" ? o.features : [o], c = [];
+	for (let [e, t] of s.entries()) {
+		let r = a[e].id ?? "", { name: i } = a[e].properties;
+		c.push({
+			feature: t,
+			key: n(r, i),
+			name: i
+		});
+	}
+	return c;
+}, o = (t, n) => {
+	let { geometry: r } = t;
+	if (r.type !== "MultiPolygon") return n.centroid(t);
+	let i = null, a = -1;
+	for (let t of r.coordinates) {
+		let n = {
+			coordinates: t,
+			type: "Polygon"
+		}, r = e(n);
+		r > a && (a = r, i = n);
+	}
+	return i === null ? n.centroid(t) : n.centroid(i);
+}, s = (e) => e * 180 / Math.PI, c = (r) => {
+	let i = {
+		coordinates: r,
+		type: "Polygon"
+	}, a = t(i), o = 0;
+	for (let e of r[0]) o = Math.max(o, s(n(a, [e[0], e[1]])));
+	return {
+		area: e(i),
+		centre: a,
+		r: o
+	};
+}, l = (e, t) => Math.max(0, s(n(e.centre, t.centre)) - e.r - t.r), u = (e, t) => {
+	let n = e.map((e, t) => t), r = (e) => n[e] === e ? e : r(n[e]);
+	for (let [i, a] of e.entries()) for (let [o, s] of e.entries()) o > i && l(a, s) < t && (n[r(i)] = r(o));
+	return e.map((e, t) => r(t));
+}, d = (e) => {
+	let { geometry: t } = e.feature;
+	if (t.type !== "MultiPolygon") return e;
+	let n = t.coordinates.map(c), r = u(n, 5), i = Math.max(...n.map((e) => e.area)), a = r[n.findIndex((e) => e.area === i)], o = /* @__PURE__ */ new Set();
+	for (let e of new Set(r)) {
+		let t = n.flatMap((t, n) => r[n] === e ? [n] : []), s = t.reduce((e, t) => e + n[t].area, 0), c = Math.min(...t.flatMap((t) => n.flatMap((i, a) => r[a] === e ? [] : [l(n[t], i)])));
+		if (e !== a && s < i * .01 && c > 15) for (let e of t) o.add(e);
+	}
+	return o.size === 0 ? e : {
+		...e,
+		feature: {
+			...e.feature,
+			geometry: {
+				coordinates: t.coordinates.filter((e, t) => !o.has(t)),
+				type: "MultiPolygon"
+			}
+		}
+	};
+}, f = 179, p = (t) => {
+	let { geometry: n } = t.feature;
+	if (n.type !== "MultiPolygon") return t;
+	let r = n.coordinates.map((t) => e({
+		coordinates: t,
+		type: "Polygon"
+	})), i = Math.max(...r), a = n.coordinates.filter((e, t) => {
+		let n = e[0].map((e) => e[0]), a = Math.min(...n) < -179 && Math.max(...n) > f;
+		return r[t] === i || !a;
+	});
+	return a.length === n.coordinates.length ? t : {
+		...t,
+		feature: {
+			...t.feature,
+			geometry: {
+				coordinates: a,
+				type: "MultiPolygon"
+			}
+		}
+	};
+};
+//#endregion
+export { o as mainCentroid, a as regionsFrom, d as withoutRemoteIslets, p as withoutWrappedParts };

package/lib/charts/maps/legend.js

@@ -0,0 +1,83 @@
+"use client";
+import { clamp as e, sansWidth as t } from "../util.js";
+import { DimGroup as n, HitRect as r } from "../hover.js";
+import { KEY as i } from "../marks.js";
+import { Label as a } from "../text.js";
+import { KeySwatch as o } from "../texture.js";
+import { stepFill as s } from "./step-fill.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/charts/maps/legend.tsx
+var u = i.swatch, d = i.gap, f = i.entryGap, p = 44, m = (n) => {
+	let r = n.thresholds, i = [
+		...n.emptyLabel === void 0 ? [] : [{
+			bin: -1,
+			label: n.emptyLabel
+		}],
+		{
+			bin: 0,
+			label: `<${n.short(r[0])}`
+		},
+		...r.map((e, t) => ({
+			bin: t + 1,
+			label: `${n.short(e)}+`
+		}))
+	].map((e) => {
+		let n = u + d + t(e.label, 12);
+		return {
+			...e,
+			slot: Math.max(p, Math.ceil(n)),
+			w: n
+		};
+	}), a = n.width - i.reduce((e, t) => e + t.slot, 0), o = e(a / Math.max(1, i.length - 1), 0, f), s = [], c = 0;
+	for (let e of i) s.push({
+		...e,
+		x: c
+	}), c += e.slot + o;
+	return s;
+}, h = (e) => {
+	let { k: t } = e, i = s(t.bin, e.pid), f = t.x + (t.slot - t.w) / 2;
+	return /* @__PURE__ */ l(n, {
+		dim: e.active !== null && e.active !== t.bin,
+		onPointerEnter: () => {
+			e.onStep(t.bin);
+		},
+		onPointerLeave: () => {
+			e.onStep(null);
+		},
+		children: [
+			/* @__PURE__ */ c(r, {
+				height: p,
+				width: t.slot,
+				x: t.x,
+				y: -22
+			}),
+			/* @__PURE__ */ c(o, {
+				fill: i.fill,
+				tone: i.fill === void 0 ? i.className : void 0,
+				x: f,
+				y: -u / 2
+			}),
+			/* @__PURE__ */ c(a, {
+				className: "pointer-events-none",
+				dy: "0.35em",
+				voice: "axis",
+				x: f + u + d,
+				y: 0,
+				children: t.label
+			})
+		]
+	});
+}, g = (e) => e === void 0 ? 0 : (e.slot - e.w) / 2, _ = (e) => {
+	let t = m(e), n = t.at(-1), r = n === void 0 ? 0 : n.x + n.slot, i = g(n) - g(t.at(0)), a = Math.round(Math.max(0, (e.width - r + i) / 2));
+	return /* @__PURE__ */ c("g", {
+		transform: `translate(${a}, ${Math.round(e.y)})`,
+		children: t.map((t) => /* @__PURE__ */ c(h, {
+			active: e.active,
+			k: t,
+			onStep: e.onStep,
+			pid: e.pid
+		}, t.bin))
+	});
+};
+//#endregion
+export { _ as Legend };

package/lib/charts/maps/step-fill.js

@@ -0,0 +1,9 @@
+"use client";
+import { paint as e } from "../texture-ids.js";
+//#region src/charts/maps/step-fill.ts
+var t = (t, n) => t < 0 ? { className: "fill-paper" } : {
+	className: "",
+	fill: e(`${n}-${t}`)
+};
+//#endregion
+export { t as stepFill };

package/lib/charts/maps/us-choropleth.data.js

@@ -0,0 +1,249 @@
+"use client";
+import { regionsFrom as e } from "./geo.js";
+import t from "../../vendor/us-atlas/states-10m.json.js";
+//#region src/charts/maps/us-choropleth.data.ts
+var n = /* @__PURE__ */ new Map([
+	["01", "AL"],
+	["02", "AK"],
+	["04", "AZ"],
+	["05", "AR"],
+	["06", "CA"],
+	["08", "CO"],
+	["09", "CT"],
+	["10", "DE"],
+	["11", "DC"],
+	["12", "FL"],
+	["13", "GA"],
+	["15", "HI"],
+	["16", "ID"],
+	["17", "IL"],
+	["18", "IN"],
+	["19", "IA"],
+	["20", "KS"],
+	["21", "KY"],
+	["22", "LA"],
+	["23", "ME"],
+	["24", "MD"],
+	["25", "MA"],
+	["26", "MI"],
+	["27", "MN"],
+	["28", "MS"],
+	["29", "MO"],
+	["30", "MT"],
+	["31", "NE"],
+	["32", "NV"],
+	["33", "NH"],
+	["34", "NJ"],
+	["35", "NM"],
+	["36", "NY"],
+	["37", "NC"],
+	["38", "ND"],
+	["39", "OH"],
+	["40", "OK"],
+	["41", "OR"],
+	["42", "PA"],
+	["44", "RI"],
+	["45", "SC"],
+	["46", "SD"],
+	["47", "TN"],
+	["48", "TX"],
+	["49", "UT"],
+	["50", "VT"],
+	["51", "VA"],
+	["53", "WA"],
+	["54", "WV"],
+	["55", "WI"],
+	["56", "WY"],
+	["72", "PR"]
+]), r = e(t, "states", (e) => n.get(e) ?? e), i = [
+	{
+		state: "OR",
+		value: 4823877
+	},
+	{
+		state: "NC",
+		value: 3208419
+	},
+	{
+		state: "MI",
+		value: 1799391
+	},
+	{
+		state: "WA",
+		value: 936904
+	},
+	{
+		state: "PA",
+		value: 721480
+	},
+	{
+		state: "WI",
+		value: 601199
+	},
+	{
+		state: "VA",
+		value: 578777
+	},
+	{
+		state: "NY",
+		value: 318745
+	},
+	{
+		state: "OH",
+		value: 189240
+	},
+	{
+		state: "MN",
+		value: 153600
+	},
+	{
+		state: "CA",
+		value: 130730
+	},
+	{
+		state: "VT",
+		value: 127121
+	},
+	{
+		state: "ME",
+		value: 94425
+	},
+	{
+		state: "CT",
+		value: 88893
+	},
+	{
+		state: "NH",
+		value: 79323
+	},
+	{
+		state: "MA",
+		value: 78630
+	},
+	{
+		state: "IL",
+		value: 68681
+	},
+	{
+		state: "GA",
+		value: 63915
+	},
+	{
+		state: "IN",
+		value: 60841
+	},
+	{
+		state: "NJ",
+		value: 58817
+	},
+	{
+		state: "TX",
+		value: 43668
+	},
+	{
+		state: "MD",
+		value: 40697
+	},
+	{
+		state: "WV",
+		value: 39391
+	},
+	{
+		state: "AL",
+		value: 24586
+	},
+	{
+		state: "SC",
+		value: 23317
+	},
+	{
+		state: "IA",
+		value: 21826
+	},
+	{
+		state: "MO",
+		value: 21461
+	},
+	{
+		state: "OK",
+		value: 21352
+	},
+	{
+		state: "ID",
+		value: 15980
+	},
+	{
+		state: "TN",
+		value: 12129
+	},
+	{
+		state: "RI",
+		value: 11936
+	},
+	{
+		state: "KS",
+		value: 11204
+	},
+	{
+		state: "MS",
+		value: 11175
+	},
+	{
+		state: "LA",
+		value: 10825
+	},
+	{
+		state: "NE",
+		value: 10417
+	},
+	{
+		state: "AR",
+		value: 8410
+	},
+	{
+		state: "FL",
+		value: 8353
+	},
+	{
+		state: "MT",
+		value: 6338
+	},
+	{
+		state: "KY",
+		value: 4748
+	},
+	{
+		state: "CO",
+		value: 4667
+	},
+	{
+		state: "NM",
+		value: 2693
+	},
+	{
+		state: "HI",
+		value: 2570
+	},
+	{
+		state: "SD",
+		value: 2380
+	},
+	{
+		state: "DE",
+		value: 1780
+	},
+	{
+		state: "UT",
+		value: 1722
+	},
+	{
+		state: "WY",
+		value: 244
+	},
+	{
+		state: "ND",
+		value: 227
+	}
+];
+//#endregion
+export { i as usChoroplethDemo, r as usStates };