29:null 2a:["$","title",null,{"children":"Unit plot generator for ICE and PD numbers | vizqing | Observable"}] 2f:T112f,(() => { // Change this to change the number of dots const n = 3677; const r = 2; // dot radius const gap = 2; // baseline spacing for starting hex grid const width = 900; const height = 900; // Macro density gradient (outer expansion) const loosen = 3; const exp = 8; // Randomness (mostly outside the core) const jitter = 2.4; // in units of step const jitterExp = 5.0; // Core region that should look uniform const coreUniform = 0.38; // 0.30–0.45 const coreAnchorStrength = 0.08; // 0.05–0.15 (higher = more “locked” core) // Micro spacing gradient (tight center -> airy edge) const extraInner = 1.1; const extraOuter = 4.2; const extraExp = 1.8; // Relax settings const relaxTicks = 320; const relaxCenterStrength = 0.02; const relaxIterations = 4; const cx = width / 2; const cy = height / 2; const step = 2 * r + gap; const row = step * Math.sqrt(3) / 2; const cols = Math.ceil(width / step) + 12; const rows = Math.ceil(height / row) + 12; // ---- build hex grid candidates ---- const pts = []; for (let j = -rows; j <= rows; j++) { for (let i = -cols; i <= cols; i++) { const x0 = cx + i * step + (j % 2) * (step / 2); const y0 = cy + j * row; const dx0 = x0 - cx, dy0 = y0 - cy; const d0 = Math.hypot(dx0, dy0); pts.push({ x0, y0, dx0, dy0, d0 }); } } pts.sort((a, b) => a.d0 - b.d0); const nodes = pts.slice(0, n).map((p, id) => ({ id, r, x: p.x0, y: p.y0, dx0: p.dx0, dy0: p.dy0, d0: p.d0 })); const R0 = nodes[nodes.length - 1].d0 || 1; // ---- radial warp (macro gradient) ---- for (const p of nodes) { const t = p.d0 / R0; // 0..1 const scale = 1 + loosen * (t ** exp); p.x = cx + p.dx0 * scale; p.y = cy + p.dy0 * scale; // cache the "ideal" warped (uniform) position p.xClean = p.x; p.yClean = p.y; } // Radius after warp (for normalized t used below) const R = d3.max(nodes, d => Math.hypot(d.x - cx, d.y - cy)) || 1; // Tag core membership based on warped radius for (const p of nodes) { p.t = Math.min(1, Math.hypot(p.x - cx, p.y - cy) / R); p.isCore = p.t <= coreUniform; } // ---- jitter (OFF in core, ramps up outside) ---- for (const p of nodes) { if (p.isCore) continue; const tt = (p.t - coreUniform) / (1 - coreUniform); // 0..1 outside core const j = (jitter * step) * (tt ** jitterExp); p.x += (Math.random() - 0.5) * j; p.y += (Math.random() - 0.5) * j; } // Smoothstep helper to avoid visible “rings” at the core boundary const smoothstep = u => u * u * (3 - 2 * u); // ---- soft core anchor force (prevents defects WITHOUT hard pinning) ---- function forceCoreAnchor(strength = 0.1) { let nodesLocal; function force(alpha) { const k = strength * alpha; for (const d of nodesLocal) { if (!d.isCore) continue; d.vx += (d.xClean - d.x) * k; d.vy += (d.yClean - d.y) * k; } } force.initialize = _ => (nodesLocal = _); return force; } // ---- relax: uniform-ish core + radial spacing outside ---- const sim = d3 .forceSimulation(nodes) .force("x", d3.forceX(cx).strength(relaxCenterStrength)) .force("y", d3.forceY(cy).strength(relaxCenterStrength)) .force("core", forceCoreAnchor(coreAnchorStrength)) .force("collide", d3.forceCollide(d => { const t = d.t; // 0..1 const u0 = Math.max(0, (t - coreUniform) / (1 - coreUniform)); const u = smoothstep(u0); // constant spacing in the core const extraCore = extraInner; // radial spacing outside const extraRadial = extraInner + extraOuter * (t ** extraExp); // blend core -> radial const extra = (1 - u) * extraCore + u * extraRadial; return d.r + extra; }).iterations(relaxIterations)) .stop(); for (let i = 0; i < relaxTicks; i++) sim.tick(); // ---- render SVG ---- const svg = d3 .create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`); svg .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", r) .attr("fill", "steelblue"); return svg.node(); })()30:T2aae,// If d3 isn't already available in your notebook, add a separate cell above with: // d3 = require("d3@7") (() => { // ----------------------------- // 1) Data (name, count, color) // ----------------------------- const groups = [ { name: "In MSP", count: 1000, color: "#1f77b4" } ]; const total = d3.sum(groups, d => d.count); // ----------------------------- // 2) Layout parameters // ----------------------------- const r = 2; // dot radius const gap = 2; // baseline spacing for starting hex grid const width = 900; const height = 900; // Macro density gradient (outer expansion) const loosen = 3; const exp = 8; // Randomness (mostly outside the core) const jitter = 2.0; // in units of step const jitterExp = 4.5; const coreUniform = 0.35; // inner fraction with minimal jitter const coreAnchorStrength = 0.08; // Micro spacing gradient (tight center -> airy edge) const extraInner = 1.1; const extraOuter = 4.2; const extraExp = 1.8; // Relax settings const relaxTicks = 320; const relaxCenterStrength = 0.02; const relaxIterations = 4; // Group separation (white space between departments) const groupGap = 4.0; // try 2–8 const boundaryTicks = 220; // try 150–400 const boundaryStrength = 0.28; // try 0.15–0.6 const anchorStrength = 0.08; // higher = preserves silhouette more // Prevent “perfect circle in the middle” const seedRadius = width * 0.22; // seeds all on a ring; increase for more wedge-like const angleWeight = 9000; // higher => more wedge-like, less circular group blobs const radialWeight = 1.0; // helps fill the middle const cx = width / 2; const cy = height / 2; // ----------------------------- // 3) Build a single blob of TOTAL dots // ----------------------------- const step = 2 * r + gap; const row = step * Math.sqrt(3) / 2; const cols = Math.ceil(width / step) + 14; const rows = Math.ceil(height / row) + 14; const pts = []; for (let j = -rows; j <= rows; j++) { for (let i = -cols; i <= cols; i++) { const x0 = cx + i * step + (j % 2) * (step / 2); const y0 = cy + j * row; const dx0 = x0 - cx, dy0 = y0 - cy; const d0 = Math.hypot(dx0, dy0); pts.push({ x0, y0, dx0, dy0, d0 }); } } pts.sort((a, b) => a.d0 - b.d0); const nodes = pts.slice(0, total).map((p, id) => ({ id, r, x: p.x0, y: p.y0, dx0: p.dx0, dy0: p.dy0, d0: p.d0 })); const R0 = nodes[nodes.length - 1].d0 || 1; // radial warp (macro loosen) for (const p of nodes) { const t = p.d0 / R0; const scale = 1 + loosen * (t ** exp); p.x = cx + p.dx0 * scale; p.y = cy + p.dy0 * scale; p.xClean = p.x; p.yClean = p.y; } const R = d3.max(nodes, d => Math.hypot(d.x - cx, d.y - cy)) || 1; // tag core + jitter mostly outside core for (const p of nodes) { p.t = Math.min(1, Math.hypot(p.x - cx, p.y - cy) / R); p.isCore = p.t <= coreUniform; } for (const p of nodes) { if (p.isCore) continue; const tt = (p.t - coreUniform) / (1 - coreUniform); const j = (jitter * step) * (tt ** jitterExp); p.x += (Math.random() - 0.5) * j; p.y += (Math.random() - 0.5) * j; } // smoothstep helper const smoothstep = u => u * u * (3 - 2 * u); // soft core anchor (keeps core more uniform without shear artifacts) function forceCoreAnchor(strength = 0.1) { let nodesLocal; function force(alpha) { const k = strength * alpha; for (const d of nodesLocal) { if (!d.isCore) continue; d.vx += (d.xClean - d.x) * k; d.vy += (d.yClean - d.y) * k; } } force.initialize = _ => (nodesLocal = _); return force; } // relax (collide gives macro+micro spacing) const sim = d3 .forceSimulation(nodes) .force("x", d3.forceX(cx).strength(relaxCenterStrength)) .force("y", d3.forceY(cy).strength(relaxCenterStrength)) .force("core", forceCoreAnchor(coreAnchorStrength)) .force("collide", d3.forceCollide(d => { const t = d.t; const u0 = Math.max(0, (t - coreUniform) / (1 - coreUniform)); const u = smoothstep(u0); const extraCore = extraInner; const extraRadial = extraInner + extraOuter * (t ** extraExp); const extra = (1 - u) * extraCore + u * extraRadial; return d.r + extra; }).iterations(relaxIterations)) .stop(); for (let i = 0; i < relaxTicks; i++) sim.tick(); // ----------------------------- // 4) Assign contiguous departments WITHOUT a circular core: // seeds on a ring + angular-biased region growing on Delaunay neighbors // ----------------------------- const delaunay = d3.Delaunay.from(nodes, d => d.x, d => d.y); class MinHeap { constructor() { this.a = []; } push(x) { const a = this.a; a.push(x); for (let i = a.length - 1; i > 0;) { const p = (i - 1) >> 1; if (a[p].pri <= a[i].pri) break; [a[p], a[i]] = [a[i], a[p]]; i = p; } } pop() { const a = this.a; if (!a.length) return null; const top = a[0]; const last = a.pop(); if (a.length) { a[0] = last; for (let i = 0;;) { let l = i * 2 + 1, r = l + 1, m = i; if (l < a.length && a[l].pri < a[m].pri) m = l; if (r < a.length && a[r].pri < a[m].pri) m = r; if (m === i) break; [a[i], a[m]] = [a[m], a[i]]; i = m; } } return top; } } const assigned = new Int32Array(nodes.length).fill(-1); // All seeds on a ring (no center seed) const seedTargets = d3.range(groups.length).map(k => { const a = (k / groups.length) * 2 * Math.PI; return [cx + seedRadius * Math.cos(a), cy + seedRadius * Math.sin(a)]; }); // Choose distinct seed nodes nearest to each target const seedIndex = []; const used = new Uint8Array(nodes.length); for (let gi = 0; gi < groups.length; gi++) { const [sx, sy] = seedTargets[gi]; let best = -1, bestD2 = Infinity; for (let i = 0; i < nodes.length; i++) { if (used[i]) continue; const dx = nodes[i].x - sx, dy = nodes[i].y - sy; const d2 = dx * dx + dy * dy; if (d2 < bestD2) { bestD2 = d2; best = i; } } used[best] = 1; seedIndex.push(best); } // smallest signed angular difference function angDiff(a, b) { let d = a - b; while (d > Math.PI) d -= 2 * Math.PI; while (d < -Math.PI) d += 2 * Math.PI; return d; } for (let gi = 0; gi < groups.length; gi++) { const quota = groups[gi].count; const seed = seedIndex[gi]; const sx = nodes[seed].x; const sy = nodes[seed].y; const seedAng = Math.atan2(sy - cy, sx - cx); const heap = new MinHeap(); function tryAdd(idx) { if (assigned[idx] !== -1) return; const nx = nodes[idx].x, ny = nodes[idx].y; // prefer filling toward the center while staying in this angular sector const rd = Math.hypot(nx - cx, ny - cy); const a = Math.atan2(ny - cy, nx - cx); const da = angDiff(a, seedAng); const pri = radialWeight * rd + angleWeight * (da * da) + (Math.random() * 1e-6); heap.push({ idx, pri }); } assigned[seed] = gi; nodes[seed].group = gi; let filled = 1; for (const nb of delaunay.neighbors(seed)) tryAdd(nb); while (filled < quota) { let item = heap.pop(); if (!item) { // fallback: pick best unassigned by this group's sector cost let best = -1, bestPri = Infinity; for (let i = 0; i < nodes.length; i++) { if (assigned[i] !== -1) continue; const nx = nodes[i].x, ny = nodes[i].y; const rd = Math.hypot(nx - cx, ny - cy); const a = Math.atan2(ny - cy, nx - cx); const da = angDiff(a, seedAng); const pri = radialWeight * rd + angleWeight * (da * da); if (pri < bestPri) { bestPri = pri; best = i; } } item = { idx: best, pri: bestPri }; } const idx = item.idx; if (idx == null || assigned[idx] !== -1) continue; assigned[idx] = gi; nodes[idx].group = gi; filled++; for (const nb of delaunay.neighbors(idx)) tryAdd(nb); } } // Any leftovers (shouldn't happen) assign to last group for (let i = 0; i < nodes.length; i++) { if (assigned[i] === -1) { assigned[i] = groups.length - 1; nodes[i].group = groups.length - 1; } } // ----------------------------- // 5) Add white space BETWEEN groups (boundary-only repel + anchor) // ----------------------------- for (const d of nodes) { d.x0 = d.x; d.y0 = d.y; } const delaunay2 = d3.Delaunay.from(nodes, d => d.x, d => d.y); const edges = []; const seen = new Set(); for (let i = 0; i < nodes.length; i++) { for (const j of delaunay2.neighbors(i)) { const a = i < j ? `${i}-${j}` : `${j}-${i}`; if (seen.has(a)) continue; seen.add(a); edges.push([i, j]); } } function forceGroupGaps(edges, strength = 0.25) { let nodesLocal; function force(alpha) { const k = strength * alpha; for (const [i, j] of edges) { const A = nodesLocal[i]; const B = nodesLocal[j]; const same = A.group === B.group; const target = (A.r + B.r) + (same ? 0 : groupGap); let dx = B.x - A.x; let dy = B.y - A.y; const dist = Math.hypot(dx, dy) || 1e-6; const diff = target - dist; if (diff <= 0) continue; const push = (diff / dist) * k; dx *= push; dy *= push; A.vx -= dx; A.vy -= dy; B.vx += dx; B.vy += dy; } } force.initialize = _ => (nodesLocal = _); return force; } function forceAnchor(strength = 0.06) { let nodesLocal; function force(alpha) { const k = strength * alpha; for (const d of nodesLocal) { d.vx += (d.x0 - d.x) * k; d.vy += (d.y0 - d.y) * k; } } force.initialize = _ => (nodesLocal = _); return force; } const sim2 = d3 .forceSimulation(nodes) .force("anchor", forceAnchor(anchorStrength)) .force("gaps", forceGroupGaps(edges, boundaryStrength)) .force("collide", d3.forceCollide(d => d.r + 0.2).iterations(2)) .stop(); for (let i = 0; i < boundaryTicks; i++) sim2.tick(); // ----------------------------- // 6) Render SVG // ----------------------------- const svg = d3 .create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`); svg .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", r) .attr("fill", d => groups[d.group].color); return svg.node(); })()31:[] 2d:{"id":"9d737da5745a43ee","slug":null,"title":"Unit plot generator for ICE and PD numbers","thumbnail":"67e7a2d869f0fe3cc2ee7338d845b422840f7c721bca0b9734faefe1142cdd49","access_level":"public","create_time":"$D2026-06-16T15:50:19.424Z","update_time":"$D2026-06-16T16:02:45.213Z","view_time":null,"first_public_time":"$D2026-06-16T15:50:19.424Z","fork":{"id":"6eaf1344f7f0c833","slug":null,"title":"Unit plot generator for ICE and PD numbers","owner":{"id":"b351ea6c4073857c","login":"jakesteinberg","name":"Jake Steinberg"}},"stars":0,"starred":false,"owner":{"type":"team","id":"008f123a7234eb35","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":"starter_2024"},"version":194,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ef2ab2a685fd836","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":null}],"members":[{"type":"team","id":"008f123a7234eb35","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3ef2ab2a685fd836","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Unit plot generator for ICE and PD numbers","cells":[{"id":0,"value":"# Unit plot generator for ICE and PD numbers ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"