2a:null 2b:["$","title",null,{"children":"Hyperbolic Tree Viewer Remix | Lao | Observable"}] 30:T14212,const ht_chart = (() => { // ─── tweakables ─────────────────────────────────────────────────────────── const HT_CONFIG = { scheme: [ '#d93d4d', '#728997', '#3fb447', '#f2c210', '#0068b5', '#f8802a', '#813978', '#64c0db', '#e658a8', '#aede27', '#8295ca', '#0098a0', '#bc8fd1', '#9f7920', '#9cb366', '#8b2505', '#a1e2c0', '#6b9072', '#f29baf', '#cdc2a1', '#795ad3', '#22208e', '#00c8b0', '#504f4f', '#007356', '#895c6a', '#b88871', ], maxGroups: null, // null → one cluster per colour in the scheme otherColor: "#a9a9a9", // leftover branches + the nodes above the clusters otherLabel: "Other", minGroupFraction: 0.2, // a cluster below this × the ideal size is leftover // Detail. How hard to thin the parts of the tree you are not looking at. // All of this fades out on its own as the view zooms back out. crampRho: 5, // past this hyperbolic radius a node is squashed localityRange: [0.2, 0.8], // squashed fraction where thinning starts / peaks localityEase: 0.15, // per-frame approach rate for that ramp; 1 = instant stickyRelief: 0.7, // spacing a node already on screen needs to stay kinFalloff: 1.5, // how fast protection drops off per level of kinship focalHysteresis: 2.5, // how much nearer a rival must be to take the focus nearFreeRho: 2, // full detail out to here nearFalloffRho: 2.5, // how fast detail falls off past that spacingMultRange: [1, 2.5], // dot spacing multiplier, top priority → bottom cullRho: 12, // hyperbolic radius past which a node is off-disk linkColor: "#999", linkOpacity: 0.35, spineColor: "#000", // the run of links from the bold node to the root spineOpacity: 0.85, // Layout baseSpan: 4.4, // hyperbolic radius the tree spans at spread = 1 spread: 1.7, // default zoom. The wheel moves this; Reset returns to it sortLabels: true, // order each node's children alphabetically sweep: -1, // -1 runs them clockwise from straight up, +1 anticlockwise // Viewer width: 700, height: 700, margin: 20, // px of padding between the disk and the svg edge renderBudget: 12000, dotSpacingPx: 2, // lower = denser; the main lever on how many draw dotRadius: 3, fadeEase: 0.22, // per-frame opacity approach as nodes enter / leave labelRadius: 0.3, labelSpacingPx: [30, 10], labelBudget: 40, spokeBudget: 48, // most slanted child labels drawn at once spokeSpacingPx: 5.5, // arc between two of them before one starts to go spokeOnLevel: 0.35, // dither levels past the spacing before a layer comes on spokeHysteresis: 0.12, // how far it may tighten again before it goes back off labelFadeMs: 260, // wall-clock length of a label fading in or out spreadStep: 1.1, spreadRange: [0.35, 5], spreadDuration: 260, animDuration: 500, hitRadiusPx: 40, panLimitDepth: null, // null → one level above the deepest leaves showControls: true }; function ht_cx(re, im = 0) { return { re, im }; } function ht_add(a, b) { return { re: a.re + b.re, im: a.im + b.im }; } function ht_mul(a, b) { return { re: a.re * b.re - a.im * b.im, im: a.re * b.im + a.im * b.re }; } function ht_conj(a) { return { re: a.re, im: -a.im }; } function ht_div(a, b) { const d = b.re * b.re + b.im * b.im; return { re: (a.re * b.re + a.im * b.im) / d, im: (a.im * b.re - a.re * b.im) / d }; } function ht_abs2(a) { return a.re * a.re + a.im * a.im; } const ht_identity = { a: ht_cx(1, 0), b: ht_cx(0, 0) }; function ht_apply(M, z) { const num = ht_add(ht_mul(M.a, z), M.b); const den = ht_add(ht_mul(ht_conj(M.b), z), ht_conj(M.a)); return ht_div(num, den); } function ht_translateFrom(f) { const r2 = Math.min(0.999999, ht_abs2(f)); const s = 1 / Math.sqrt(Math.max(1e-9, 1 - r2)); return { a: ht_cx(s, 0), b: ht_cx(-f.re * s, -f.im * s) }; } function ht_layout(root, { k = 2.2, step = null, weight = (d) => d.value, rootAngle = -Math.PI / 2, sweep = -1, maxAperture = Math.PI * 0.98 } = {}) { root.count(); const d = step ?? (2 * k) / Math.max(1, root.height); const rStep = Math.tanh(d / 2); const sinhStep = Math.sinh(d); const sN = 1 / Math.sqrt(1 - rStep * rStep); function childAperture(beta) { const h = Math.asinh(sinhStep * Math.sin(beta)); const gamma = Math.asin(Math.max(-1, Math.min(1, Math.cos(beta) / Math.cosh(h)))); const A = Math.PI - gamma - 2 * Math.atan(Math.exp(-h)); return Math.max(1e-4, Math.min(maxAperture, A)); } root.z0 = { re: 0, im: 0 }; root._far = 1; root._fai = 0; root._fbr = 0; root._fbi = 0; root._forward = rootAngle; root._aperture = Math.PI; root.eachBefore((u) => { if (!u.children || !u.children.length) return; let total = 0; for (const c of u.children) total += Math.max(1e-9, weight(c)); // The wedge is walked from one edge of the aperture to the other; which // edge it starts at is the sweep. Data y is drawn upwards, so a rising // angle runs anticlockwise on screen and sweep = -1 is the clockwise // one. Either way the first child sits half its own wedge in from the // edge, which for the root puts it just off straight up. let a = u._forward - sweep * u._aperture; const far = u._far, fai = u._fai, fbr = u._fbr, fbi = u._fbi; for (const c of u.children) { const share = (2 * u._aperture * Math.max(1e-9, weight(c))) / total; const beta = share / 2; const theta = a + sweep * beta; a += sweep * share; const pr = rStep * Math.cos(theta), pi = rStep * Math.sin(theta); const nr = far * pr - fai * pi + fbr; const ni = far * pi + fai * pr + fbi; const dr = fbr * pr + fbi * pi + far; const di = fbr * pi - fbi * pr - fai; const q = dr * dr + di * di; c.z0 = { re: (nr * dr + ni * di) / q, im: (ni * dr - nr * di) / q }; const ar = sN * (far + (fbr * pr + fbi * pi)); const ai = sN * (fai + (fbi * pr - fbr * pi)); const br = sN * nr, bi = sN * ni; const nrm = Math.sqrt(Math.max(1e-9, ar * ar + ai * ai - br * br - bi * bi)); c._far = ar / nrm; c._fai = ai / nrm; c._fbr = br / nrm; c._fbi = bi / nrm; c._forward = theta; c._aperture = childAperture(beta); } }); return root.descendants(); } function ht_easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } function ht_smoothstep(t) { return t <= 0 ? 0 : t >= 1 ? 1 : t * t * (3 - 2 * t); } function ht_viewer4(nodes, { width = 700, height = 700, margin = 20, renderBudget = 12000, dotSpacingPx = 1.5, labelRadius = 0.3, labelSpacingPx = [64, 15], spread = 1, spreadStep = 1.1, spreadCompression = 1, spreadDuration = 260, spreadRange = [0.35, 5], relayout = null, labelBudget = 40, spokeBudget = 48, spokeSpacingPx = 5.5, spokeOnLevel = 0.35, spokeHysteresis = 0.12, labelFadeMs = 260, domainR = 1.05, label = (d) => d.data.name ?? d.data.id ?? String(d.data), animDuration = 500, rootClampR = 0.95, panLimitDepth = null, cullRho = 12, linkColor = "#999", linkOpacity = 0.35, spineColor = "#000", spineOpacity = 0.85, zoomRegionR = 3, dotRadius = 2, fadeEase = 0.22, hitRadiusPx = 40, showControls = true, scheme = d3.schemeObservable10 ?? d3.schemeTableau10, maxGroups = null, otherColor = "#bfbfbf", otherLabel = "Other", minGroupFraction = 0.2, crampRho = 5, localityRange = [0.2, 0.8], localityEase = 0.15, stickyRelief = 0.7, kinFalloff = 1.5, focalHysteresis = 2.5, nearFreeRho = 2, nearFalloffRho = 2.5, spacingMultRange = [1, 2.5] } = {}) { const G = (() => { const ONE = { re: 1, im: 0 }; const ZERO = { re: 0, im: 0 }; const mul = (a, b) => ({ re: a.re * b.re - a.im * b.im, im: a.re * b.im + a.im * b.re }); const add = (a, b) => ({ re: a.re + b.re, im: a.im + b.im }); const neg = (a) => ({ re: -a.re, im: -a.im }); const conj = (a) => ({ re: a.re, im: -a.im }); const div = (a, b) => { const q = b.re * b.re + b.im * b.im; return { re: (a.re * b.re + a.im * b.im) / q, im: (a.im * b.re - a.re * b.im) / q }; }; const identMat = () => ({ a: ONE, b: ZERO, c: ZERO, d: ONE }); const matMul = (A, B) => ({ a: add(mul(A.a, B.a), mul(A.b, B.c)), b: add(mul(A.a, B.b), mul(A.b, B.d)), c: add(mul(A.c, B.a), mul(A.d, B.c)), d: add(mul(A.c, B.b), mul(A.d, B.d)) }); const matNormalize = (A) => Math.hypot(A.d.re, A.d.im) < 1e-12 ? A : { a: div(A.a, A.d), b: div(A.b, A.d), c: div(A.c, A.d), d: ONE }; const transMat = (t) => ({ a: ONE, b: { re: t.re, im: t.im }, c: conj(t), d: ONE }); const matApplyToOrigin = (A) => div(A.b, A.d); const clampDisk = (z, max = 0.9999) => { const r = Math.hypot(z.re, z.im); return r <= max || r === 0 ? z : { re: (z.re / r) * max, im: (z.im / r) * max }; }; return { neg, identMat, matMul, matNormalize, transMat, matApplyToOrigin, clampDisk }; })(); const SVGNS = "http://www.w3.org/2000/svg"; const rootNode = nodes.find((n) => n.depth === 0); const rhoOf = (r) => 2 * Math.atanh(Math.min(0.999999, r)); const nodeIndex = new Map(nodes.map((n, i) => [n, i])); // Everything below that is a length in pixels has to be re-derived when // the figure changes size, which is why these are not constants: full // screen grows the canvas rather than scaling it, so a dot keeps its // radius and a label its point size while the space between them opens // up. Same chart, more room, more of it shown. const width0 = width, height0 = height; let spacingData, gridN, grid, labelPadX, labelPadY; let labelCap = labelBudget, spokeCap = spokeBudget, drawCap = renderBudget; const pool = nodes.map((n) => ({ n, x: 0, y: 0, r2: 0, op: 0, keep: false, stick: false, labeled: false, stickLabel: false })); const order = nodes .map((_, i) => i) .sort((a, b) => ((nodes[b].value ?? 1) - (nodes[a].value ?? 1)) || (a - b)); const rank = new Int32Array(nodes.length); for (let j = 0; j < order.length; j++) rank[order[j]] = j; let stickList = []; // Scratch for the per-frame detail scoring, sized once. byDepth walks the // tree parent-first whatever order descendants() came back in. const parentIdx = new Int32Array(nodes.length).fill(-1); const depthOf = new Int32Array(nodes.length); for (let i = 0; i < nodes.length; i++) { depthOf[i] = nodes[i].depth; if (nodes[i].parent) parentIdx[i] = nodeIndex.get(nodes[i].parent); } const byDepth = Int32Array.from(nodes.keys()).sort((a, b) => depthOf[a] - depthOf[b]); const impOf = new Float32Array(nodes.length); { const span = Math.log1p(Math.max(1, rootNode.value ?? 1)); for (let i = 0; i < nodes.length; i++) impOf[i] = Math.log1p(nodes[i].value ?? 1) / span; } const DETAIL_BUCKETS = 64; const onPath = new Uint8Array(nodes.length); const shareBuf = new Int32Array(nodes.length); const needBuf = new Float32Array(nodes.length); const bucketOf = new Uint8Array(nodes.length); const bucketCount = new Int32Array(DETAIL_BUCKETS); const bucketCursor = new Int32Array(DETAIL_BUCKETS); const orderBuf = new Int32Array(nodes.length); const crampR2 = Math.tanh(crampRho / 2) ** 2; const labelR2 = labelRadius * labelRadius; const SPOKE_GAP = 7; // px from the child dot to the start of its label // Every label ran label(), a regex split and an array allocation on each // node on each frame. The short form of a name never changes, so it is // worked out once and kept. const shortCache = new Map(); const shortName = (n) => { let s = shortCache.get(n); if (s === undefined) { s = String(label(n)).split(/[./]/).pop(); shortCache.set(n, s); } return s; }; const spokeScratch = []; const maxDepth = nodes.reduce((m, n) => Math.max(m, n.depth), 0); const limitDepth = Math.max(0, Math.min(maxDepth, panLimitDepth ?? maxDepth - 1)); const kinLut = new Float64Array(maxDepth + 1); let focalPrev = -1; let locality = 0, localitySettling = false; const cullR2 = Math.tanh(cullRho / 2) ** 2; let treeRho = 0, panLimitR = 0.9999; function measureTree() { treeRho = 0; let lim = 0; for (const n of nodes) { const r = Math.hypot(n.z0.re, n.z0.im); treeRho = Math.max(treeRho, rhoOf(r)); if (n.depth === limitDepth) lim = Math.max(lim, r); } panLimitR = Math.min(0.9999, lim > 1e-6 ? lim : Math.tanh(treeRho / 2)); } measureTree(); let M = ht_identity; let Minv = G.identMat(); let focus = { re: 0, im: 0 }; let wheelCursor = null; let morph = null; const morphFrom = new Float64Array(nodes.length * 2); const morphTo = new Float64Array(nodes.length * 2); const spreadPotential = (v) => { const u = Math.log(v); return u <= 0 ? u : u + (spreadCompression * u * u) / 2; }; const spreadFromPotential = (P) => { if (P <= 0) return Math.exp(P); const c = spreadCompression; return Math.exp(c > 0 ? (Math.sqrt(1 + 2 * c * P) - 1) / c : P); }; const solveFocus = (q, t) => { const ar = t.re * q.re - t.im * q.im; const ai = t.re * q.im + t.im * q.re; const det = 1 - (ar * ar + ai * ai); if (!(det > 1e-12)) return { re: q.re, im: q.im }; const rx = q.re - t.re, ry = q.im - t.im; return G.clampDisk({ re: ((1 + ar) * rx + ai * ry) / det, im: (ai * rx + (1 - ar) * ry) / det }); }; const spread0 = spread; // what Reset view returns to const spreadTick = (v, dir) => spreadFromPotential(spreadPotential(v) + dir * Math.log(spreadStep)); let animToken = 0; let animRunning = 0; // suppresses the tip while the view is flying let frameId = 0; let lastFrameMs = 0; // Cut the tree into clusters of roughly equal leaf count, one per colour. // A cut is "every maximal node holding at most tau leaves", so the cut sits // at a different depth in each branch: heavy branches keep splitting, light // ones stay whole. Each candidate tau is scored on how much of the tree it // colours, with each cluster's contribution capped at the ideal size so // balance is rewarded over one giant cluster. Whatever is left over — // usually many small branches that only meet at the root, plus the nodes // above the clusters — shares the grey bucket. const K = Math.max(1, maxGroups ?? scheme.length); const leaves = (n) => n.value ?? 1; const totalLeaves = Math.max(1, leaves(rootNode)); const idealSize = totalLeaves / K; const minSize = minGroupFraction * idealSize; const cutAt = (tau) => { const out = []; const stack = [rootNode]; while (stack.length) { const n = stack.pop(); if (leaves(n) <= tau || !n.children || !n.children.length) out.push(n); else for (let i = n.children.length - 1; i >= 0; i--) stack.push(n.children[i]); } return out; }; let taus = Array.from(new Set(nodes.map(leaves))) .filter((v) => v >= minSize) .sort((a, b) => a - b); if (!taus.length) taus = [totalLeaves]; if (taus.length > 96) { const step = (taus.length - 1) / 95; taus = Array.from(new Set( Array.from({ length: 96 }, (_, i) => taus[Math.round(i * step)]) )); } const dfsIndex = new Map(nodes.map((n, i) => [n, i])); let picked = null; for (const tau of taus) { const sel = cutAt(tau) .filter((n) => leaves(n) >= minSize) .sort((a, b) => leaves(b) - leaves(a)) .slice(0, K); const score = sel.reduce((s, n) => s + Math.min(leaves(n), idealSize), 0); const cover = sel.reduce((s, n) => s + leaves(n), 0); if (!picked || score > picked.score + 1e-9 || (score > picked.score - 1e-9 && cover > picked.cover)) { picked = { score, cover, sel }; } } const groups = picked.sel.sort((a, b) => dfsIndex.get(a) - dfsIndex.get(b)); // Name each cluster by its last path segment, falling back to the full // label where two clusters would otherwise read the same. const shortOf = (n) => String(label(n)).split(/[./]/).pop(); const shortSeen = new Map(); for (const g of groups) shortSeen.set(shortOf(g), (shortSeen.get(shortOf(g)) ?? 0) + 1); const catOf = new Map(); const catNode = new Map(); const categories = []; const colorRange = []; groups.forEach((g, i) => { let name = shortSeen.get(shortOf(g)) > 1 ? String(label(g)) : shortOf(g); while (catNode.has(name) || name === otherLabel) name += "\u200b"; categories.push(name); colorRange.push(scheme[i % scheme.length]); catNode.set(name, g); g.each((d) => catOf.set(d, name)); }); for (const n of nodes) if (!catOf.has(n)) catOf.set(n, otherLabel); if (nodes.some((n) => catOf.get(n) === otherLabel)) { categories.push(otherLabel); colorRange.push(otherColor); catNode.set(otherLabel, rootNode); } const container = document.createElement("div"); container.className = "ht-viewer"; container.style.cssText = "width:100%;"; const styleEl = document.createElement("style"); styleEl.textContent = ` .ht-viewer, .ht-viewer * { -webkit-user-select:none; user-select:none; } .ht-viewer button { font:12px system-ui; } .ht-viewer .ht-swatches { margin:0 0 6px 0; font:11px/1 system-ui; min-height:0; } /* Gaps rather than a margin on each swatch: a trailing margin on the last one throws the centring off by its own width. */ .ht-viewer .ht-swatches-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; row-gap:4px; column-gap:1.1em; } .ht-viewer .ht-swatch { display:inline-flex; align-items:center; line-height:1.9; cursor:pointer; } .ht-viewer .ht-swatch:hover { text-decoration:underline; } .ht-viewer .ht-swatch:focus-visible { outline:1px solid #888; outline-offset:2px; } .ht-viewer .ht-swatch > svg { width:11px; height:11px; margin-right:0.4em; } /* The box and its caret are a single svg outline drawn underneath; the div carries only the text, so the two cannot drift apart. */ .ht-viewer .ht-tip { position:absolute; z-index:4; pointer-events:none; display:none; padding:5px 8px; font:12px/1.35 system-ui; color:#111; white-space:nowrap; } /* Labels live in an HTML layer over the svg, not in it. A CSS transform on an svg child is never composited — the browser re-rasterises the glyphs and their halo every frame — whereas an absolutely positioned div moved by transform alone skips layout and paint, and translate3d hands the slanted ones to the compositor outright. The layer itself carries the scale when the figure is rendered smaller than its viewBox, so each label's own transform stays in user units. */ .ht-viewer .ht-label-layer { position:absolute; left:0; top:0; width:0; height:0; z-index:1; pointer-events:none; transform-origin:0 0; } .ht-viewer .ht-label-layer > div { position:absolute; left:0; top:0; } .ht-viewer .ht-label { position:absolute; left:0; top:0; white-space:nowrap; line-height:1; transform-origin:0 0; font:9px system-ui; text-shadow:0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; } .ht-viewer .ht-label-bold { font:bold 11px system-ui; } .ht-viewer .ht-tip-shape { position:absolute; left:0; top:0; z-index:3; display:none; overflow:visible; pointer-events:none; } /* The stage is the positioning context for the label layer and the tips; the fig is the surface that takes the drag. Normally both are exactly the figure. */ .ht-viewer .ht-stage { position:relative; display:inline-block; } .ht-viewer .ht-fig { touch-action:none; cursor:grab; } .ht-viewer .ht-plot { position:relative; display:flex; justify-content:center; } .ht-viewer .ht-tools { position:absolute; bottom:14px; z-index:5; display:flex; gap:6px; } .ht-viewer .ht-tools-left { left:14px; } .ht-viewer .ht-tools-right { right:14px; } .ht-viewer .ht-tools button { padding:3px 9px; color:#555; background:rgba(255,255,255,0.88); border:1px solid #ccc; border-radius:4px; cursor:pointer; } .ht-viewer .ht-tools button:hover { background:#fff; border-color:#999; color:#222; } .ht-viewer .ht-tools button:focus-visible { outline:1px solid #888; outline-offset:2px; } /* Normal flow: one centred column, capped at the figure's own width. These live here rather than inline so the full-screen rules can win. */ .ht-viewer .ht-col { max-width:var(--ht-w); margin:0 auto; } .ht-viewer .ht-legend { margin:0 0 2px; } /* Full screen. The disk is a square viewBox, so it is sized to the short side of whatever the flex layout leaves for it and the rest is padding — which is also where the outermost labels go, hence the wider gap on the left, opposite the legend. */ .ht-viewer.ht-full { position:fixed; inset:0; z-index:9999; width:auto; background:#fff; } .ht-viewer.ht-full .ht-col { max-width:none; margin:0; height:100%; display:flex; box-sizing:border-box; } /* Full screen, the stage and the drag surface grow to the whole plot box and the disk is centred inside them. That leaves the slack either side of the disk draggable too, instead of a dead margin, and gives the buttons somewhere to sit clear of both the disk and the legend. */ .ht-viewer.ht-full .ht-plot { flex:1 1 auto; min-width:0; min-height:0; overflow:visible; } .ht-viewer.ht-full .ht-stage { display:block; width:100%; height:100%; } .ht-viewer.ht-full .ht-fig { width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .ht-viewer.ht-full .ht-legend { flex:0 0 auto; margin:0; overflow:auto; } .ht-viewer.ht-full.ht-land .ht-col { flex-direction:row; padding:2px 10px 2px 56px; } .ht-viewer.ht-full.ht-land .ht-legend { order:2; width:190px; padding-left:14px; display:flex; flex-direction:column; } /* Auto margins rather than justify-content: they centre the list beside the disk, but collapse to zero when it is taller than the space, so a long legend still starts at the top and scrolls from there instead of hiding its first entries above the scroll origin. */ .ht-viewer.ht-full.ht-land .ht-legend .ht-swatches { margin:auto 0; } .ht-viewer.ht-full.ht-land .ht-legend .ht-swatches-wrap { flex-direction:column; align-items:flex-start; justify-content:flex-start; } .ht-viewer.ht-full.ht-land .ht-plot { order:1; } .ht-viewer.ht-full.ht-port .ht-col { flex-direction:column; padding:4px 26px 4px 26px; } .ht-viewer.ht-full.ht-port .ht-legend { order:1; max-height:30%; padding-bottom:6px; } .ht-viewer.ht-full.ht-port .ht-plot { order:2; } `; const legendWrap = document.createElement("div"); legendWrap.className = "ht-legend"; const stage = document.createElement("div"); stage.className = "ht-stage"; const figWrap = document.createElement("div"); figWrap.className = "ht-fig"; stage.append(figWrap); const plot = document.createElement("div"); plot.className = "ht-plot"; plot.append(stage); // The tip is measured as HTML — the div sizes itself to the text — and // then that box is drawn as an svg path with the caret folded into the // same outline, so there is no seam between the two to paper over. const tipSvg = document.createElementNS(SVGNS, "svg"); tipSvg.setAttribute("class", "ht-tip-shape"); const tipShadowId = `ht-tip-shadow-${Math.random().toString(36).slice(2, 9)}`; const tipDefs = document.createElementNS(SVGNS, "defs"); const tipFilter = document.createElementNS(SVGNS, "filter"); tipFilter.setAttribute("id", tipShadowId); tipFilter.setAttribute("x", "-30%"); tipFilter.setAttribute("y", "-30%"); tipFilter.setAttribute("width", "160%"); tipFilter.setAttribute("height", "160%"); const tipShadow = document.createElementNS(SVGNS, "feDropShadow"); tipShadow.setAttribute("dx", "0"); tipShadow.setAttribute("dy", "1"); tipShadow.setAttribute("stdDeviation", "1.2"); tipShadow.setAttribute("flood-color", "#000"); tipShadow.setAttribute("flood-opacity", "0.2"); tipFilter.append(tipShadow); tipDefs.append(tipFilter); const tipPath = document.createElementNS(SVGNS, "path"); tipPath.setAttribute("fill", "#fff"); tipPath.setAttribute("stroke", "#ccc"); tipPath.setAttribute("stroke-width", "1"); tipPath.setAttribute("stroke-linejoin", "miter"); tipPath.setAttribute("filter", `url(#${tipShadowId})`); tipSvg.append(tipDefs, tipPath); const tipEl = document.createElement("div"); tipEl.className = "ht-tip"; const tipText = document.createElement("span"); tipEl.append(tipText); stage.append(tipSvg, tipEl); let fullBtn = null; if (showControls) { const left = document.createElement("div"); left.className = "ht-tools ht-tools-left"; const resetBtn = document.createElement("button"); resetBtn.type = "button"; resetBtn.textContent = "Reset view"; resetBtn.addEventListener("click", () => resetView()); left.append(resetBtn); const right = document.createElement("div"); right.className = "ht-tools ht-tools-right"; fullBtn = document.createElement("button"); fullBtn.type = "button"; fullBtn.textContent = "Full screen"; fullBtn.addEventListener("click", () => toggleFull()); right.append(fullBtn); // On the plot rather than the stage: full screen the stage is the whole // area, so the corners of the plot box are the corners of the space // beside the disk, not the corners of the disk itself. plot.append(left, right); } // The figure sits in a centred column no wider than the svg, so on a page // wider than the disk the slack ends up split between the two sides — // which is where a tip on the rim now has room to hang. In full screen // the same column becomes a flex box and the plot wrapper is what the // legend leaves over. const column = document.createElement("div"); column.className = "ht-col"; column.append(legendWrap, plot); container.style.setProperty("--ht-w", `${width}px`); container.append(styleEl, column); // ─── scene graph, built once ────────────────────────────────────────── // Plot rebuilt the whole figure every frame; here the svg and its layer // groups are permanent and each frame is a data join, so panning only // touches the attributes that actually changed. let xs = d3.scaleLinear().domain([-domainR, domainR]).range([margin, width - margin]); let ys = d3.scaleLinear().domain([-domainR, domainR]).range([height - margin, margin]); const color = d3.scaleOrdinal().domain(categories).range(colorRange).unknown(otherColor); let pxPerUnit = Math.abs(xs(1) - xs(0)); // The scales are linear and fixed, so their coefficients are pulled out // once: applying them is then two flops instead of a d3 scale call, which // matters at twelve thousand dots times two coordinates a frame. xs and ys // are kept for inverting and for one-off setup. let sxB = xs(0), sxM = xs(1) - xs(0); let syB = ys(0), syM = ys(1) - ys(0); const SX = (v) => sxB + v * sxM; const SY = (v) => syB + v * syM; const r1 = (v) => Math.round(v * 10) / 10; // cheaper than toFixed(1) // A node's colour is fixed for the life of the chart; looking it up // through the category map and the ordinal scale every frame was pure // overhead. for (let i = 0; i < nodes.length; i++) pool[i].fill = color(catOf.get(nodes[i])); // Each node gets a dither level: the count of trailing zero bits in its // position among its siblings, so 0 outranks 8 outranks 4 outranks 2 // outranks 1. Thinning a fan by level therefore drops whole interleaved // layers — every other label, then every fourth — which is both evenly // spread and nested, and the level never depends on the view. Choosing // by position in the fan instead is what made labels swap places as a // fan of leaves turned past the centre. for (let i = 0; i < nodes.length; i++) pool[i].sLevel = 30; for (const n of nodes) { const kids = n.children; if (!kids) continue; for (let i = 0; i < kids.length; i++) { pool[nodeIndex.get(kids[i])].sLevel = i === 0 ? 30 : 31 - Math.clz32(i & -i); } } const svgSel = d3.create("svg") .attr("font-family", "system-ui, sans-serif") .style("display", "block") .style("max-width", "100%") .style("height", "auto") .style("background", "white"); const svg = svgSel.node(); figWrap.append(svg); const gLinks = svgSel.append("g") .attr("fill", "none") .attr("stroke", linkColor) .attr("stroke-linecap", "round"); const gSpine = svgSel.append("path") .attr("fill", "none") .attr("stroke", spineColor) .attr("stroke-opacity", spineOpacity) .attr("stroke-linecap", "round"); const rimCircle = svgSel.append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-dasharray", "2,3"); // Re-derive everything that was measured in pixels. The budgets go up // with the area, because a larger canvas genuinely has room for more // before anything collides — holding them at the small-figure values // would have given a bigger picture of the same amount of detail. function setSize(w, h) { width = Math.max(160, Math.round(w)); height = Math.max(160, Math.round(h)); const span = Math.min(width, height) - 2 * margin; xs = d3.scaleLinear().domain([-domainR, domainR]).range([margin, width - margin]); ys = d3.scaleLinear().domain([-domainR, domainR]).range([height - margin, margin]); sxB = xs(0); sxM = xs(1) - xs(0); syB = ys(0); syM = ys(1) - ys(0); pxPerUnit = Math.abs(sxM); spacingData = (dotSpacingPx * 2 * domainR) / span; gridN = Math.max(1, Math.ceil(2 / spacingData) + 1); if (!grid || grid.length !== gridN * gridN) grid = new Int32Array(gridN * gridN); labelPadX = (labelSpacingPx[0] * 2 * domainR) / span; labelPadY = (labelSpacingPx[1] * 2 * domainR) / span; const area = (width * height) / (width0 * height0); labelCap = Math.round(labelBudget * Math.min(4, Math.max(1, area))); spokeCap = Math.round(spokeBudget * Math.min(4, Math.max(1, area))); drawCap = Math.round(renderBudget * Math.min(2, Math.max(1, area))); svgSel.attr("width", width).attr("height", height).attr("viewBox", [0, 0, width, height]); rimCircle.attr("cx", SX(0)).attr("cy", SY(0)).attr("r", pxPerUnit); } setSize(width, height); const gDots = svgSel.append("g") .attr("stroke", "white") .attr("stroke-width", 0.6); const gRoot = svgSel.append("g"); // Two containers so paint order still runs slanted first, upright last. const labelLayer = document.createElement("div"); labelLayer.className = "ht-label-layer"; const spokeBox = document.createElement("div"); const flatBox = document.createElement("div"); labelLayer.append(spokeBox, flatBox); stage.append(labelLayer); const spokeSel = d3.select(spokeBox); const flatSel = d3.select(flatBox); // The svg has max-width:100%, so it can render smaller than its viewBox. // One transform on the layer absorbs that, rather than every label having // to know about it — and a ResizeObserver means no per-frame rect read. let labelScale = 1, labelOx = 0, labelOy = 0; function fitLabelLayer() { const r = svg.getBoundingClientRect(); const g = stage.getBoundingClientRect(); const k = (r.width || width) / width; // Full screen the stage is larger than the figure and the figure is // centred in it, so the layer has to be shifted as well as scaled. const ox = r.left - g.left, oy = r.top - g.top; if (Math.abs(k - labelScale) < 1e-4 && Math.abs(ox - labelOx) < 0.5 && Math.abs(oy - labelOy) < 0.5) return; labelScale = k; labelOx = ox; labelOy = oy; labelLayer.style.transform = k === 1 && !ox && !oy ? "none" : `translate(${ox}px,${oy}px) scale(${k})`; } if (typeof ResizeObserver === "function") { const ro = new ResizeObserver(fitLabelLayer); ro.observe(svg); ro.observe(stage); } // Full screen. The browser's own fullscreen is tried first; where it is // refused — a sandboxed iframe, most likely — the same classes are used // on a fixed overlay instead, which fills whatever viewport there is. let manualFull = false; const nativeFull = () => (document.fullscreenElement ?? document.webkitFullscreenElement ?? null) === container; const isFull = () => manualFull || nativeFull(); // Filling the space means growing the canvas, not scaling it: the svg is // given the short side of the plot box as its real width and height, so // dots, text and spacing keep their sizes and the extra pixels turn into // room for detail rather than magnification. function sizeFigure() { // A square, because the domain is the same on both axes and anything // else would draw the disk as an ellipse. The long side of a landscape // screen is left over as the draggable margin. const side = isFull() ? Math.max(160, Math.min(plot.clientWidth, plot.clientHeight)) : width0; if (side === width && side === height) { fitLabelLayer(); return; } setSize(side, side); clearPersistence(); // the spacing grid it was all chosen against is gone fitLabelLayer(); render(); } function applyFull() { const full = isFull(); // Orientation decides which way the column runs: the legend goes beside // the disk when there is width to spare, above it when there is not. const land = window.innerWidth >= window.innerHeight; container.classList.toggle("ht-full", full); container.classList.toggle("ht-land", full && land); container.classList.toggle("ht-port", full && !land); if (fullBtn) fullBtn.textContent = full ? "Exit full screen" : "Full screen"; sizeFigure(); // The flex box may not have settled on the frame the class landed, so // measure once more before trusting the numbers. requestAnimationFrame(sizeFigure); } function toggleFull() { if (isFull()) { manualFull = false; const exit = document.exitFullscreen ?? document.webkitExitFullscreen; if (nativeFull() && exit) { try { exit.call(document); } catch (_) {} } applyFull(); return; } const req = container.requestFullscreen ?? container.webkitRequestFullscreen; const done = (ok) => { manualFull = !ok; applyFull(); }; if (!req) { done(false); return; } try { const r = req.call(container, { navigationUI: "hide" }); if (r && typeof r.then === "function") r.then(() => done(true), () => done(false)); else done(true); } catch (_) { done(false); } } document.addEventListener("fullscreenchange", applyFull); document.addEventListener("webkitfullscreenchange", applyFull); window.addEventListener("resize", () => { if (isFull()) applyFull(); }); window.addEventListener("keydown", (e) => { if (e.key === "Escape" && manualFull) { manualFull = false; applyFull(); } }); let hitList = []; let lastStats = null; let lastPointer = null; let lockNode = null; // the node the tip is pinned to, if any let rootDrawn = null; // this frame's root entry, which carries its clamp // Client px → disk coordinates. Goes through the svg's own rect so a // CSS-scaled figure still maps correctly. function toData(clientX, clientY) { const rect = svg.getBoundingClientRect(); const kx = width / (rect.width || width); const ky = height / (rect.height || height); return { re: xs.invert((clientX - rect.left) * kx), im: ys.invert((clientY - rect.top) * ky) }; } function clampToDisk(x, y, maxR) { const r = Math.hypot(x, y); if (r <= maxR || r === 0) return { x, y, clamped: false }; const s = maxR / r; return { x: x * s, y: y * s, clamped: true }; } function buildPath(list) { const out = []; for (const L of list) { out.push( `M${r1(SX(L.ax))},${r1(SY(L.ay))}L${r1(SX(L.bx))},${r1(SY(L.by))}` ); } return out.join(""); } function buildLegend() { const wrap = document.createElement("div"); wrap.className = "ht-swatches"; const inner = document.createElement("div"); inner.className = "ht-swatches-wrap"; // Listed alphabetically by the name on the swatch, with the catch-all // last however its own name happens to sort. Only the order of the list // changes: colours stay bound to the branch they were assigned to, so // the chart itself looks the same. const strip = (s) => s.replace(/\u200b/g, ""); const listed = categories.slice().sort((a, b) => a === otherLabel ? 1 : b === otherLabel ? -1 : strip(a).localeCompare(strip(b), undefined, { numeric: true, sensitivity: "base" })); for (const name of listed) { const shown = strip(name); const sw = document.createElement("span"); sw.className = "ht-swatch"; sw.tabIndex = 0; sw.setAttribute("role", "button"); sw.title = `Centre on ${shown}`; const icon = document.createElementNS(SVGNS, "svg"); icon.setAttribute("viewBox", "0 0 1 1"); icon.setAttribute("preserveAspectRatio", "none"); const chip = document.createElementNS(SVGNS, "rect"); chip.setAttribute("width", "1"); chip.setAttribute("height", "1"); chip.setAttribute("fill", color(name)); icon.append(chip); sw.append(icon, document.createTextNode(shown)); const target = catNode.get(name); if (target) { sw.addEventListener("click", () => centerOn(target)); sw.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); centerOn(target); } }); } inner.append(sw); } wrap.append(inner); legendWrap.append(wrap); } // Stands in for Plot.tip + Plot.pointer: nearest drawn node inside // hitRadiusPx, re-resolved after every frame so the tip tracks the node // under the cursor while the view is moving. const TIP_GAP = 10; // how far the offset box stands off the text box const CARET_W = 14; // caret base width, measured along the outline function hideTip() { tipEl.style.display = "none"; tipSvg.style.display = "none"; } // Box and caret as one outline. The two feet of the caret are a fixed arc // length apart along the rectangle's perimeter, so walking from one foot // the long way round to the other and closing through the point gives a // base of constant width. Where the feet straddle a corner the triangle // just skews; nothing special-cases it. function tipShapePath(L, T, w, h, apex) { const R = L + w, B = T + h, per = 2 * (w + h); if (!apex) return `M${L},${T}H${R}V${B}H${L}Z`; const ptAt = (s) => { s = ((s % per) + per) % per; if (s <= w) return { x: L + s, y: T }; if (s <= w + h) return { x: R, y: T + (s - w) }; if (s <= 2 * w + h) return { x: R - (s - w - h), y: B }; return { x: L, y: B - (s - 2 * w - h) }; }; // The foot is the box's nearest point to the caret's tip: mid-edge for // a tip out to one side, and the corner itself once the tip has swung // past it. const fx = Math.min(Math.max(apex.x, L), R); const fy = Math.min(Math.max(apex.y, T), B); const sF = fy === T ? fx - L : fx === R ? w + (fy - T) : fy === B ? 2 * w + h - (fx - L) : per - (fy - T); // A base bent round a corner spans less across than the same arc length // laid flat, so it is let out as the foot nears a corner — by the // diagonal at the corner itself, where the two arms meet at a right // angle and the chord is the arc over root two. const corners = [0, w, w + h, 2 * w + h]; const half0 = CARET_W / 2; let toCorner = Infinity; for (const c of corners) { const d = Math.abs(sF - c) % per; toCorner = Math.min(toCorner, Math.min(d, per - d)); } const bend = Math.max(0, Math.min(1, 1 - toCorner / half0)); const half = Math.min(half0 * (1 + (Math.SQRT2 - 1) * bend), (per - 2) / 2); const span = per - 2 * half; const pts = [ptAt(sF + half)]; for (const o of corners .map((c) => ({ c, d: (((c - sF - half) % per) + per) % per })) .filter((o) => o.d > 0.01 && o.d < span - 0.01) .sort((o, q) => o.d - q.d)) pts.push(ptAt(o.c)); pts.push(ptAt(sF - half), apex); return "M" + pts.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join("L") + "Z"; } // Pressing the pointer pins the tip to whatever was under it. A pinned // tip keeps its node through a drag or a fly-to whatever passes beneath // the cursor, and follows that node around as the view moves; it lets go // once the node has drifted out of reach of the pointer. function lockedEntry() { if (!lockNode) return null; const e = lockNode === rootNode ? rootDrawn : pool[nodeIndex.get(lockNode)]; if (!e) return null; if (dragging) return e; const p = toData(lastPointer.x, lastPointer.y); return Math.hypot(e.x - p.re, e.y - p.im) < hitRadiusPx / pxPerUnit ? e : null; } function refreshTip() { if (!lastPointer) { hideTip(); return; } let hit = lockedEntry(); if (!hit) lockNode = null; // Unpinned, nothing is worth pointing at while the view is moving under // a still cursor: the nearest node changes every frame, so the tip would // strobe through half the tree on the way to wherever it was sent. if (!hit && (dragging || animRunning > 0)) { hideTip(); return; } if (!hit) hit = nearestAt(lastPointer.x, lastPointer.y); if (!hit) { hideTip(); return; } tipText.textContent = label(hit.n) + (hit.pinned ? " (pinned \u2014 pan to return)" : ""); tipEl.style.display = "block"; const sRect = svg.getBoundingClientRect(); const gRect = stage.getBoundingClientRect(); const kx = (sRect.width || width) / width; const ky = (sRect.height || height) / height; const ox = sRect.left - gRect.left, oy = sRect.top - gRect.top; const px = ox + xs(hit.x) * kx; const py = oy + ys(hit.y) * ky; const tw = tipEl.offsetWidth, th = tipEl.offsetHeight; const a = tw / 2, b = th / 2; const ax = a + TIP_GAP, ay = b + TIP_GAP; // half-extents of the offset box let ux = px - (ox + xs(0) * kx); let uy = py - (oy + ys(0) * ky); const ur = Math.hypot(ux, uy); if (ur < 1e-6) { ux = 0; uy = -1; } else { ux /= ur; uy /= ur; } // How far a direction runs from the box centre before it meets the // offset box. Standing the box off the node by exactly that distance, // on the far side of it from the disk centre, leaves the node sitting // on the offset outline — which is where the caret's point goes: // mid-edge for a node off to one side, sliding to the corner as the // ray swings to a diagonal. const reach = (dx, dy) => Math.min( Math.abs(dx) > 1e-6 ? ax / Math.abs(dx) : Infinity, Math.abs(dy) > 1e-6 ? ay / Math.abs(dy) : Infinity ); // Bounds are the viewport, not the stage. The stage is only a margin // wider than the disk, so for a node out near the rim there is nowhere // legal to put the box and it ends up dumped back on top of the branch // it describes. Hanging off the side of the figure is fine; going off // screen is not. const vw = document.documentElement.clientWidth; const vh = document.documentElement.clientHeight; const minX = 4 - gRect.left, maxX = Math.max(minX, vw - 4 - tw - gRect.left); const minY = 4 - gRect.top, maxY = Math.max(minY, vh - 4 - th - gRect.top); // Every box centre that puts the node on the offset outline lies on a // rectangle around the node — the offset box's own half-extents — and // the ideal one is where the radial ray crosses it. So when an edge of // the screen rules that point out, the answer is not to give up and // flip inboard: clamp the blocked axis, then travel along the // rectangle to the nearest point still allowed. A tip against the // right of the screen slides up or down the node instead of jumping // across it, and the caret still lands on the node either way. const along = (fixed, nodeFixed, halfFixed, want, nodeFree, halfFree, lo, hi) => { if (Math.abs(fixed - nodeFixed) >= halfFixed - 1e-6) { // still out past the end: free to run the length of that side const a0 = Math.max(nodeFree - halfFree, lo), a1 = Math.min(nodeFree + halfFree, hi); if (a0 <= a1) return Math.min(Math.max(want, a0), a1); return Math.min(Math.max(want, lo), hi); } // pulled in alongside the node: it has to sit off one end instead const ends = [nodeFree - halfFree, nodeFree + halfFree].filter((v) => v >= lo && v <= hi); if (!ends.length) return Math.min(Math.max(want, lo), hi); return ends.reduce((best, v) => (Math.abs(v - want) < Math.abs(best - want) ? v : best)); }; const r0 = reach(ux, uy); const wantX = px + ux * r0, wantY = py + uy * r0; const loX = minX + a, hiX = Math.max(loX, maxX + a); const loY = minY + b, hiY = Math.max(loY, maxY + b); const onOutline = (o) => (Math.abs(Math.abs(o.x - px) - ax) < 0.01 && Math.abs(o.y - py) <= ay + 0.01) || (Math.abs(Math.abs(o.y - py) - ay) < 0.01 && Math.abs(o.x - px) <= ax + 0.01); const cost = (o) => (onOutline(o) ? 0 : 1e6) + Math.hypot(o.x - wantX, o.y - wantY); // Pin each axis to what the screen allows in turn and solve the other // from the rectangle; keeping the node on the outline outranks staying // near the ideal spot, since that is what the caret needs. With // nothing blocked both routes give the ideal point back. const byX = Math.min(Math.max(wantX, loX), hiX); const byY = Math.min(Math.max(wantY, loY), hiY); const optX = { x: byX, y: along(byX, px, ax, wantY, py, ay, loY, hiY) }; const optY = { x: along(byY, py, ay, wantX, px, ax, loX, hiX), y: byY }; const spot = cost(optX) <= cost(optY) ? optX : optY; const left = spot.x - a, top = spot.y - b; tipEl.style.left = `${left}px`; tipEl.style.top = `${top}px`; // The point is where the ray from the box centre to the node crosses // the offset box, which is the node itself unless a clamp has moved // things. A node inside the box leaves the outline plain. const vx = px - (left + a), vy = py - (top + b); let apex = null; if (Math.abs(vx) > a || Math.abs(vy) > b) { const r = reach(vx, vy); apex = { x: left + a + vx * r, y: top + b + vy * r }; } tipSvg.setAttribute("width", Math.max(1, gRect.width)); tipSvg.setAttribute("height", Math.max(1, gRect.height)); tipPath.setAttribute("d", tipShapePath(left, top, tw, th, apex)); tipSvg.style.display = "block"; } function render() { const t0 = performance.now(); frameId++; // Elapsed time since the last frame, which is what the label fades run // on. Clamped because renders are event-driven: after a spell of // nothing happening the gap is arbitrarily long, and a fade in progress // should resume rather than jump to the end. const dtMs = lastFrameMs ? Math.min(100, t0 - lastFrameMs) : 16; lastFrameMs = t0; const all = pool; stickList.length = 0; const mt = morph ? morph.t : 0; let farCount = 0, focalIdx = 0, focalR2 = Infinity; for (let i = 0; i < nodes.length; i++) { let x, y; if (morph) { const a = morphFrom[2 * i], b = morphFrom[2 * i + 1]; x = a + (morphTo[2 * i] - a) * mt; y = b + (morphTo[2 * i + 1] - b) * mt; } else { const z = ht_apply(M, nodes[i].z0); x = z.re; y = z.im; } const e = all[i]; e.stick = e.keep; e.stickLabel = e.labeled; if (e.keep) stickList.push(i); e.keep = false; e.labeled = false; e.x = x; e.y = y; e.r2 = x * x + y * y; if (e.r2 > crampR2) farCount++; if (e.r2 < focalR2) { focalR2 = e.r2; focalIdx = i; } } // How much of the tree is squashed against the rim right now: near zero // with the whole hierarchy in view, high once you have panned into a // branch or spread the layout out. Everything below scales by it, so a // zoomed-out view keeps the old even treatment. // Eased over frames rather than applied outright: a fast zoom otherwise // switches the thinning on inside two or three frames and dumps a few // hundred nodes at once, which is the pop you see. Spreading the same // change over ~15 frames keeps each step below the noticing threshold. const farFrac = farCount / nodes.length; const localityTarget = ht_smoothstep( (farFrac - localityRange[0]) / Math.max(1e-6, localityRange[1] - localityRange[0]) ); locality += (localityTarget - locality) * localityEase; localitySettling = Math.abs(localityTarget - locality) > 2e-3; if (!localitySettling) locality = localityTarget; // Kinship with the node nearest the centre: 1 across its own subtree, // then a step down per level out to siblings, uncles and so on. share is // the depth of the common ancestor, filled in parent-first. // Hold the incumbent focal node until a rival is clearly nearer, so // slow pans do not flip the whole kinship map back and forth. if (focalPrev >= 0 && focalPrev !== focalIdx && all[focalPrev].r2 < focalR2 * focalHysteresis) focalIdx = focalPrev; focalPrev = focalIdx; const focalNode = nodes[focalIdx]; const focalDepth = focalNode.depth; for (let d = 0; d <= focalDepth; d++) { const kin = focalDepth > 0 ? d / focalDepth : 1; kinLut[d] = kinFalloff === 1 ? kin : Math.pow(kin, kinFalloff); } onPath.fill(0); for (let p = focalNode; p; p = p.parent) onPath[nodeIndex.get(p)] = 1; for (let j = 0; j < byDepth.length; j++) { const i = byDepth[j]; const pi = parentIdx[i]; shareBuf[i] = pi < 0 ? 0 : onPath[pi] ? (onPath[i] ? depthOf[i] : depthOf[pi]) : shareBuf[pi]; } // The same keep score does two jobs: it orders the placement pass, and it // sets how much clear space a node demands. Without the second part the // far side would only lose the race locally and still draw in full, since // the grid is spatial and the crowded rim never competes with the centre. const multSpan = spacingMultRange[1] - spacingMultRange[0]; bucketCount.fill(0); for (let i = 0; i < nodes.length; i++) { const e = all[i]; if (e.r2 >= cullR2) { bucketOf[i] = 0; bucketCount[0]++; continue; } const rho = rhoOf(Math.sqrt(e.r2)); const near = 1 / (1 + Math.max(0, rho - nearFreeRho) / Math.max(1e-6, nearFalloffRho)); // Kinship is a floor, not an average: anything in the branch you are in // keeps full detail however far out it sits, siblings and uncles give // up detail a level at a time, and unrelated nodes fall back to plain // distance. Big subtrees are thinned less, so the far side degrades to // a skeleton you can still see and steer towards. const k = kinLut[shareBuf[i]]; const keep = k + (1 - k) * near; const thin = locality * (1 - keep) * (1 - impOf[i]); needBuf[i] = spacingData * (spacingMultRange[0] + multSpan * thin); const score = impOf[i] + locality * (keep - impOf[i]); const b = Math.min(DETAIL_BUCKETS - 1, Math.max(0, (score * DETAIL_BUCKETS) | 0)); bucketOf[i] = b; bucketCount[b]++; } // Counting sort into buckets, high first, keeping subtree-size order // inside each bucket. At locality 0 that reduces to the old ranking. let acc = 0; for (let b = DETAIL_BUCKETS - 1; b >= 0; b--) { bucketCursor[b] = acc; acc += bucketCount[b]; } for (let j = 0; j < order.length; j++) { const i = order[j]; orderBuf[bucketCursor[bucketOf[i]]++] = i; } const posOf = (n) => all[nodeIndex.get(n)]; const rz = posOf(rootNode); const rc = clampToDisk(rz.x, rz.y, rootClampR); const rootEntry = { n: rootNode, x: rc.x, y: rc.y, fill: rz.fill, r2: rc.x * rc.x + rc.y * rc.y, pinned: rc.clamped, op: 1 }; grid.fill(-1); const isFree = (d, need) => { const gx = ((d.x + 1) / spacingData) | 0; const gy = ((d.y + 1) / spacingData) | 0; const reach = need <= spacingData ? 1 : Math.min(16, Math.ceil(need / spacingData)); const need2 = need * need; const x0 = gx > reach ? gx - reach : 0, x1 = gx + reach < gridN ? gx + reach : gridN - 1; const y0 = gy > reach ? gy - reach : 0, y1 = gy + reach < gridN ? gy + reach : gridN - 1; for (let y = y0; y <= y1; y++) { for (let x = x0; x <= x1; x++) { const h = grid[y * gridN + x]; if (h === -1) continue; const e = all[h]; const dx = e.x - d.x, dy = e.y - d.y; if (dx * dx + dy * dy < need2) return false; } } return true; }; const occupy = (i, d) => { const gx = ((d.x + 1) / spacingData) | 0; const gy = ((d.y + 1) / spacingData) | 0; const k = gy * gridN + gx; if (grid[k] === -1) grid[k] = i; }; // Admitting a node admits every ancestor with it, whether or not they // won their own spacing test. Pruning therefore eats leaves first and // works inwards, and a drawn node always has a drawn parent: no gaps in // the middle of a branch, and no rung of the ladder popping in later. const others = []; const chain = []; const admit = (i) => { chain.length = 0; for (let j = i; j !== -1 && !all[j].keep; j = parentIdx[j]) chain.push(j); for (let c = chain.length - 1; c >= 0; c--) { const j = chain[c]; const d = all[j]; d.keep = true; occupy(j, d); if (d.n !== rootNode) others.push(d); } }; stickList.sort((a, b) => (bucketOf[b] - bucketOf[a]) || (rank[a] - rank[b])); for (let pass = 0; pass < 2; pass++) { const list = pass === 0 ? stickList : orderBuf; for (let j = 0; j < list.length; j++) { if (others.length >= drawCap - 1) break; const i = list[j]; const d = all[i]; if (d.keep || d.r2 >= cullR2) continue; if (pass === 1 && d.stick) continue; // A node already on screen holds its place at a slacker spacing than // a newcomer needs to take one, so nodes on the edge of colliding // stop flickering in and out frame to frame. if (!isFree(d, pass === 0 ? needBuf[i] * stickyRelief : needBuf[i])) continue; admit(i); } } rootEntry.keep = true; // Selection is a hard in/out, so ease the opacity towards it instead of // snapping. A node that has just been admitted fades up, one that has // just lost its place keeps drawing while it fades down: the churn at the // margin of the visible set stops reading as pop. let fading = false; const dots = []; for (let i = 0; i < nodes.length; i++) { const e = all[i]; const target = e.keep ? 1 : 0; if (e.op !== target) { e.op += (target - e.op) * fadeEase; if (Math.abs(target - e.op) < 0.01) e.op = target; else fading = true; } if (e.op > 0.02 && e.n !== rootNode) dots.push(e); } dots.sort((a, b) => a.r2 - b.r2); const drawn = [...dots, rootEntry]; // The chain of ancestors from the node nearest the centre back to the // root. Its links come out of the grey tiers and go into one black run, // so the way back is legible against everything else. const centerEntry = dots[0] && dots[0].r2 < rootEntry.r2 ? dots[0] : rootEntry; const spine = []; for (let n = centerEntry.n; n; n = n.parent) spine.push(n); const onSpine = new Set(spine); const linkList = []; const spineList = []; for (const d of dots) { const par = d.n.parent; if (!par) continue; const pp = par === rootNode ? rootEntry : posOf(par); const L = { ax: pp.x, ay: pp.y, bx: d.x, by: d.y, op: Math.min(d.op, pp.op) }; (onSpine.has(d.n) ? spineList : linkList).push(L); } const labelData = []; let spokeData = []; const placed = []; const tryLabel = (d) => { for (const q of placed) { if (Math.abs(q.x - d.x) < labelPadX && Math.abs(q.y - d.y) < labelPadY) return; } labelData.push(d); placed.push(d); d.labeled = true; }; const entryOf = (n) => (n === rootNode ? rootEntry : posOf(n)); // A fan of children read outwards along their own links rather than // sitting upright above the dot: at the centre the branches spread in // every direction, and a label lying on its link says which spoke it // belongs to without any leader line. // // The fan hangs off the bold node, unless the bold node is a leaf and // has nothing to fan, in which case it hangs off the leaf's parent. // Centring a leaf then leaves the whole fan it belongs to exactly where // it was, at the same angles, with this one label now bold — rather // than wiping out every one of its neighbours' labels. const spokeHub = centerEntry.n.children?.length ? centerEntry.n : centerEntry.n.parent; const hub = spokeHub ? entryOf(spokeHub) : null; const cxPx = hub ? SX(hub.x) : 0, cyPx = hub ? SY(hub.y) : 0; const cands = spokeScratch; cands.length = 0; for (const c of (hub ? spokeHub.children : null) ?? []) { const e = posOf(c); if (e.op <= 0.02) continue; const ex = SX(e.x), ey = SY(e.y); const vx = ex - cxPx, vy = ey - cyPx; const m = Math.hypot(vx, vy); if (!(m > 1e-6)) continue; // Anchored on the far side of the child so the text runs away from // the centre, and turned back the right way up on the left half, // where the outward direction would otherwise read upside down. e.sx = ex + (vx / m) * SPOKE_GAP; e.sy = ey + (vy / m) * SPOKE_GAP; e.sm = m; e.sAng = Math.atan2(vy, vx); e.sa = (e.sAng * 180) / Math.PI + (vx < 0 ? 180 : 0); e.sEnd = vx < 0; cands.push(e); } // Which labels a fan can carry is decided by the crowding at each one // and its fixed dither level, never by a sweep over the current // positions. Two labels' worth of level is one doubling of density, so // the layers peel off in order as a fan tightens, and back on in the // same order as it opens out. // // The level test is a clean cut, but the switch is not: a label's state // is only ever on or off, and the opacity eases to it over a handful of // frames the way the dots do. Nothing is left sitting half faded at // rest, and nothing blinks on the way there. A band of slack around the // threshold keeps a layer from switching back and forth while the // density hovers on the line. cands.sort((p, q) => p.sAng - q.sAng); for (let i = 0; i < cands.length; i++) { const e = cands[i]; let gap = Infinity; if (i > 0) { gap = Math.min(gap, (e.sAng - cands[i - 1].sAng) * Math.min(e.sm, cands[i - 1].sm)); } if (i + 1 < cands.length) { gap = Math.min(gap, (cands[i + 1].sAng - e.sAng) * Math.min(e.sm, cands[i + 1].sm)); } e.sGap = Math.max(gap, 0.05); // siblings dead in line would divide by nothing } const needAt = (e, bump) => Math.log2(spokeSpacingPx / e.sGap) + bump; // The budget is another bump of the same lever, so overflowing it thins // by layer too rather than lopping off an arc. let shown = 0; for (const e of cands) if (e.sLevel >= needAt(e, 0) + spokeOnLevel) shown++; const bump = shown > spokeCap ? Math.log2(shown / spokeCap) : 0; for (const e of cands) { const need = needAt(e, bump); // A label that was not in the fan last frame starts from nothing and // fades up, so joining a fan looks the same as a layer returning to // one — no label ever pops in at full strength. // Both thresholds hang off the same point, the hysteresis only // holding a layer a little past it. Centring the band on the point // instead put turn-off twice the slack below turn-on — a layer came // on at one spacing and did not go off until the fan was half as // open again, which is why labels crowded before clearing. const on = need + spokeOnLevel; if (e.sFrame !== frameId - 1) { e.sOn = e.sLevel >= on; e.sOp = 0; } else if (e.sLevel >= on) e.sOn = true; else if (e.sLevel < on - spokeHysteresis) e.sOn = false; e.sFrame = frameId; // The fade is stepped by elapsed time, not by frames. A fan // collapsing under a fast drag renders many times more often than one // sitting still, so a fixed per-frame approach made the same // transition take a fraction of the time and read as an instant // switch. On the clock it is the same length whatever the view is // doing — and because a label in motion sets the fading flag, frames // keep being asked for, so it runs to its end after the drag has // stopped and stays smooth if nothing is dragging at all. const want = e.sOn ? 1 : 0; if (e.sOp !== want) { const step = dtMs / Math.max(1, labelFadeMs); e.sOp = want > e.sOp ? Math.min(want, e.sOp + step) : Math.max(want, e.sOp - step); if (e.sOp !== want) fading = true; } if (e.sOp <= 0) continue; // sOp is linear progress; the curve goes on at the end, so the fade // eases in and out of both rest states instead of starting abruptly. e.sAlpha = ht_smoothstep(e.sOp); e.labeled = true; spokeData.push(e); placed.push(e); } // Paint from the top of the screen down, so a lower label's halo eats // into the one above it rather than the other way round. Where two // overlap, what survives is the upper label's top edge — the part of a // word you can still read it from. The bold one goes last regardless. spokeData.sort((p, q) => ((p === centerEntry) ? 1 : 0) - ((q === centerEntry) ? 1 : 0) || p.sy - q.sy); // The bold node only wants an upright label if the fan did not already // give it a slanted one, and the spine and its flankers must not label // a node twice either, now that the fan can reach that far. if (!centerEntry.labeled) tryLabel(centerEntry); // The spine next: the whole chain of ancestors from the node nearest the // centre out to the root, so wherever you are you can read the path you // took to get there. Then, at each parent along it, the two children // either side of the one the spine goes through — the turns you did not // take, which is what you need to steer by. Both are exempt from the // radius cut-off that limits the rest, since the root and the outer // ancestors sit well past it once you are deep in. for (let i = 1; i < spine.length && labelData.length < labelCap - 1; i++) { const e = entryOf(spine[i]); if (e.labeled) continue; if (e.op > 0.02 || e === rootEntry) tryLabel(e); } for (let i = 0; i + 1 < spine.length && labelData.length < labelCap - 1; i++) { const kin = spine[i + 1].children; if (!kin || kin.length < 2) continue; const j = kin.indexOf(spine[i]); // Search outwards from the spine rather than taking only the // immediate neighbour. A neighbour that is thinned out, or that the // fan has already labelled, used to cost that whole side its label // even though there were other branches further along. And where one // side has nothing at all — the spine running down the edge of a fan, // or a stretch of chain whose links reach past nodes that do not // branch — the other side gives up a second, so both flanks always // carry a label. const pick = (from, dir) => { for (let k = from; k >= 0 && k < kin.length; k += dir) { const e = entryOf(kin[k]); if (!e.labeled && e.op > 0.02) return e; } return null; }; const left = pick(j - 1, -1), right = pick(j + 1, 1); if (left) tryLabel(left); if (right) tryLabel(right); if (!left) { const more = pick(j + 1, 1); if (more) tryLabel(more); } if (!right) { const more = pick(j - 1, -1); if (more) tryLabel(more); } } for (let pass = 0; pass < 2; pass++) { for (const d of dots) { if (labelData.length >= labelCap - 1) break; if (d.r2 > labelR2) break; if (d.labeled) continue; if (pass === 0 ? !d.stickLabel : d.stickLabel) continue; tryLabel(d); } } if (!rootEntry.labeled) labelData.push(rootEntry); // Links go out as six paths bucketed by opacity rather than one path per // edge: a few thousand edges in six DOM nodes, at the cost of quantising // the fade into six steps. const TIERS = 6; const tiers = Array.from({ length: TIERS }, () => []); for (const L of linkList) tiers[Math.min(TIERS - 1, ((1 - L.op) * TIERS) | 0)].push(L); gLinks.selectAll("path") .data(tiers) .join("path") .attr("stroke-opacity", (_, i) => (linkOpacity * (1 - i / TIERS)).toFixed(3)) .attr("d", buildPath); gSpine.attr("d", buildPath(spineList)); // Unkeyed joins: every dot's position and opacity changes each frame // anyway, and index order keeps the centre-first paint order from the // sort above without an extra reordering pass. gDots.selectAll("circle") .data(dots) .join((enter) => enter.append("circle").attr("r", dotRadius)) .attr("cx", (d) => SX(d.x)) .attr("cy", (d) => SY(d.y)) .attr("fill", (d) => d.fill) .attr("fill-opacity", (d) => d.op) .attr("stroke-opacity", (d) => d.op); gRoot.selectAll("circle") .data([rootEntry]) .join((enter) => enter.append("circle") .attr("r", 8) .attr("stroke", "black") .attr("stroke-width", 1.5)) .attr("cx", (d) => SX(d.x)) .attr("cy", (d) => SY(d.y)) .attr("fill", (d) => d.fill); // Only the transform is rewritten per frame. Text content, weight and // opacity are left alone unless they actually change, since setting // textContent re-shapes the glyph run either way and reshaping is the // dear part. The anchoring rides in the transform too: a percentage // translate is relative to the element's own box, so the text can be // hung by its right edge without ever measuring it. spokeSel.selectAll("div") .data(spokeData) .join((enter) => enter.append("div").attr("class", "ht-label")) .each(function (d) { const txt = shortName(d.n); if (this.__txt !== txt) { this.textContent = txt; this.__txt = txt; } // Bold changes the face, never the angle: a leaf coming to the // centre should not make its own label swing round. const bold = d === centerEntry; if (this.__bold !== bold) { this.classList.toggle("ht-label-bold", bold); this.__bold = bold; } const op = d.op * d.sAlpha; if (this.__op !== op) { this.style.opacity = op; this.__op = op; } this.style.transform = `translate3d(${r1(d.sx)}px,${r1(d.sy)}px,0) rotate(${r1(d.sa)}deg) ` + (d.sEnd ? "translate(-100%,-50%)" : "translate(0,-50%)"); }); // Bold last. The centre node and the root are the two fixed points the // view is read from, and a plain neighbour's halo painting over them is // the one overlap that costs you your bearings. The sort is stable, so // everything else keeps the order it was placed in. const isBold = (d) => d.n === rootNode || d === centerEntry; labelData.sort((p, q) => (isBold(p) ? 1 : 0) - (isBold(q) ? 1 : 0)); flatSel.selectAll("div") .data(labelData) .join((enter) => enter.append("div").attr("class", "ht-label")) .each(function (d) { const txt = shortName(d.n); if (this.__txt !== txt) { this.textContent = txt; this.__txt = txt; } const bold = isBold(d); if (this.__bold !== bold) { this.classList.toggle("ht-label-bold", bold); this.__bold = bold; } if (this.__op !== d.op) { this.style.opacity = d.op; this.__op = d.op; } // Upright, so a plain 2D translate: no reason to ask for a layer. this.style.transform = `translate(${r1(SX(d.x))}px,${r1(SY(d.y) - 10)}px) translate(-50%,-50%)`; }); hitList = drawn; rootDrawn = rootEntry; refreshTip(); lastStats = { drawn: drawn.length, total: nodes.length, frame: frameId, pending: localitySettling || fading, // true only while something is easing camera: "orbit", spread, locality, cramped: farFrac, focal: String(label(focalNode)), renderMs: performance.now() - t0, rootPinned: rootEntry.pinned }; if (localitySettling || fading) scheduleRender(); } function clampFocus(f) { const r = Math.hypot(f.re, f.im); if (!(r > panLimitR)) return G.clampDisk(f); const s = panLimitR / r; return { re: f.re * s, im: f.im * s }; } function setFocus(f) { focus = clampFocus({ re: f.re, im: f.im }); Minv = G.transMat(focus); } function applyPan(delta) { Minv = G.matNormalize(G.matMul(Minv, G.transMat(G.neg(delta)))); setFocus(G.matApplyToOrigin(Minv)); M = ht_translateFrom(focus); } function animateFocus(target, duration = animDuration) { const myToken = ++animToken; const f0 = { ...focus }; const f1 = G.clampDisk({ re: target.re, im: target.im }); const t0 = performance.now(); animRunning++; if (!lockNode) hideTip(); (function step(now = performance.now()) { if (myToken !== animToken) { animRunning--; return; } const t = Math.min(1, (now - t0) / duration); const e = ht_easeInOutCubic(t); setFocus({ re: f0.re + (f1.re - f0.re) * e, im: f0.im + (f1.im - f0.im) * e }); M = ht_translateFrom(focus); render(); if (t < 1) requestAnimationFrame(step); else { animRunning--; refreshTip(); } })(); } function centerOn(node) { animateFocus(node.z0); } function clearPersistence() { focalPrev = -1; locality = 0; for (const e of pool) { e.keep = false; e.stick = false; e.labeled = false; e.stickLabel = false; } } function applySpread(next, { animate = true, cursor = null } = {}) { const s = Math.min(spreadRange[1], Math.max(spreadRange[0], next)); if (!relayout || s === spread) return; const c = cursor ?? { re: 0, im: 0 }; let anchor = pool[0], best = Infinity; for (let i = 0; i < pool.length; i++) { const e = pool[i]; const dx = e.x - c.re, dy = e.y - c.im; const d = dx * dx + dy * dy; if (d < best) { best = d; anchor = e; } } const target = G.clampDisk({ re: anchor.x, im: anchor.y }); for (let i = 0; i < pool.length; i++) { morphFrom[2 * i] = pool[i].x; morphFrom[2 * i + 1] = pool[i].y; } spread = s; relayout(spread); measureTree(); setFocus(solveFocus(anchor.n.z0, target)); M = ht_translateFrom(focus); clearPersistence(); for (let i = 0; i < nodes.length; i++) { const z = ht_apply(M, nodes[i].z0); morphTo[2 * i] = z.re; morphTo[2 * i + 1] = z.im; } if (!animate || spreadDuration <= 0) { morph = null; render(); return; } const token = ++animToken; const t0 = performance.now(); morph = { t: 0 }; animRunning++; if (!lockNode) hideTip(); (function step(now = performance.now()) { if (token !== animToken) { morph = null; animRunning--; render(); return; } const raw = Math.min(1, (now - t0) / spreadDuration); morph.t = d3.easeCubicOut(raw); if (raw >= 1) morph = null; render(); if (raw < 1) requestAnimationFrame(step); else { animRunning--; refreshTip(); } })(); } let spreadTarget = null, spreadQueued = false; function scheduleSpread(next) { spreadTarget = next; if (spreadQueued) return; spreadQueued = true; requestAnimationFrame(() => { spreadQueued = false; const v = spreadTarget; spreadTarget = null; if (v == null) return; // a reset came in first and cancelled it applySpread(v, { cursor: wheelCursor }); }); } function resetView() { const myToken = ++animToken; morph = null; spreadTarget = null; if (!relayout || Math.abs(spread - spread0) < 1e-6) { animateFocus({ re: 0, im: 0 }); return; } // Zoom and position travel together. Snapping the layout back and then // panning read as two separate events, the tree jumping scale before it // had started moving. Here the tree is laid out afresh on every frame of // the same interval the focus eases over, so it is one movement. The // zoom is interpolated in potential space, the way the wheel steps it, // so it changes by even proportions rather than even amounts. const f0 = { ...focus }; const p0 = spreadPotential(spread), p1 = spreadPotential(spread0); clearPersistence(); const t0 = performance.now(); (function step(now = performance.now()) { if (myToken !== animToken) return; const t = Math.min(1, (now - t0) / animDuration); const e = ht_easeInOutCubic(t); spread = t >= 1 ? spread0 : spreadFromPotential(p0 + (p1 - p0) * e); relayout(spread); measureTree(); setFocus({ re: f0.re * (1 - e), im: f0.im * (1 - e) }); M = ht_translateFrom(focus); render(); if (t < 1) requestAnimationFrame(step); })(); } const CAP = { capture: true }; let dragging = false, last = null, movedPx = 0, rafPending = false; function scheduleRender() { if (rafPending) return; rafPending = true; requestAnimationFrame(() => { rafPending = false; render(); }); } figWrap.addEventListener("pointerdown", (e) => { if (e.button !== 0) return; e.preventDefault(); e.stopPropagation(); animToken++; morph = null; dragging = true; movedPx = 0; last = toData(e.clientX, e.clientY); lastPointer = { x: e.clientX, y: e.clientY }; const grabbed = nearestAt(e.clientX, e.clientY); lockNode = grabbed ? grabbed.n : null; refreshTip(); figWrap.style.cursor = "grabbing"; figWrap.setPointerCapture(e.pointerId); }, CAP); figWrap.addEventListener("pointermove", (e) => { if (!dragging) return; e.stopPropagation(); movedPx += Math.abs(e.movementX ?? 0) + Math.abs(e.movementY ?? 0); const cur = toData(e.clientX, e.clientY); const delta = { re: cur.re - last.re, im: cur.im - last.im }; if (Math.hypot(delta.re, delta.im) > 1e-4) { applyPan(delta); last = cur; scheduleRender(); } }, CAP); // Bubble-phase companion to the capture listener above: tracks the cursor // for the tooltip without interfering with the drag. figWrap.addEventListener("pointermove", (e) => { lastPointer = { x: e.clientX, y: e.clientY }; refreshTip(); }); figWrap.addEventListener("pointerleave", () => { lastPointer = null; lockNode = null; hideTip(); }); function endDrag(e, click) { if (!dragging) return; dragging = false; figWrap.style.cursor = "grab"; try { figWrap.releasePointerCapture(e.pointerId); } catch (_) {} if (click && movedPx < 5) { const hit = nearestAt(e.clientX, e.clientY); if (hit) centerOn(hit.n); } } figWrap.addEventListener("pointerup", (e) => endDrag(e, true), CAP); figWrap.addEventListener("pointercancel", (e) => endDrag(e, false), CAP); function nearestAt(clientX, clientY) { const p = toData(clientX, clientY); // pxPerUnit is in the svg's own units; labelScale carries how those // relate to real pixels once the figure is scaled, as it is full screen. let best = null, bestD = hitRadiusPx / (pxPerUnit * (labelScale || 1)); for (const d of hitList) { const dd = Math.hypot(d.x - p.re, d.y - p.im); if (dd < bestD) { bestD = dd; best = d; } } return best; } figWrap.addEventListener("wheel", (e) => { const c = toData(e.clientX, e.clientY); if (Math.hypot(c.re, c.im) > zoomRegionR) return; e.preventDefault(); animToken++; wheelCursor = c; scheduleSpread(spreadTick(spreadTarget ?? spread, e.deltaY < 0 ? 1 : -1)); }, { passive: false }); buildLegend(); render(); sizeFigure(); return { element: container, reset: resetView, goToRoot: () => centerOn(rootNode), centerOn, get cameraMode() { return "orbit"; }, get panLimit() { return panLimitR; }, get spread() { return spread; }, setSpread: (v, opts) => applySpread(v, typeof opts === "boolean" ? { animate: opts } : opts), get stats() { return lastStats; }, get focus() { return focus; }, get transform() { return M; } }; } const ht_root = Array.isArray(ht_treeData) ? d3.stratify() .id((d) => d.name) .parentId((d) => d.name.includes(".") ? d.name.slice(0, d.name.lastIndexOf(".")) : null) (ht_treeData) : d3.hierarchy(ht_treeData); // Alphabetical within each parent, which the layout then walks in order, so // a node's children read round the fan the way they would down a list. // Sorting on the displayed short name rather than the full path keeps the // two in step; inside one parent the prefix is shared anyway. Natural // ordering so a2 comes before a10, and case is not a tiebreak. if (HT_CONFIG.sortLabels) { const ht_short = (d) => String(d.data?.name ?? d.data?.id ?? d.id ?? "").split(/[./]/).pop(); ht_root.sort((a, b) => ht_short(a).localeCompare(ht_short(b), undefined, { numeric: true, sensitivity: "base" })); } const ht_baseStep = HT_CONFIG.baseSpan / Math.max(1, ht_root.height); const ht_layoutOpts = { sweep: HT_CONFIG.sweep }; const ht_nodes = ht_layout(ht_root, { ...ht_layoutOpts, step: ht_baseStep * HT_CONFIG.spread }); return ht_viewer4(ht_nodes, { ...HT_CONFIG, relayout: (s) => ht_layout(ht_root, { ...ht_layoutOpts, step: ht_baseStep * s }) }); })(); display(ht_chart.element);31:[{"id":"ad0b3f31593a2b841f97dd75480bd0a92e52b7980527288266c7772c8916b8e79adf8cbcf232b477049195164a741422d95d36704a2000e28dda863df2f6e681","href":"https://static.observableusercontent.com/files/ad0b3f31593a2b841f97dd75480bd0a92e52b7980527288266c7772c8916b8e79adf8cbcf232b477049195164a741422d95d36704a2000e28dda863df2f6e681","name":"gtdb-life-genus.json","type":"application/json","lastModified":1788931984720,"size":1117534},{"id":"f74afe33d3a848d2257751c9a83a588338da4d2b1ff0cc494a388e160c51abab9510adafe23ff61fa791c5673f09e633d42abe6cbb9f6436e05f762ccdb2189c","href":"https://static.observableusercontent.com/files/f74afe33d3a848d2257751c9a83a588338da4d2b1ff0cc494a388e160c51abab9510adafe23ff61fa791c5673f09e633d42abe6cbb9f6436e05f762ccdb2189c","name":"mammals.json","type":"application/json","lastModified":1788934156417,"size":271343}] 2e:{"id":"631c67bfe57f0a1c","slug":"hyperbolic-tree-viewer-remix","title":"Hyperbolic Tree Viewer Remix","thumbnail":"dfca4665dd02b26214134693a4a1b2551c0607d0e0b04e4d1e79e1b8910387f4","access_level":"public","create_time":"$D2026-09-09T03:34:47.856Z","update_time":"$D2026-09-17T00:46:36.119Z","view_time":null,"first_public_time":"$D2026-09-09T19:28:26.198Z","has_unpublished_edits":null,"fork":{"id":"214bf2e31d6c906d","slug":"hyperbolic-tree-viewer","title":"Hyperbolic Tree Viewer","owner":{"id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors"}},"stars":15,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":802,"publish_version":802,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hyperbolic Tree Viewer Remix","cells":[{"id":141,"value":"# Hyperbolic Tree Viewer Remix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"This is a fork and remix of [ee2dev](https://observablehq.com/@ee2dev)'s notebook, which they have since updated to [Hyperbolic Tree Viewer 3](https://observablehq.com/@ambassadors/hyperbolic-tree-viewer-part-3). I love the concept and wanted to try a few variation.\n\n- In hyperbolic space, panning the space in a circle and returning to the same spot [rotates the space](https://youtu.be/zQo_S3yNa2w?t=434), which is called [holonomy](https://en.wikipedia.org/wiki/Holonomy). This makes navigation disorienting. I've anchored the direction to the root node so a slight rotation is applied to counter act this holonomy. This is similar to the difference between trackball and orbit cameras in 3D.\n- I've changed the zoom behavior to adjust the curvature of the space, fanning out the nodes.\n\nIf you like this, don't forget to support the original author! I'm surprised how fun and easy it is to explore large hierarchies. Thanks to [ee2dev](https://observablehq.com/@ee2dev) for the inspiration.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$30","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Mount viewer with pinned root and add go-to-root button","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"const ht_treeData =\n await FileAttachment(\"mammals.json\").json();\n //await FileAttachment(\"gtdb-life-genus.json\").json();\n\ndisplay(ht_treeData);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2"}} 2f:"$2e:body"