@howells/hairline 0.0.0-stage → 0.1.0

package/lib/charts/big/circular-graph.js

@@ -0,0 +1,289 @@
+"use client";
+import { Plot as e, Tooltip as t } from "../core.js";
+import { noteOf as n, noteSpace as r, sansWidth as i, stagger as a } from "../util.js";
+import { TipText as o } from "../hover.js";
+import { RING_STEP as s } from "../marks.js";
+import { FootNote as c } from "../plot-note.js";
+import { ChartSvg as l } from "../svg.js";
+import { Label as u } from "../text.js";
+import { DotRing as d } from "../texture.js";
+import { circularGraphDemo as f } from "./circular-graph.data.js";
+import { useMemo as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/charts/big/circular-graph.tsx
+var _ = [
+	"fill-l2",
+	"fill-l2",
+	"fill-l3",
+	"fill-l3",
+	"fill-l4",
+	"fill-l4",
+	"fill-l5",
+	"fill-l5"
+], v = .14, y = (e, t) => e / t > .5 ? 1.5 : 1, b = 4, x = 110, S = 22, C = (e, t) => {
+	let n = /* @__PURE__ */ new Map();
+	for (let r of e.nodes) n.set(r.group, (n.get(r.group) ?? 0) + (t.get(r.id) ?? 0));
+	let r = [...n.keys()].toSorted((e, t) => (n.get(t) ?? 0) - (n.get(e) ?? 0));
+	return new Map(r.map((e, t) => [e, _[Math.min(t, _.length - 1)]]));
+}, w = (e, t) => {
+	if (t !== void 0) return new Set([t].flat());
+	let n = /* @__PURE__ */ new Set();
+	for (let t of new Set(e.nodes.map((e) => e.group))) {
+		let r = e.nodes.filter((e) => e.group === t).toSorted((e, t) => t.size - e.size);
+		for (let e of r.slice(0, 2)) n.add(e.id);
+	}
+	return n;
+}, T = (e, t, n, r, i) => {
+	let a = Math.abs(e.angle - t.angle) % (Math.PI * 2);
+	a > Math.PI && (a = Math.PI * 2 - a);
+	let o = .18 + .32 * (1 - a / Math.PI), s = (e) => `${(n + i * o * Math.cos(e.angle)).toFixed(1)},${(r + i * o * Math.sin(e.angle)).toFixed(1)}`;
+	return `M${e.x.toFixed(1)},${e.y.toFixed(1)}C${s(e)} ${s(t)} ${t.x.toFixed(1)},${t.y.toFixed(1)}`;
+}, E = 8, D = (e, t, n) => {
+	let r = Math.abs(n);
+	return Math.min(e / 2 - E, (e - E - t * r) / (1 + r));
+}, O = (e, t, n, r) => {
+	let i = r + E, a = Math.max(i, (r + t) * Math.abs(n)), [o, s] = n < 0 ? [a, i] : [i, a];
+	return o + (e - o - s) / 2;
+}, k = (e, t, n) => {
+	if (e >= 560 || n === null) {
+		let n = e < 560 ? E : 84;
+		return {
+			R: Math.max(60, Math.min(e / 2, t / 2) - n),
+			cx: e / 2,
+			cy: t / 2
+		};
+	}
+	let [r, i] = [Math.cos(n.angle), Math.sin(n.angle)], a = Math.max(60, Math.min(D(e, n.reach, r), D(t, n.reach, i)));
+	return {
+		R: a,
+		cx: O(e, n.reach, r, a),
+		cy: O(t, n.reach, i, a)
+	};
+}, A = (e, t, n) => Math.max(2.2, (n ? 6 : 10) * Math.sqrt(e / t)), j = 6, M = (e, t, n, r) => {
+	let a = t < 560, o = new Map(e.nodes.map((e) => [e.id, []])), s = /* @__PURE__ */ new Map();
+	for (let t of e.links) o.get(t.source)?.push(t.target), o.get(t.target)?.push(t.source), s.set(t.source, (s.get(t.source) ?? 0) + t.weight), s.set(t.target, (s.get(t.target) ?? 0) + t.weight);
+	let c = C(e, s), l = w(e, r), u = [...s].toSorted((e, t) => t[1] - e[1])[0]?.[0], d = Math.max(...e.nodes.map((e) => e.size)), f = Math.PI * 2 / e.nodes.length, p = (e) => -Math.PI * .56 + e * f, m = e.nodes.findIndex((e) => e.id === u), h = e.nodes[m], { R: g, cx: _, cy: v } = k(t, n, m === -1 ? null : {
+		angle: p(m),
+		reach: A(h.size, d, a) + j + i(h.id, 11)
+	}), y = e.nodes.map((e, t) => {
+		let n = p(t);
+		return {
+			angle: n,
+			degree: o.get(e.id)?.length ?? 0,
+			fill: c.get(e.group) ?? "fill-l3",
+			group: e.group,
+			hero: e.id === u,
+			hub: l.has(e.id),
+			id: e.id,
+			r: A(e.size, d, a),
+			size: e.size,
+			x: _ + g * Math.cos(n),
+			y: v + g * Math.sin(n)
+		};
+	}), b = new Map(y.map((e) => [e.id, e])), x = [], E = e.links.toSorted((e, t) => e.weight - t.weight);
+	for (let e of E) {
+		let t = b.get(e.source), n = b.get(e.target);
+		t !== void 0 && n !== void 0 && x.push({
+			d: T(t, n, _, v, g),
+			id: `${e.source}~${e.target}`,
+			source: e.source,
+			target: e.target,
+			weight: e.weight
+		});
+	}
+	return {
+		R: g,
+		beads: y,
+		byId: b,
+		chords: x,
+		cx: _,
+		cy: v,
+		hitR: Math.min(S, g * f / 2),
+		maxWeight: Math.max(1, ...e.links.map((e) => e.weight)),
+		neighbours: o
+	};
+}, N = (e) => {
+	let { bead: t } = e, n = Math.cos(t.angle) < 0, r = t.angle * 180 / Math.PI + (n ? 180 : 0), i = t.r + j;
+	return /* @__PURE__ */ h(u, {
+		anchor: n ? "end" : "start",
+		className: e.bright ? "fill-ink pointer-events-none" : "pointer-events-none",
+		dy: "0.35em",
+		muted: !e.bright,
+		transform: `translate(${t.x + i * Math.cos(t.angle)},${t.y + i * Math.sin(t.angle)}) rotate(${r})`,
+		voice: "label",
+		children: t.id
+	});
+}, P = (e, t) => e.source === t || e.target === t, F = (e) => {
+	let { beads: t, chords: n, cx: r, cy: i, maxWeight: o, R: c } = e.layout, l = t.find((e) => e.hero), u = (e) => l !== void 0 && P(e, l.id), f = [...n.filter((e) => !u(e)), ...n.filter((e) => u(e))];
+	return /* @__PURE__ */ g("g", {
+		className: "transition-opacity group-data-[focus=true]/ring:opacity-30",
+		children: [
+			/* @__PURE__ */ h("g", {
+				className: "fade",
+				style: a(0),
+				children: /* @__PURE__ */ h(d, {
+					cx: r,
+					cy: i,
+					r: c,
+					step: s.guide,
+					tone: "fill-l5"
+				})
+			}),
+			/* @__PURE__ */ h("g", {
+				className: "cap-round stroke-ink",
+				fill: "none",
+				children: f.map((e, t) => {
+					let n = u(e);
+					return /* @__PURE__ */ h("path", {
+						className: "draw",
+						d: e.d,
+						pathLength: 1,
+						strokeOpacity: n ? 1 : v,
+						strokeWidth: n ? 1.5 : y(e.weight, o),
+						style: a(t * .4, "dense")
+					}, e.id);
+				})
+			}),
+			t.map((e, t) => /* @__PURE__ */ h("circle", {
+				className: `pop ${e.hero ? "fill-hero" : e.fill}`,
+				cx: e.x,
+				cy: e.y,
+				r: e.r,
+				style: a(t, "fine")
+			}, e.id)),
+			/* @__PURE__ */ h("g", {
+				className: "fade",
+				style: a(12),
+				children: t.flatMap((t) => t.hero || t.hub && !e.small ? [/* @__PURE__ */ h(N, {
+					bead: t,
+					bright: t.hero
+				}, t.id)] : [])
+			})
+		]
+	});
+}, I = (e) => {
+	let { byId: t, chords: n, neighbours: r } = e.layout, i = t.get(e.focus);
+	if (i === void 0) return null;
+	let a = (r.get(i.id) ?? []).flatMap((e) => t.get(e) ?? []);
+	return /* @__PURE__ */ g("g", {
+		className: "pointer-events-none",
+		children: [
+			/* @__PURE__ */ h("g", {
+				className: "cap-round stroke-ink",
+				fill: "none",
+				strokeWidth: 1.5,
+				children: n.flatMap((e) => P(e, i.id) ? [/* @__PURE__ */ h("path", { d: e.d }, e.id)] : [])
+			}),
+			a.map((e) => /* @__PURE__ */ h("circle", {
+				className: e.hero ? "fill-hero" : e.fill,
+				cx: e.x,
+				cy: e.y,
+				r: e.r
+			}, e.id)),
+			/* @__PURE__ */ h("circle", {
+				className: "fill-hero",
+				cx: i.x,
+				cy: i.y,
+				r: i.r
+			}),
+			!e.small && a.map((e) => /* @__PURE__ */ h(N, {
+				bead: e,
+				bright: !1
+			}, e.id)),
+			(!e.small || i.hero) && /* @__PURE__ */ h(N, {
+				bead: i,
+				bright: !0
+			})
+		]
+	});
+}, L = (e) => {
+	let { data: t, focus: n, highlight: i, onFocus: a, take: o, width: s } = e, u = s < 560, d = r(e.note, s - 16, 18), f = Math.min(e.height, s + (u ? 60 : 168) + d), m = f - d, _ = p(() => M(t, s, m, i), [
+		t,
+		s,
+		m,
+		i
+	]), v = p(() => /* @__PURE__ */ h(F, {
+		layout: _,
+		small: u
+	}, o), [
+		_,
+		u,
+		o
+	]), y = `Land borders: ${t.nodes.length} countries on a ring, ${t.links.length} shared borders`;
+	return /* @__PURE__ */ g(l, {
+		className: "group/ring cursor-pointer",
+		"data-focus": n !== null,
+		height: f,
+		label: y,
+		leave: () => {
+			a(null, null);
+		},
+		onPointerUp: e.onReplay,
+		width: s,
+		children: [
+			v,
+			n !== null && /* @__PURE__ */ h(I, {
+				focus: n,
+				layout: _,
+				small: u
+			}),
+			/* @__PURE__ */ h("g", {
+				className: "fill-transparent",
+				onPointerMove: (e) => {
+					let { target: t } = e, r = t instanceof SVGElement ? t.dataset.id : void 0, i = r === void 0 ? void 0 : _.byId.get(r);
+					if (i === void 0 || i.id === n) return;
+					let [o, s] = [Math.cos(i.angle), Math.sin(i.angle)], c = i.r + b + x * Math.abs(o), l = s < 0;
+					a(i.id, {
+						below: l,
+						id: i.id,
+						linked: i.degree,
+						size: i.size,
+						x: i.x - c * o,
+						y: i.y - c * s
+					});
+				},
+				children: _.beads.map((e) => /* @__PURE__ */ h("circle", {
+					cx: e.x,
+					cy: e.y,
+					"data-id": e.id,
+					r: Math.max(e.r + 3, _.hitR)
+				}, e.id))
+			}),
+			/* @__PURE__ */ h(c, {
+				height: f,
+				text: e.note,
+				width: s
+			})
+		]
+	});
+}, R = (r) => {
+	let i = r.data ?? f, a = r.format ?? String, [s, c] = m(null), [l, u] = m(0), [d, p] = m(null);
+	return /* @__PURE__ */ h(e, {
+		overlay: d === null ? null : /* @__PURE__ */ h(t, {
+			below: d.below,
+			x: d.x,
+			y: d.y,
+			children: /* @__PURE__ */ h(o, {
+				facts: [`${a(d.size)} ${r.sizeUnit ?? "land neighbours"}`, `${d.linked} ${r.linkUnit ?? "shown"}`],
+				lead: d.id
+			})
+		}),
+		children: (e) => /* @__PURE__ */ h(L, {
+			data: i,
+			focus: s,
+			height: r.height ?? 560,
+			highlight: r.highlight,
+			note: n(r),
+			onFocus: (e, t) => {
+				c(e), p(t);
+			},
+			onReplay: () => {
+				c(null), p(null), u((e) => e + 1);
+			},
+			take: l,
+			width: e
+		})
+	});
+};
+//#endregion
+export { R as CircularGraph };

package/lib/charts/big/force-galaxy-model.js

@@ -0,0 +1,167 @@
+"use client";
+import { sansWidth as e } from "../util.js";
+import { forceCollide as t, forceLink as n, forceManyBody as r, forceSimulation as i, forceX as a, forceY as o } from "d3-force";
+//#region src/charts/big/force-galaxy-model.ts
+var s = [
+	"l2",
+	"l2",
+	"l3",
+	"l3",
+	"l4",
+	"l4",
+	"l5",
+	"l5"
+], c = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e.nodes) t.set(n.domain, (t.get(n.domain) ?? 0) + n.volume);
+	let n = [...t.keys()].toSorted((e, n) => (t.get(n) ?? 0) - (t.get(e) ?? 0));
+	return {
+		fills: new Map(n.map((e, t) => [e, s[Math.min(t, s.length - 1)]])),
+		ranked: n
+	};
+}, l = (e, t) => e.hub && t.hub ? "mesh" : e.domain === t.domain ? "spoke" : "cross", u = 16, d = 8, f = 6, p = 4, m = (e, t) => {
+	let { fills: n, ranked: r } = c(e), i = e.nodes.find((e) => e.hub === !0 && e.domain === r[0])?.id, a = (t) => Math.max(1, ...e.nodes.flatMap((e) => e.hub === !0 === t ? [e.volume] : [])), [o, s] = [a(!0), a(!1)];
+	return e.nodes.map((e) => ({
+		domain: e.domain,
+		hub: e.hub === !0,
+		id: e.id,
+		r: e.hub === !0 ? (9 + 5 * Math.sqrt(e.volume / o)) * t : Math.max(1.5, 4 * Math.sqrt(e.volume / s) * t),
+		tone: e.id === i ? "ink" : n.get(e.domain) ?? "l3",
+		volume: e.volume
+	}));
+}, h = (t, n) => {
+	let r = /* @__PURE__ */ new Map();
+	for (let i of t.filter((e) => e.hub)) {
+		let a = t.filter((e) => !e.hub && e.domain === i.domain).toSorted((e, t) => t.volume - e.volume), o = Math.max(0, ...a.map((e) => e.r)), s = a.reduce((e, t) => e + 2 * t.r + 4 * n, 0), c = Math.max(i.r + 12 * n + o, s / (2 * Math.PI));
+		r.set(i.id, {
+			extent: c + o + u,
+			hub: i,
+			labelW: Math.ceil(e(i.id, 12)) + 4,
+			orbit: c,
+			sats: a
+		});
+	}
+	return r;
+}, g = (e) => {
+	for (let t of e.values()) {
+		let e = Math.max(1, t.sats.length);
+		for (let [n, r] of t.sats.entries()) {
+			let i = n / e * Math.PI * 2;
+			r.x = (t.hub.x ?? 0) + t.orbit * Math.sin(i), r.y = (t.hub.y ?? 0) - t.orbit * Math.cos(i);
+		}
+	}
+}, _ = (e, t) => {
+	let n = new Map(t.map((e) => [e.id, e])), r = new Map(t.map((e) => [e.id, []])), i = [];
+	for (let t of e.links) {
+		let e = n.get(t.source), a = n.get(t.target);
+		e !== void 0 && a !== void 0 && (r.get(e.id)?.push(a.id), r.get(a.id)?.push(e.id), i.push({
+			a: e,
+			b: a,
+			id: `${e.id}~${a.id}`,
+			kind: l(e, a),
+			source: e,
+			target: a,
+			weight: t.weight ?? 1
+		}));
+	}
+	return {
+		edges: i,
+		neighbours: r
+	};
+}, v = (e) => e.extent - u, y = (e, t, n) => {
+	let r = Math.max(0, ...e.map(v)), i = Math.max(0, ...e.map((e) => e.labelW)), a = t / 2 - p - Math.max(r, i / 2), o = n / 2 - p - r - f - 16, s = Math.max(20, Math.min(a, o)), c = e.map((t, n) => ({
+		a: n / e.length * Math.PI * 2,
+		half: Math.max(v(t), t.labelW / 2),
+		ring: t
+	})), l = -(Math.min(...c.map((e) => s * Math.sin(e.a) - e.half)) + Math.max(...c.map((e) => s * Math.sin(e.a) + e.half))) / 2;
+	return new Map(c.map((e) => [e.ring.hub.id, {
+		x: t / 2 + l + s * Math.sin(e.a),
+		y: n / 2 - s * Math.cos(e.a)
+	}]));
+}, b = (e, t, n) => {
+	let r = Math.max(.62, Math.min(1.3, t / 560, n / 460)), [i, a] = [t / 2, n / 2], o = m(e, r), s = h(o, r), { edges: c, neighbours: l } = _(e, o), u = [...s.values()].map((e) => e.hub), d = t < 520 ? "ring" : "free", f = () => {
+		for (let [e, t] of u.entries()) {
+			let n = e / u.length * Math.PI * 2;
+			t.x = i + 40 * r * Math.cos(n), t.y = a + 40 * r * Math.sin(n), t.vx = 0, t.vy = 0, t.fx = null, t.fy = null;
+		}
+		g(s);
+	};
+	return f(), {
+		cx: i,
+		cy: a,
+		edges: c,
+		floor: n,
+		mode: d,
+		neighbours: l,
+		orbit: () => {
+			g(s);
+		},
+		place: f,
+		rings: s,
+		scale: r,
+		slots: d === "ring" ? y([...s.values()], t, n) : /* @__PURE__ */ new Map(),
+		stars: o,
+		width: t
+	};
+}, x = (e) => (e ?? 0).toFixed(1), S = (e, t) => {
+	let [n, r] = [t.hub.x ?? e.cx, t.hub.y ?? e.cy], i = v(t) + f + d;
+	return {
+		x: n,
+		y: e.mode === "ring" && r < e.cy ? r - i : r + i - 1
+	};
+}, C = (e, t, n) => {
+	let r = t.labelW / 2 + 4;
+	return e.stars.some((e) => {
+		if (!e.hub || e.id === t.hub.id) return !1;
+		let i = Math.max(0, Math.abs((e.x ?? 0) - n.x) - r), a = Math.max(0, Math.abs((e.y ?? 0) - n.y) - 7.5);
+		return Math.hypot(i, a) < e.r;
+	});
+}, w = (e, t) => {
+	let n = t.hub.y ?? e.cy, r = v(t), i = Math.max(r, t.labelW / 2), a = S(e, t).y - n;
+	return {
+		bottom: Math.max(r, a + d),
+		left: i,
+		right: i,
+		top: Math.max(r, d - a)
+	};
+}, T = (e, t, n) => t > n ? (t + n) / 2 : Math.max(t, Math.min(n, e)), E = (e, t, n, r) => {
+	let i = w(e, t);
+	return {
+		x: T(n, i.left + p, e.width - i.right - p),
+		y: T(r, i.top + p, e.floor - i.bottom - p)
+	};
+}, D = (e) => {
+	for (let t of e.rings.values()) {
+		let n = t.hub, r = E(e, t, n.x ?? e.cx, n.y ?? e.cy);
+		n.x = r.x, n.y = r.y;
+	}
+	g(e.rings);
+}, O = (e, t) => {
+	let n = t.stars.get(e.id);
+	n?.setAttribute("cx", x(e.x)), n?.setAttribute("cy", x(e.y));
+}, k = (e, t) => {
+	let n = t.edges.get(e.id);
+	n?.setAttribute("x1", x(e.a.x)), n?.setAttribute("y1", x(e.a.y)), n?.setAttribute("x2", x(e.b.x)), n?.setAttribute("y2", x(e.b.y));
+}, A = (e, t) => {
+	for (let n of e.stars) O(n, t);
+	for (let n of e.rings.values()) {
+		let r = t.labels.get(n.hub.id), i = S(e, n);
+		r?.setAttribute("transform", `translate(${Math.round(i.x)} ${Math.round(i.y)})`), r !== void 0 && (r.dataset.plate = String(C(e, n, i)));
+	}
+	for (let n of e.edges) k(n, t);
+}, j = .08, M = .2, N = (e, s) => {
+	let { cx: c, cy: l, rings: u, scale: d, slots: f } = e, p = [...u.values()].map((e) => e.hub), m = i(p).alphaDecay(.022);
+	if (e.mode === "ring") m.force("x", a((e) => f.get(e.id)?.x ?? c).strength(M)).force("y", o((e) => f.get(e.id)?.y ?? l).strength(M));
+	else {
+		let i = (e) => u.get(e.id)?.extent ?? e.r;
+		m.force("link", n(e.edges.filter((e) => e.kind === "mesh")).distance(220 * d).strength(.04)).force("charge", r().strength(-900 * d)).force("collide", t((e) => i(e) + 8 * d).strength(.9)).force("x", a(c).strength(j)).force("y", o(l).strength(j));
+	}
+	return m.on("tick", () => {
+		D(e), s();
+	});
+}, P = (e, t) => {
+	t.stop();
+	for (let n of Array.from({ length: 320 })) t.tick(), D(e);
+};
+//#endregion
+export { b as buildGalaxy, D as constrain, A as drawGalaxy, E as fitHub, S as labelAt, C as labelOnEngraving, N as makeSimulation, P as settle };