atlas = { // --- layout sizes const mapWidth = 760; const mapHeight = 620; const panelWidth = 300; // ------------------------------------------------------------ // 0) DEFINITIVE CLUSTERS (fixed) // ------------------------------------------------------------ const CLUSTERS = [ "Fluid & Solid Mechanics", "Math Biology Physiology & Medicine", "Networks", "Geoscience", "Industry", "Methods" ]; const HUB_NAME = "Fluid & Solid Mechanics"; const CX = mapWidth / 2; const CY = mapHeight / 2; // ------------------------------------------------------------ // 1) BUILD NODES FROM YOUR 0/1 MATRIX (this fixes “dots disappeared”) // ------------------------------------------------------------ const normalisePersonName = (s) => String(s ?? "").replace(/\s+/g, " ").trim(); const normKey = (s) => String(s ?? "") .toLowerCase() .replaceAll("’", "'") .replaceAll("&", "and") .replace(/\s+/g, " ") .trim(); // map normalised header -> actual header const headerLookup = new Map(); if (data?.length) { for (const k of Object.keys(data[0])) headerLookup.set(normKey(k), k); } // canonical cluster -> actual column name in CSV const clusterCol = new Map(CLUSTERS.map(c => [c, headerLookup.get(normKey(c))])); const read01 = (row, colName) => { if (!colName) return 0; const v = row[colName]; if (v === 1 || v === "1" || v === true) return 1; const s = String(v ?? "").trim().toLowerCase(); if (s === "true" || s === "yes" || s === "y") return 1; return 0; }; const nodes0 = data .map((r, i) => { const name = normalisePersonName(r.Person ?? r.person ?? r.name); let clusters = CLUSTERS.filter(c => read01(r, clusterCol.get(c)) === 1); // fallback if someone is still using the old structure if (!clusters.length) { const cs = Array.isArray(r.clusters) ? r.clusters : (r.cluster_primary ? [r.cluster_primary] : []); clusters = cs.map(s => String(s).trim()).filter(Boolean); clusters = clusters.map(s => s.replaceAll("’", "'").replace(/\s+/g, " ").trim()); clusters = clusters.filter(c => CLUSTERS.includes(c)); } return { ...r, id: r.id ?? name ?? `p${String(i).padStart(3, "0")}`, name, clusters, cluster_primary: clusters[0] ?? null }; }) .filter(d => d.name && d.clusters.length); // ------------------------------------------------------------ // 2) COUNTS + OVERLAPS (from the matrix-driven nodes) // ------------------------------------------------------------ const clusterCounts = new Map(CLUSTERS.map(c => [c, 0])); for (const p of nodes0) { for (const c of p.clusters) clusterCounts.set(c, (clusterCounts.get(c) || 0) + 1); } const maxCount = Math.max(1, ...clusterCounts.values()); const overlapCounts = new Map(); for (const p of nodes0) { const cs = [...new Set(p.clusters)].sort(); for (let i = 0; i < cs.length; i++) { for (let j = i + 1; j < cs.length; j++) { const key = `${cs[i]}|||${cs[j]}`; overlapCounts.set(key, (overlapCounts.get(key) || 0) + 1); } } } const maxOverlap = Math.max(1, ...overlapCounts.values()); // ------------------------------------------------------------ // 3) PEBBLE PARAMS // ------------------------------------------------------------ function hashToUnit(str) { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); } return ((h >>> 0) % 1000000) / 1000000; } function pebbleParams(clusterName) { const u = hashToUnit(clusterName); const v = hashToUnit(clusterName + "•shape"); const w = hashToUnit(clusterName + "•rot"); const aspect = 0.55 + 0.40 * u; const rotDeg = -28 + 56 * w; const wobble = 0.92 + 0.16 * v; return { aspect, rotDeg, wobble }; } const pebbleByCluster = new Map(CLUSTERS.map(c => [c, pebbleParams(c)])); // sizing heuristics const cols = 3; const rows = Math.ceil(CLUSTERS.length / cols); const margin = 80; const xStep = (mapWidth - 2 * margin) / cols; const yStep = (mapHeight - 2 * margin) / rows; function pebbleSizeForCluster(c) { const n = clusterCounts.get(c) || 0; const base = Math.min(xStep, yStep) * 0.38; const extra = (Math.min(xStep, yStep) * 0.50) * Math.sqrt(n / maxCount); const BIG = (c === HUB_NAME) ? 1.25 : 1.0; const { aspect, wobble } = pebbleByCluster.get(c); const rx = (base + extra) * wobble * BIG; const ry = rx * aspect; return { rx, ry }; } // ------------------------------------------------------------ // 4) CLUSTER CENTRES: HUB in centre, others around, then nudged by overlaps // ------------------------------------------------------------ const HUB = CLUSTERS.includes(HUB_NAME) ? HUB_NAME : CLUSTERS[0]; const others = CLUSTERS.filter(c => c !== HUB); const ringR = Math.min(mapWidth, mapHeight) * 0.28; const centres0 = new Map(); centres0.set(HUB, { id: HUB, x: CX, y: CY, fx: CX, fy: CY }); for (let i = 0; i < others.length; i++) { const a = (-Math.PI / 2) + (i / others.length) * Math.PI * 2; centres0.set(others[i], { id: others[i], x: CX + ringR * Math.cos(a), y: CY + ringR * Math.sin(a) }); } const centreNodes = CLUSTERS.map(c => ({ ...centres0.get(c) })); const centreLinks = Array.from(overlapCounts.entries()).map(([key, n]) => { const [a, b] = key.split("|||"); return { source: a, target: b, w: n / maxOverlap }; }); const BASE_LINK_DIST = Math.min(xStep, yStep) * 1.05; const CLUSTER_COLLIDE = Math.min(xStep, yStep) * 0.38; const clusterSim = d3.forceSimulation(centreNodes) .force("charge", d3.forceManyBody().strength(-40)) .force("collide", d3.forceCollide(CLUSTER_COLLIDE)) .force( "link", d3.forceLink(centreLinks) .id(d => d.id) .distance(l => BASE_LINK_DIST * (1 - 0.30 * l.w)) .strength(l => 0.12 + 0.45 * l.w) ) .force("x", d3.forceX(CX).strength(0.06)) .force("y", d3.forceY(CY).strength(0.06)) .stop(); clusterSim.tick(260); // clamp centres radius-aware for (const n of centreNodes) { if (n.fx != null) { n.x = n.fx; n.y = n.fy; continue; } const { rx, ry } = pebbleSizeForCluster(n.id); const pad = Math.max(rx, ry) + 26; n.x = Math.max(pad, Math.min(mapWidth - pad, n.x)); n.y = Math.max(pad, Math.min(mapHeight - pad, n.y)); } const centres = new Map(centreNodes.map(d => [d.id, { x: d.x, y: d.y }])); // ------------------------------------------------------------ // 5) GEOMETRY helpers (for dot constraints) // ------------------------------------------------------------ function ellipseSpec(c) { const center = centres.get(c); const { rotDeg } = pebbleByCluster.get(c); const { rx, ry } = pebbleSizeForCluster(c); const theta = (rotDeg * Math.PI) / 180; return { cx: center.x, cy: center.y, rx, ry, theta }; } function toLocal(x, y, e) { const dx = x - e.cx; const dy = y - e.cy; const cos = Math.cos(-e.theta); const sin = Math.sin(-e.theta); return { x: dx * cos - dy * sin, y: dx * sin + dy * cos }; } function toWorld(xl, yl, e) { const cos = Math.cos(e.theta); const sin = Math.sin(e.theta); return { x: e.cx + (xl * cos - yl * sin), y: e.cy + (xl * sin + yl * cos) }; } function projectIntoEllipse(x, y, e) { const p = toLocal(x, y, e); if (p.x === 0 && p.y === 0) return toWorld(0, -e.ry * 0.2, e); const v = (p.x * p.x) / (e.rx * e.rx) + (p.y * p.y) / (e.ry * e.ry); if (v <= 1) return { x, y }; const s = 1 / Math.sqrt(v); return toWorld(p.x * s, p.y * s, e); } function projectOutOfEllipse(x, y, e) { const p = toLocal(x, y, e); const v = (p.x * p.x) / (e.rx * e.rx) + (p.y * p.y) / (e.ry * e.ry); if (v >= 1) return { x, y }; const s = 1 / Math.sqrt(v || 1e-9); return toWorld(p.x * s * 1.02, p.y * s * 1.02, e); } // ------------------------------------------------------------ // 6) PEOPLE POSITIONING (inside assigned ellipses + outside ALL others) // ------------------------------------------------------------ function meanCentre(d) { let x = 0, y = 0, n = 0; for (const c of d.clusters) { const p = centres.get(c); if (!p) continue; x += p.x; y += p.y; n += 1; } return n ? { x: x / n, y: y / n } : { x: CX, y: CY }; } function pullStrength(d) { const k = d.clusters.length; if (k === 1) return 0.40; if (k === 2) return 0.16; return 0.10; } const nodes = nodes0.map(d => ({ ...d })); for (const d of nodes) { const m = meanCentre(d); d.x = m.x + (Math.random() - 0.5) * 12; d.y = m.y + (Math.random() - 0.5) * 12; } // dot size is HERE const DOT_R = 6; const DOT_R_SELECTED = 9; const sim = d3.forceSimulation(nodes) .force("x", d3.forceX(d => meanCentre(d).x).strength(d => pullStrength(d))) .force("y", d3.forceY(d => meanCentre(d).y).strength(d => pullStrength(d))) .force("collide", d3.forceCollide(DOT_R + 3)) .stop(); const EXCLUDE_CLUSTERS = CLUSTERS; // enforce "outside all non-member clusters" for (let t = 0; t < 520; t++) { sim.tick(); for (const d of nodes) { const cs = d.clusters; // include: stay inside all assigned const passes = cs.length > 1 ? 3 : 1; for (let k = 0; k < passes; k++) { for (const c of cs) { const e = ellipseSpec(c); const w = projectIntoEllipse(d.x, d.y, e); d.x = w.x; d.y = w.y; } } // exclude: push out of ANY cluster ellipse the person is NOT a member of for (let k = 0; k < 4; k++) { for (const c of EXCLUDE_CLUSTERS) { if (cs.includes(c)) continue; const e = ellipseSpec(c); const p = toLocal(d.x, d.y, e); const v = (p.x * p.x) / (e.rx * e.rx) + (p.y * p.y) / (e.ry * e.ry); if (v < 1) { const w = projectOutOfEllipse(d.x, d.y, e); d.x = w.x; d.y = w.y; } } // re-include after pushes (enforce membership) const passes2 = cs.length > 1 ? 2 : 1; for (let j = 0; j < passes2; j++) { for (const c of cs) { const e = ellipseSpec(c); const w = projectIntoEllipse(d.x, d.y, e); d.x = w.x; d.y = w.y; } } } } } // ------------------------------------------------------------ // 7) UI CONTAINER + SVG + PANEL // (panel typography is enforced via a scoped