2b:null 2c:["$","title",null,{"children":"Hyperbolic Tree Viewer - Part 3 | Observable Ambassadors | Observable"}] 31:T833,This is my first attempt using Notebooks 2.0 and it has been an amazing experience!🥰 I wanted to revive using the hyperbolic geometry for data visualization following the idea of Lamping & Rao’s classic “hyperbolic browser” (Xerox PARC, 1995, [video](https://www.youtube.com/watch?v=8bhq08BQLDs) or [paper](https://www.researchgate.net/publication/234779771_Visualizing_large_trees_using_the_hyperbolic_browser)). #### Why Despite many existing great visualizations for hierarchical data (e.g. [treemaps, tidy trees, circle packing](https://observablehq.com/@d3/-/collection/d3-hierarchy)) the hyperbolic geometry has some nice properties for exploring hierarchical data: - The [*Poincaré disk model*](https://en.wikipedia.org/wiki/Poincaré_disk_model) maps an entire (infinite) tree into a unit disk. As a result, it provides **focus** for points near the center while preserving **context** with compressed points near the boundary. - **Interactive navigation** through [*Möbius transforms*](https://en.wikipedia.org/wiki/Möbius_transformation) is a scalable and intuitive way to explore data - Last but not least, it is an aesthetically pleasing representation. ... and you can use it for non-hierarchical data, too - [e.g. see web site and publications from Jörg Walter](https://joerg-walter.de/pub/h2vis/index.html#HSOM) #### How - First I ended up with a proof-of-concept after just a few prompts guiding the agent [Hyperbolic Tree Viewer - Part 1](https://observablehq.com/@ambassadors/hyperbolic-tree-viewer) - Then [@lao](https://observablehq.com/@lao) saw the notebook and created the notebook [Hyperbolic Tree Viewer Remix](https://observablehq.com/@laotzunami/hyperbolic-tree-viewer-remix) with many great🤩 extensions covering ideas for layout, scalability and label placement - At the same time, I was adding functionality mainly with respect to interactivity and data-driven extensions Seeing all the cool😎 improvements from [@lao](https://observablehq.com/@lao), I tried to merge most of those into this version, hopefully covering the combined🙌 progress.32:T9eb,// CELL: mammals-demo — "Mammals": ht_viewer on the mammals dataset (ht_treeData), using // the default "anchored" layout (ht_layoutAnchored). As of ht_viewer's own `withControlPanel` // default (see viewer-main), the single ht_viewer(...) call below already builds the control // panel AND combines it with the viewer into one themed outer div (via ht_buildViewerLayout) // internally, so `display(viewer)` alone reproduces what used to take three separate calls — see // the "Auto-assembled control panel + layout" doc note in the reference cell. // // NOTE ON MATCHING ht_chart's LOOK: ht_layoutAnchored's raw node positions are mathematically // IDENTICAL to ht_chart's own internal layout for this same data (verified directly: diffing // every one of the 8,656 mammal nodes' z0 between ht_layoutAnchored({k:2.2}) and ht_chart's own // ht_layout({step: HT_CONFIG.baseSpan / height}) call gives a max difference of 0 — both reduce // to the exact same step, since HT_CONFIG.baseSpan (4.4) === 2*k for k=2.2). So the "layout" was // never actually the mismatch. What WAS different is how many of those identically-placed nodes // each viewer actually DRAWS: ht_chart's HT_CONFIG.renderBudget defaults to 12000 (comfortably // above this dataset's 8,656 nodes, so it draws essentially the whole tree, using its own // sophisticated spatial-thinning pass to decide what to keep on-screen if it ever did exceed // budget), while ht_viewer4's own `renderBudget` defaults to 600 (tuned as a scalability knob for // much larger/arbitrary trees) — for an 8,656-node tree that meant only the 600 nodes NEAREST THE // CENTER were ever drawn (see ht_computeVisibleNodes), which looks like a small dense clump // rather than ht_chart's fully fanned-out tree. Passing `renderBudget: nodes.length` here removes // that artificial cap for this demo, so every node ht_layoutAnchored placed is actually drawn — // which is what makes the two visualizations of the same data actually look alike. const root = d3.hierarchy(ht_treeData); // .children is the default accessor const nodes = ht_layout(root, { k: 2.2 }); const viewer = ht_viewer(nodes, { label: (d) => d.data.name, // <- point this at whatever field holds your label title: "Hyperbolic tree viewer — Mammals hierarchy (8,656 nodes)", subtitleBase: "Drag to pan · scroll to zoom · double-click to focus · squares = leaves, circles = branches ·", renderBudget: nodes.length // show every node ht_layoutAnchored placed — see the doc note above }); display(viewer);33:T4d4,// CELL: flare-viewer — live demo on the flare dataset, with a right-hand control panel // (reset, a theme toggle, a drag-to-pan joystick with an "Animation demo" auto-play journey, an // edge-style toggle, and experimental sliders — see ht_buildControlPanel). As of ht_viewer's own // `withControlPanel` default (see viewer-main), the single ht_viewer(...) call below already // builds that panel AND combines it with the viewer into one themed outer div (via // ht_buildViewerLayout) internally — so `display(ht_flareViewer)` alone reproduces what used to // take three separate calls (ht_viewer + ht_buildControlPanel + ht_buildViewerLayout). // `ht_flareViewer` is still the full viewer API too (ht_flareViewer.setOptions(...), .onChange(...), // etc. all still work — see the "Auto-assembled control panel + layout" doc note in the reference // cell for how a plain DOM node ends up with every one of those methods/live getters attached). const ht_flareViewer = ht_viewer(ht_flareNodes, { title: "Hyperbolic tree viewer — Flare class hierarchy (252 nodes)", subtitleBase: "Drag to pan · scroll to zoom · double-click to focus · squares = leaves, circles = branches ·", theme: "dark" }); display(ht_flareViewer);34:T1b04,display(md` ## 1. Visualizing Your Own Data **Summary:** your node data must be in one of two shapes — **(A)** already nested, with \`children\` arrays (§1.1), or **(B)** a flat table of rows with an id + a parent reference (§1.2) — and you may *optionally* also supply a separate **edges dataset** (§1.4) if you want to color/size the edges themselves by some per-connection data, beyond the default single uniform color/width. The rest of this chapter walks through each of these in detail. The viewer doesn't consume raw data directly — it consumes a **[d3.hierarchy](https://d3js.org/d3-hierarchy)** root (a tree of linked node objects with \`.children\`, \`.parent\`, \`.depth\`, etc.). You build that root from your data first, *then* pass it to \`ht_layout\`. There are two common shapes your source data can be in: ### 1.1 Shape A — Already nested (JSON tree with \`children\` arrays) If your data already looks like a tree: \`\`\`json { "name": "CEO", "children": [ { "name": "VP Engineering", "children": [ { "name": "Engineer A" }, { "name": "Engineer B" } ]}, { "name": "VP Sales", "children": [ { "name": "Sales Rep A" } ]} ] } \`\`\` use **\`d3.hierarchy\`** directly — no conversion needed: \`\`\`js const root = d3.hierarchy(myNestedData); // .children is the default accessor const nodes = ht_layout(root, { k: 2.2 }); const viewer = ht_viewer(nodes, { label: (d) => d.data.name, // <- point this at whatever field holds your label title: "My Org Chart" }); display(viewer); \`\`\` ### 1.2 Shape B — Flat table (rows with an id + a parent reference) This is the more common real-world case — e.g. a CSV export, a database table, or file paths. Each row needs **a unique id** and **a reference to its parent's id** (or \`null\`/ missing for the root). Two typical flavors: **B1. Explicit parent-id column** | id | parentId | name | |---|---|---| | 1 | | CEO | | 2 | 1 | VP Engineering | | 3 | 2 | Engineer A | | 4 | 2 | Engineer B | | 5 | 1 | VP Sales | \`\`\`js const root = d3.stratify() .id((d) => d.id) .parentId((d) => d.parentId || null) (myFlatRows); const nodes = ht_layout(root, { k: 2.2 }); const viewer = ht_viewer(nodes, { label: (d) => d.data.name }); display(viewer); \`\`\` **B2. Dotted path names (no separate id/parentId column)** — this is what the built-in \`flare\` example uses: \`"flare.util.Strings"\` implies its parent is \`"flare.util"\`. \`\`\`js const root = d3.stratify() .id((d) => d.name) .parentId((d) => d.name.includes(".") ? d.name.slice(0, d.name.lastIndexOf(".")) : null) (myFlatRows); // rows need a unique dotted "name" field const nodes = ht_layout(root, { k: 2.2 }); const viewer = ht_viewer(nodes, { label: (d) => d.data.name }); display(viewer); \`\`\` The same pattern works for file paths (split on \`"/"\` instead of \`"."\`) or any other delimiter-based hierarchy. ### 1.3 Requirements & gotchas - **Every id must be unique.** \`d3.stratify\` throws if two rows share an id. - **Exactly one root.** Every row's parent chain must terminate at a single row with a \`null\`/missing \`parentId\` (or an implicit root, e.g. a name with no dot). If you have multiple disconnected trees, wrap them under a synthetic root row first. - **No cycles.** A row can't (directly or transitively) be its own ancestor. - **The \`label\` option must match your fields.** The default tries \`d.data.name\` then \`d.data.id\`; if your field is called something else (e.g. \`d.data.title\`), pass your own function — this also controls the color grouping (by top-level ancestor) and the tooltip text. ### 1.4 Optionally adding edge data Everything above only describes the *nodes* — the tree structure itself already implies every edge (parent → child), so you don't need a separate edges table at all just to draw the tree. But if you also have per-connection data (e.g. a transaction volume, a reporting weight, a relationship type) that you'd like to color or size the EDGES by — beyond the default single uniform color/width — pass it as a flat array of rows via the \`edgesData\` option, each with a **\`source\`** and **\`target\`** field (matching two node ids) plus whatever extra fields you want to map: \`\`\`js const edgesData = [ { source: "1", target: "2", weight: 5 }, { source: "2", target: "3", weight: 12 }, { source: "1", target: "5", weight: 3 } ]; const viewer = ht_viewer(nodes, { label: (d) => d.data.name, edgesData, edgeColorMode: "field", edgeColorField: "weight", // or leave these off and pick a field edgeWidthMode: "field", edgeWidthField: "weight" // live from the panel's "Mappings" tab instead }); display(viewer); \`\`\` A few things worth knowing: - **\`source\`/\`target\` must match each node's own \`.id\`.** \`d3.stratify\` (Shape B above) sets this automatically from whatever \`.id()\` accessor you gave it. \`d3.hierarchy\` (Shape A) does **not** set \`.id\` on its own — assign it yourself first, e.g. \`root.each((d) => { d.id = d.data.id; })\`, using whichever field of your nested data is a stable unique identifier. - **\`edgeColorMode\`/\`edgeWidthMode\` are optional up front.** Passing \`edgesData\` alone is enough to make its fields show up as selectable choices in the control panel's "Mappings" tab ("Edge color"/"Edge width" dropdowns) — you don't have to pick a field via options; a viewer of your visualization can just as easily pick one from the panel themselves. Fields you specify via options merely set the INITIAL selection. - **An edge with no matching row is fine** — it just falls back to the default uniform color/width; \`edgesData\` doesn't need to cover every single edge in the tree. - Every row also needs \`source\`/\`target\` to be an actual PARENT → CHILD pair in your tree (not any arbitrary two nodes) — \`ht_viewer\` only ever draws the edges the hierarchy itself implies, and looks up each one's row by that exact pair. ### 1.5 One call is all you need \`ht_viewer(nodes, options)\` builds the interactive visualization AND (by default) its own right-hand control panel, combined into a single displayable node — so \`display(viewer)\` alone is enough. Pass \`withControlPanel: false\` if you'd rather assemble a custom layout by hand — see the "Auto-assembled control panel + layout" doc note in the "ht_viewer code documentation reference" cell for details. ### 1.6 Loading data from a file In Observable, load your file first in its own cell, then build the hierarchy in a second cell: \`\`\`js const rows = await FileAttachment("org-chart.csv").csv({typed: true}); \`\`\` \`\`\`js const root = d3.stratify().id(d => d.id).parentId(d => d.parentId || null)(rows); const nodes = ht_layout(root, { k: 2.2 }); const viewer = ht_viewer(nodes, { label: d => d.data.name, title: "Org Chart" }); display(viewer); \`\`\` `);35:Ta73,## Feature summary **Layout** - **Anchored** (default) — aperture-weighted, holonomy-anchored positions, spacing children by subtree size. - **Geodesic / radial** — classic d3.tree layout, drawn with true hyperbolic arcs or tidy-tree bump curves. - **Edge treatment** — shrink-to-floor, fade, or hard cutoff for nodes nearing the boundary. **Scalability** - **Render budget** — a cap on how many nodes are drawn per frame. - **Spatial thinning** — keeps only as many dots as fit on screen without overlapping, regardless of tree size. - **Sticky persistence + eased fade** — a node already on screen is harder to bump out than a new one is to admit, and nodes fade smoothly in/out. - **Kinship-weighted detail** The center node's branch keeps full detail regardless of distance, while unrelated branches degrade faster. - **Fast edge rendering** — collapses thousands of edges into a handful of hand-built SVG paths. **Interactions** - **Pan** — drag anywhere inside the disk, or use the on-screen joystick. - **Pan-limiting** — dragging and scroll-to-fan are both clamped so you can't pan/scroll into an empty void past the deepest leaves. - **Zoom** — the control panel's slider rescales the view (domainR) without distorting the layout. - **Scroll-to-fan** — mouse wheel adjusts the layout's own curvature instead, fanning nodes in/out anchored to the cursor. - **Click-to-focus** — double-click any node to recenter on it. - **Reset / go to root** — jump back to the starting view or recenter the root. - **Animation demo** — an auto-playing pan journey through preset waypoints. **Data-driven mappings** - **Node color** — by branch, by cluster of roughly equal leaf count, a single color, or any data field. - **Node size** — uniform, or scaled by a numeric data field. - **Edge color** — a single color, or per-edge from a separate edge dataset. - **Edge width** — uniform, or scaled by a numeric edge field. **Node labels** - **Collision-aware** labels are rejected if they'd overlap an already-placed one, whichever node sits nearest the center is guaranteed a label and drawn slightly larger - **Radius fade** — every node within a fixed radius of the view's center gets a label, fading out smoothly over an extra ring beyond it. **Filter & search** - **Category filter** — highlight the subtree matching a chosen attribute value. - **Node search** — jump straight to a node by typing its label. **Visual polish** - **Root wave** — an animated "radar ping" locked onto the root node. - **Theme** — light or dark color scheme. - **Stats overlay** — a live readout of nodes drawn vs. total and render time.36:T980a,// CELL: viewer-main — ht_viewer(): the core interactive hyperbolic tree viewer; see "ht_viewer code documentation reference" (the last cell) for detailed design notes on every concern below. // MAINTENANCE: keep this cell small and every comment in it to one line — move any longer explanation to the reference cell above instead. function ht_viewer(nodes, options = {}) { let { width = 700, height = 700, renderBudget = 600, // max nodes drawn per frame (paired with dotSpacingPx thinning) dotSpacingPx = 2, // min on-screen px spacing once renderBudget exceeded; <=0 disables thinning labelBudget = 150, // internal safety cap on label count; labelRadius is the primary control — "radius" labelMode only (see labelBudgetCollision for "collision") title = "Hyperbolic tree viewer", subtitleBase = "", chrome = "full", // "full" (default: title/subtitle/legend + viz) | "minimal" (just the viz) domainR = 1.05, // half-width of the plotted domain (the "Zoom" control) spread = 1, // layout fan-out (curvature) multiplier, driven by the mouse wheel spreadStep = 1.1, // multiplicative step per wheel tick (before log-compression) spreadRange = [0.35, 5], // clamp bounds for spread layoutK = 2.2, // base k/step at spread=1, for both ht_layout and ht_layoutAnchored label = (d) => d.data.name ?? d.data.id ?? String(d.data), animDuration = 500, rootClampR = 0.95, // keep the root visible just inside the boundary, however far pushed panLimitDepth = null, // null → one level above the deepest leaves edgeStyle = "shrinkFloor", // "shrinkFloor" (default) | "fade" | "cutoff" — see ht_computeVisibleNodes edgeCurve = "anchored", // "anchored" (default) | "geodesic" | "radial" — see ht_createLayoutController edgeStart = 0.6, edgeHorizon = 0.93, edgeFloorSize = 1.4, edgeSamples = 20, edgeWidth = 1.5, // base edge stroke width in px (before zoomFactor) clickRadius = 20, // px — how close a double-click/tap needs to land to select a node labelRadius = 0.28, // data-space radius (0..1) within which labels are shown — "radius" mode: full opacity, fading beyond it; "collision" mode: the hard nearest-first search cutoff (see ht_computeLabelDataCollision) labelFadeWidth = 0.2, // additional radius beyond labelRadius over which labels fade to 0 — "radius" labelMode only showLabelRadius = false, nodeSizeScale = 1, labelFontSize = 9, labelGap = 6, // px gap (before zoomFactor) between a node's own edge and its label labelMode = "collision", // "collision" (default) | "radius" — see ht_computeLabelDataCollision / ht_computeLabelData labelSpacingPx = [30, 10], // [x,y] px collision padding between labels — "collision" labelMode only labelBudgetCollision = 40, // max labels shown — "collision" labelMode only (matches ht_chart's own default; much lower than labelBudget since every label here is already guaranteed collision-free, so there's no need for as generous a cap) showStatsOverlay = true, minDomainR = 0.15, // scroll-zoom-in limit maxDomainR = 3, // scroll-zoom-out limit sizeZoomExponent = 1, // how strongly zoom scales rendered sizes (0=off, 1=fully proportional) theme = "light", // "light" (default) | "dark" — see ht_resolveThemeColors edgesData = null, // optional separate {source,target,...fields} table — see ht_buildEdgeAttrIndex nodeColorMode = "branch", // "branch" (default) | "cluster" | "single" | "field" nodeColorField = null, nodeColorSingle = "#4269d0", nodeSizeMode = "uniform", // "uniform" (default) | "field" nodeSizeField = null, edgeColorMode = "single", // "single" (default) | "field" edgeColorField = null, edgeColorSingle = null, // null = use the theme's default edge color edgeWidthMode = "uniform", // "uniform" (default) | "field" edgeWidthField = null, showRootWave = true, // animated "radar ping" locked onto the root node rootWaveColor = null, // null = auto (theme-appropriate) rootWaveMaxRadius = 40, // px, before zoomFactor — outer radius each ping expands to rootWaveDuration = 4000, // ms per ping cycle rootWaveCount = 1, // number of staggered, concurrently-expanding rings fadeEase = 0.22, // per-frame opacity approach rate as nodes enter/leave the thinned set stickyRelief = 0.7, // spacing multiplier to KEEP a spot vs. the full requirement to CLAIM one detailMode = "kinship", // "kinship" (default) | "distance" — see ht_computeKinshipDetail crampRho = 5, // past this hyperbolic radius a node counts as "squashed" (locality dial) localityRange = [0.2, 0.8],// squashed-fraction range over which thinning intensity ramps up localityEase = 0.15, // per-frame approach rate for that ramp; 1 = instant kinFalloff = 1.5, // how fast kinship protection drops off per level of relatedness focalHysteresis = 2.5, // how much nearer a rival must be to take over as the focal node nearFreeRho = 2, // full detail out to this hyperbolic radius regardless of kinship nearFalloffRho = 2.5, // how fast detail falls off past nearFreeRho spacingMultRange = [1, 2.5] // dot spacing-requirement multiplier, top priority → bottom } = options; // construction-only (not reactive via setOptions — see "Auto-assembled control panel + layout" in the reference cell): whether ht_viewer builds+returns its own control panel/layout. const { withControlPanel = true, controlPanelOptions = {} } = options; const initialDomainR = domainR; // canonical zoom level to return to on reset() const plotMargin = 20; // must match the `margin` option passed to Plot.plot() below const filterTransitionDuration = 800; // fixed category-filter fade/pan duration, independent of animDuration function setOptions(partial) { ({ width, height, renderBudget, dotSpacingPx, labelBudget, title, subtitleBase, domainR, spread, spreadStep, spreadRange, layoutK, label, animDuration, rootClampR, panLimitDepth, edgeStyle, edgeCurve, edgeStart, edgeHorizon, edgeFloorSize, edgeSamples, edgeWidth, clickRadius, labelRadius, labelFadeWidth, showLabelRadius, nodeSizeScale, labelFontSize, labelGap, labelMode, labelSpacingPx, labelBudgetCollision, showStatsOverlay, minDomainR, maxDomainR, sizeZoomExponent, theme, edgesData, nodeColorMode, nodeColorField, nodeColorSingle, nodeSizeMode, nodeSizeField, edgeColorMode, edgeColorField, edgeColorSingle, edgeWidthMode, edgeWidthField, showRootWave, rootWaveColor, rootWaveMaxRadius, rootWaveDuration, rootWaveCount, fadeEase, stickyRelief, detailMode, crampRho, localityRange, localityEase, kinFalloff, focalHysteresis, nearFreeRho, nearFalloffRho, spacingMultRange } = { width, height, renderBudget, dotSpacingPx, labelBudget, title, subtitleBase, domainR, spread, spreadStep, spreadRange, layoutK, label, animDuration, rootClampR, panLimitDepth, edgeStyle, edgeCurve, edgeStart, edgeHorizon, edgeFloorSize, edgeSamples, edgeWidth, clickRadius, labelRadius, labelFadeWidth, showLabelRadius, nodeSizeScale, labelFontSize, labelGap, labelMode, labelSpacingPx, labelBudgetCollision, showStatsOverlay, minDomainR, maxDomainR, sizeZoomExponent, theme, edgesData, nodeColorMode, nodeColorField, nodeColorSingle, nodeSizeMode, nodeSizeField, edgeColorMode, edgeColorField, edgeColorSingle, edgeWidthMode, edgeWidthField, showRootWave, rootWaveColor, rootWaveMaxRadius, rootWaveDuration, rootWaveCount, fadeEase, stickyRelief, detailMode, crampRho, localityRange, localityEase, kinFalloff, focalHysteresis, nearFreeRho, nearFalloffRho, spacingMultRange, ...partial }); render(); } let M = ht_identity; // category filter state — see ht_createFilterController + the reference cell's "Category filter" note. const filterCtl = ht_createFilterController(nodes, 0.05); const { container, plotSlot, statsOverlay } = ht_buildViewerChrome(); const rootWave = ht_buildRootWave(container, { width, height, maxRadius: rootWaveMaxRadius, duration: rootWaveDuration, nrWaves: rootWaveCount }); let toData = () => ({ re: 0, im: 0 }); let animToken = 0; const rootNode = nodes.find((n) => n.depth === 0); // "full" chrome: title/subtitle/legend as plain HTML (no longer Plot's own title/subtitle/legend — see the reference cell's "Chrome layout" note) wrapped with the viz in ONE themed outer div. const titleEl = chrome === "full" ? html`

` : null; const subtitleEl = chrome === "full" ? html`

` : null; const legendSlot = chrome === "full" ? html`

` : null; const outerChrome = chrome === "full" ? html`

${titleEl}${subtitleEl}${legendSlot}${container}

` : null; const element = outerChrome ?? container; // sticky persistence + eased fade state — see ht_thinNodesBySpacing + the reference cell's note. const thinningState = new Map(nodes.map((n) => [n, { op: 0, keep: false }])); // sticky LABEL persistence state — see ht_computeLabelDataCollision + the reference cell's "Node labels" note. const stickyLabelSet = new Set(); // kinship-weighted detail structural data + persistent focal/locality state — see ht_buildKinshipStructural. const { nodeIndexOf: kinshipNodeIndexOf, structural: kinshipStructural, state: kinshipState } = ht_buildKinshipStructural(nodes, rootNode); // tracks the previous detailMode so render() can detect a live change — see the reference cell's "Detail mode" note. let lastDetailMode = detailMode; // layout mode switching ("anchored" vs. tree-based, at any spread) — see ht_createLayoutController. const layoutCtl = ht_createLayoutController(nodes, rootNode, layoutK); // pan/scroll-to-fan clamping — see ht_createPanLimiter. const panLimiter = ht_createPanLimiter(nodes); const isLeaf = (n) => !n.children || n.children.length === 0; const rawBranchOf = (n) => label(n.depth <= 1 ? n : n.ancestors().reverse()[1]); // raw (pre-"Other"-collapse) branch value for the default "branch" node-color mode const { domain: branchColorDomain, categoryOf: branchCategoryOf } = ht_collapseCategories(nodes, rawBranchOf); // static — branch membership never changes // balanced-leaf-count cluster coloring (ht_chart's own algorithm — see ht_buildClusterCategories) for the "cluster" node-color mode — static, same reasoning as branchColorDomain above. const { domain: clusterColorDomain, categoryOf: clusterCategoryOf } = ht_buildClusterCategories(nodes, rootNode, label); const instanceId = `ht-${Math.random().toString(36).slice(2)}`; // unique id prefix for showLabelRadius s // field metadata for the Mappings panel's dropdowns — computed once. const nodeFields = ht_collectFields(nodes.map((n) => n.data)); const edgeFields = edgesData ? ht_collectFields(edgesData) : []; const edgeAttrIndex = edgesData ? ht_buildEdgeAttrIndex(edgesData) : null; // onChange(fn) subscribers — notified with {domainR, transform, showRootWave, spread, theme} after every render(). const changeListeners = new Set(); let hitTest = { entries: [], pxPerUnitX: 1, pxPerUnitY: 1 }; // refreshed at the end of every render() function handleClick(clientX, clientY) { const hit = ht_findNearestNode(hitTest, toData(clientX, clientY), clickRadius); if (!hit) return; if (hit.n === rootNode) goToRoot(); else animateTo(ht_translateFrom(hit.n.z0)); } // pans by a *pixel* offset — lets alternate input (e.g. a joystick) drive panning like a mouse drag. function panByPixels(dxPx, dyPx) { const p0 = toData(0, 0); const p1 = toData(dxPx, dyPx); const delta = { re: p1.re - p0.re, im: p1.im - p0.im }; if (Math.hypot(delta.re, delta.im) < 1e-9) return; animToken++; M = panLimiter.clamp(ht_normalize(ht_composeAfter(ht_translateTo(delta), M))); render(); } // applies a new spread, holding whichever node is nearest `cursor` fixed at its current screen position. function applySpread(nextSpread, cursor) { const s = Math.min(spreadRange[1], Math.max(spreadRange[0], nextSpread)); if (s === spread) return; const c = cursor ?? { re: 0, im: 0 }; let anchor = rootNode, bestD2 = Infinity; for (const n of nodes) { const z = ht_apply(M, n.z0); const dx = z.re - c.re, dy = z.im - c.im; const d2 = dx * dx + dy * dy; if (d2 < bestD2) { bestD2 = d2; anchor = n; } } const targetScreen = ht_apply(M, anchor.z0); // anchor's CURRENT screen position, before relayout changes anchor.z0 spread = s; layoutCtl.apply(edgeCurve, spread); panLimiter.measure(panLimitDepth); // the tree's extent just changed — refresh before clamping below M = panLimiter.clamp(ht_normalize(ht_composeAfter(ht_translateTo(targetScreen), ht_translateFrom(anchor.z0)))); render(); } function render() { const t0 = performance.now(); layoutCtl.apply(edgeCurve, spread); panLimiter.measure(panLimitDepth); // cheap + unconditional so a live panLimitDepth change is honored immediately // if detailMode just changed, invalidate sticky/kinship state so it takes effect cleanly — see the reference cell's "Detail mode" note. if (detailMode !== lastDetailMode) { lastDetailMode = detailMode; for (const st of thinningState.values()) st.keep = false; kinshipState.focalIdx = null; kinshipState.locality = 0; } const colors = ht_resolveThemeColors(theme, rootWaveColor); container.style.background = colors.containerBg; if (outerChrome) outerChrome.style.background = colors.containerBg; // covers title/subtitle/legend too — see the reference cell's "Chrome layout" note if (titleEl) { titleEl.textContent = title; titleEl.style.color = colors.plotText; } if (subtitleEl) { subtitleEl.textContent = subtitleBase; subtitleEl.style.color = colors.statsColor; } const all = ht_projectNodes(nodes, M); const zoomFactor = Math.pow(initialDomainR / domainR, sizeZoomExponent); // how strongly zoom inflates rendered sizes // pixels-per-data-unit, derived analytically since Plot's scale isn't available until Plot.plot() runs. const pxPerUnitX = (width - 2 * plotMargin) / (2 * domainR); const pxPerUnitY = (height - 2 * plotMargin) / (2 * domainR); // kinship/importance detail scoring for this frame — null in "distance" mode (no extra per-frame cost). const kinshipDetail = detailMode === "kinship" ? ht_computeKinshipDetail(all, kinshipStructural, kinshipState, { crampRho, localityRange, localityEase, kinFalloff, focalHysteresis, nearFreeRho, nearFalloffRho, spacingMultRange }) : null; const { colorScaleSpec, legendSpec, nodeCategoryOf, sizeFactorFn, edgeColorScaleFn, edgeWidthScaleFn, useFastEdges } = ht_buildRenderMappings( nodes, edgesData, branchColorDomain, branchCategoryOf, rawBranchOf, clusterColorDomain, clusterCategoryOf, { nodeColorMode, nodeColorField, nodeSizeMode, nodeSizeField, edgeColorMode, edgeColorField, edgeWidthMode, edgeWidthField, edgeWidth } ); if (legendSlot) legendSlot.replaceChildren(...(ht_buildLegend(legendSpec, { textColor: colors.plotText }) ? [ht_buildLegend(legendSpec, { textColor: colors.plotText })] : [])); // which of the three "Node color" modes is active, for THIS frame's nodeCategoryOf (see ht_buildRenderMappings). const nodeFillOf = (n) => (nodeColorMode === "single" ? nodeColorSingle : nodeCategoryOf(n)); // root: always shown, clamped to stay on-screen; radius uses the same base-size pipeline every other node gets. const rootZ = ht_apply(M, rootNode.z0); const rootClamped = ht_clampToDisk(rootZ.re, rootZ.im, rootClampR); const rootRadius = 3 * nodeSizeScale * sizeFactorFn(rootNode) * zoomFactor; const rootEntry = { n: rootNode, x: rootClamped.x, y: rootClamped.y, r2: rootClamped.x ** 2 + rootClamped.y ** 2, isClampedRoot: rootClamped.clamped, vr: rootRadius }; const othersAll = all.filter((d) => d.n !== rootNode); // spatial thinning + sticky persistence + eased fade (+ kinship-weighted detail) — see ht_computeVisibleNodes. const { others, fading } = ht_computeVisibleNodes(othersAll, { edgeStyle, edgeStart, edgeHorizon, edgeFloorSize, nodeSizeScale, zoomFactor, renderBudget, sizeFactorFn, dotSpacingPx, domainR, width, height, plotMargin, thinningState, fadeEase, stickyRelief, detailMode, kinshipDetail, nodeIndexOf: kinshipNodeIndexOf }); ht_computeLeafRotations(others, rootNode, rootEntry, M); const visible = [...others, rootEntry]; // root last so it draws on top const visibleSet = new Set(visible.map((d) => d.n)); const edgeCurveFn = edgeCurve === "radial" ? ht_radialBumpPoints : ht_geodesicPoints; // fast edges (below) build their own pixel-space paths post-Plot.plot(), so skip this data-space prep then. const linkData = useFastEdges ? [] : ht_buildEdgeLinkData(others, rootNode, rootEntry, visibleSet, M, edgeCurveFn, edgeSamples, edgeAttrIndex, filterCtl.edgeOpacity); // tooltip suppression for filtered-out nodes — Plot's `tip` option applies per-mark, so split into two dot marks. const othersTip = filterCtl.set ? others.filter((d) => filterCtl.set.has(d.n)) : others; const othersNoTip = filterCtl.set ? others.filter((d) => !filterCtl.set.has(d.n)) : []; const rootTipEnabled = !filterCtl.set || filterCtl.set.has(rootNode); // label placement: "collision" (default, ht_chart-ported: focal-node emphasis, collision-aware placement, guaranteed centered label, sticky persistence) or "radius" (distance-based fade) — see ht_computeLabelDataCollision / ht_computeLabelData. "collision" uses its OWN (much lower, ht_chart-matching) labelBudgetCollision, rather than labelBudget, since every one of its labels is already guaranteed collision-free; it ALSO shares the very same `labelRadius` value "radius" mode uses, but as a hard nearest-first search cutoff rather than a fade — see ht_computeLabelDataCollision's own doc note. const labelResult = labelMode === "collision" ? ht_computeLabelDataCollision(others, rootEntry, rootNode, { labelSpacingPx, labelRadius, labelBudget: labelBudgetCollision, labelGap, zoomFactor, pxPerUnitX, pxPerUnitY, stickyLabelSet }) : ht_computeLabelData(others, { labelRadius, labelFadeWidth, labelBudget, labelGap, zoomFactor, pxPerUnitY }); const { labelData, labelFadeRadius } = labelResult; // labelFadeRadius is undefined (unused) in "collision" mode // Plot's fontSize text option is a CONSTANT, not a per-datum channel (a function is silently // stringified onto the mark's , never applied per-text — confirmed empirically, same // limitation as `dy`, see ht_computeLabelData's own doc note) — so "focal-node emphasis" // (collision labelMode only: a slightly LARGER font, but never bold — bold is reserved for // the root's own label alone, drawn by its own separate, always-on mark below) needs its own // separate, constant-styled mark. At most one entry is ever isFocal. const labelDataFocal = labelMode === "collision" ? labelData.filter((d) => d.isFocal) : []; const labelDataNormal = labelMode === "collision" ? labelData.filter((d) => !d.isFocal) : labelData; const rootLabelDy = -(rootRadius + labelGap * zoomFactor); // root's label keeps its own dedicated constant dy const lastRenderMs = performance.now() - t0; const plotFigure = Plot.plot({ width, height, margin: plotMargin, x: { domain: [-domainR, domainR], axis: null }, y: { domain: [-domainR, domainR], axis: null }, r: { type: "identity" }, // our precomputed d.vr values are literal pixel radii ...(colorScaleSpec ? { color: colorScaleSpec } : {}), style: { background: colors.plotBg, color: colors.plotText }, marks: [ // slow, fully-general per-edge mark — only when a Mappings field needs genuinely different color/width per edge. ...(useFastEdges ? [] : [Plot.line(linkData, { x: "x", y: "y", z: "e", stroke: (pt) => { if (edgeColorMode === "field" && edgeColorScaleFn) { const v = pt.edgeRow ? pt.edgeRow[edgeColorField] : undefined; return edgeColorScaleFn(v) ?? colors.edgeStroke; } return edgeColorMode === "single" && edgeColorSingle ? edgeColorSingle : colors.edgeStroke; }, strokeOpacity: (pt) => 0.35 * pt.filterFrac, strokeWidth: (pt) => { const w = edgeWidthMode === "field" && edgeWidthScaleFn ? edgeWidthScaleFn(pt.edgeRow ? pt.edgeRow[edgeWidthField] : undefined) : edgeWidth; return w * zoomFactor; }, curve: "linear" })]), // filtered-OUT nodes drawn first (faded, no tooltip), so filtered-IN/all nodes layer on top. Plot.dot(othersNoTip, { x: "x", y: "y", r: (d) => d.vr ?? (3 * nodeSizeScale * zoomFactor), symbol: (d) => (isLeaf(d.n) ? "square" : "circle"), rotate: (d) => (isLeaf(d.n) ? d.rotate ?? 0 : 0), fillOpacity: (d) => (d.opacity ?? 1) * filterCtl.nodeOpacity(d.n), fill: (d) => nodeFillOf(d.n), stroke: colors.nodeStroke, strokeWidth: 0.6 * zoomFactor, strokeOpacity: (d) => (d.opacity ?? 1) * filterCtl.nodeOpacity(d.n) }), Plot.dot(othersTip, { x: "x", y: "y", r: (d) => d.vr ?? (3 * nodeSizeScale * zoomFactor), symbol: (d) => (isLeaf(d.n) ? "square" : "circle"), rotate: (d) => (isLeaf(d.n) ? d.rotate ?? 0 : 0), fillOpacity: (d) => (d.opacity ?? 1) * filterCtl.nodeOpacity(d.n), fill: (d) => nodeFillOf(d.n), stroke: colors.nodeStroke, strokeWidth: 0.6 * zoomFactor, strokeOpacity: (d) => (d.opacity ?? 1) * filterCtl.nodeOpacity(d.n), tip: true, title: (d) => `${label(d.n)}${isLeaf(d.n) ? " (leaf)" : ` (${d.n.children.length} children)`}` }), // root: black-ringed, always visible; `tip`/`title` only when not itself filtered out. Plot.dot([rootEntry], { x: "x", y: "y", r: rootRadius, symbol: (d) => (isLeaf(d.n) ? "square" : "circle"), fill: (d) => nodeFillOf(d.n), fillOpacity: (d) => filterCtl.nodeOpacity(d.n), stroke: colors.rootStroke, strokeWidth: 1.5 * zoomFactor, strokeOpacity: (d) => filterCtl.nodeOpacity(d.n), ...(rootTipEnabled ? { tip: true, title: (d) => label(d.n) + (d.isClampedRoot ? " (pinned — pan/zoom to return)" : "") } : {}) }), // LABEL LEGIBILITY HALO — ported from ht_chart's own label mark (`stroke:"white", // strokeWidth:3, paintOrder:"stroke"`): SVG's default paint order is fill-then-stroke, so // `paintOrder:"stroke"` reverses that for JUST this mark, painting a thick halo stroke // FIRST and the actual glyph fill on TOP of it — giving every label a legible "cutout" // against whatever busy edges/nodes happen to sit behind it, with only ONE mark (no // second, separately-positioned "draw it bigger in white first" mark actually needed — // `paintOrder` does the equivalent job in a single draw call). Unlike ht_chart (light-only, // so its own literal `"white"` halo always matches its own fixed white plot background), // this halo's color is `colors.plotBg` — the SAME background color the current theme's // Plot.plot() is already drawn against (see ht_resolveThemeColors) — so the halo still // reads as "blend into the background" rather than a jarring white outline in dark mode // (where it's black, not white). Applied identically to all three label marks below // (normal, focal-emphasis, and the root's own). Plot.text(labelDataNormal, { x: "x", y: (d) => d.labelY, // per-node exact position — see ht_computeLabelData text: (d) => String(label(d.n)).split(/[./]/).pop(), fontSize: labelFontSize * zoomFactor, fill: "currentColor", fillOpacity: (d) => (d.labelOpacity ?? 1) * filterCtl.nodeOpacity(d.n), stroke: colors.plotBg, strokeWidth: 3 * zoomFactor, paintOrder: "stroke", strokeOpacity: (d) => (d.labelOpacity ?? 1) * filterCtl.nodeOpacity(d.n) }), // focal-node emphasis (larger font, never bold — "collision" labelMode only) — its own mark; see the doc note above. Plot.text(labelDataFocal, { x: "x", y: (d) => d.labelY, text: (d) => String(label(d.n)).split(/[./]/).pop(), fontSize: (labelFontSize + 2) * zoomFactor, fill: "currentColor", fillOpacity: (d) => (d.labelOpacity ?? 1) * filterCtl.nodeOpacity(d.n), stroke: colors.plotBg, strokeWidth: 3 * zoomFactor, paintOrder: "stroke", strokeOpacity: (d) => (d.labelOpacity ?? 1) * filterCtl.nodeOpacity(d.n) }), // the root's own label is the ONLY one ever drawn bold — see the doc notes above. Plot.text([rootEntry], { x: "x", y: "y", text: (d) => String(label(d.n)).split(/[./]/).pop(), dy: rootLabelDy, fontSize: (labelFontSize + 2) * zoomFactor, fontWeight: "bold", fill: "currentColor", fillOpacity: (d) => filterCtl.nodeOpacity(d.n), stroke: colors.plotBg, strokeWidth: 3 * zoomFactor, paintOrder: "stroke", strokeOpacity: (d) => filterCtl.nodeOpacity(d.n) }) ] }); // no title/subtitle/legend => Plot.plot() returns the bare

${fmt(domain[0])}

${fmt(domain[1])}

`; } // categorical: a compact, wrapping row of swatches, capped to a small fixed height (scrollable // if it overflows) so a big domain (e.g. 10 branch categories + "Other") never pushes the rest // of the layout down — deliberately NOT interactive (no click-to-center, unlike ht_chart's own). const { domain, range } = legendSpec; return html`

${domain.map((label, i) => html`${label}`)}

`; } display("Compact viewer legend — ht_buildLegend"); display(ht_buildLegend);38:T904,// CELL: viewer-layout-assembler — ht_buildViewerLayout(): combines a ht_viewer instance's own // element (title/subtitle/legend/viz, or just the bare viz — see ht_viewer's own `chrome` option) // with an externally-built control panel (ht_buildControlPanel) into ONE outer div — replacing // the ad-hoc `html\`

${viewer.element}${panel}

\`` pattern every // demo used to hand-assemble itself. This single div is what makes theme switching consistently // darken (or lighten) the WHOLE displayed area — including the gap between the viewer and the // panel, which previously had no background of its own at all and so stayed the page's own // default color even in dark mode — not just each of the two children's own separately-themed // backgrounds. Also calls ht_alignPanelToPlot internally, so callers no longer need to do that // themselves either. // // AS OF ht_viewer's OWN `withControlPanel` OPTION (default `true` — see viewer-main and its // "Auto-assembled control panel + layout" doc note in the reference cell), this function is // normally called AUTOMATICALLY by ht_viewer itself — a single `ht_viewer(nodes, options)` call // now returns exactly what `ht_buildViewerLayout(viewer, panel)` used to, with every viewer // method/getter copied onto that same returned node. Calling this function directly by hand (as // every demo used to) is now only needed for a custom layout — e.g. multiple panels, or a panel // built with non-default `ht_buildControlPanel` options beyond what `controlPanelOptions` covers — // paired with `ht_viewer(nodes, {..., withControlPanel: false})` to get back the bare viewer API. function ht_buildViewerLayout(viewer, panel, { gap = 16 } = {}) { const outer = html`

${viewer.element}${panel}

`; function applyTheme(theme) { outer.style.background = theme === "dark" ? "#000" : ""; } applyTheme(viewer.theme); // sync immediately with whatever the viewer's CURRENT theme already is viewer.onChange(({ theme }) => applyTheme(theme)); ht_alignPanelToPlot(viewer.element, panel); return outer; } display("Viewer + panel layout assembler — ht_buildViewerLayout"); display(ht_buildViewerLayout);39:T5c4,// CELL: viewer-layout-controller — ht_createLayoutController(): switches a tree between its // "anchored" (aperture-weighted) and "tree" (d3.tree-based) z0 positions, at any spread. Details: see viewer-main-reference § Layout modes. function ht_createLayoutController(nodes, rootNode, layoutK) { const treeZ0 = new Map(nodes.map((n) => [n, n.z0])); // original ht_layout baseline (spread=1) let anchoredZ0 = null; // lazily computed anchored baseline (spread=1) let lastKey = null; function ensureAnchored() { if (anchoredZ0) return; ht_layoutAnchored(rootNode, { k: layoutK }); anchoredZ0 = new Map(nodes.map((n) => [n, n.z0])); for (const n of nodes) n.z0 = treeZ0.get(n); // restore until apply() picks a side } // copies whichever (mode, spread) position set is active onto every node's own `.z0`; no-op if unchanged. function apply(mode, spread) { const key = `${mode === "anchored" ? "anchored" : "tree"}:${spread}`; if (key === lastKey) return; lastKey = key; if (spread === 1) { if (mode === "anchored") { ensureAnchored(); for (const n of nodes) n.z0 = anchoredZ0.get(n); } else for (const n of nodes) n.z0 = treeZ0.get(n); return; } const k = layoutK * spread; if (mode === "anchored") ht_layoutAnchored(rootNode, { k }); else ht_layout(rootNode, { k }); } return { apply }; } display("Layout mode controller — ht_createLayoutController"); display(ht_createLayoutController);3a:T7ab,// CELL: viewer-pan-limiter — ht_createPanLimiter() + ht_spreadTick(): pan/scroll-to-fan clamping // and the log-compressed wheel step. Details: see viewer-main-reference § Pan-limiting, § Scroll-to-fan. function ht_createPanLimiter(nodes) { const maxDepth = nodes.reduce((m, n) => Math.max(m, n.depth), 0); let limitR = 0.9999; // recomputes the pan-limit radius for the CURRENT node positions/panLimitDepth. function measure(panLimitDepth) { const limitDepth = Math.max(0, Math.min(maxDepth, panLimitDepth ?? maxDepth - 1)); let lim = 0, rho = 0; for (const n of nodes) { const r = Math.hypot(n.z0.re, n.z0.im); rho = Math.max(rho, 2 * Math.atanh(Math.min(0.999999, r))); if (n.depth === limitDepth) lim = Math.max(lim, r); } limitR = Math.min(0.9999, lim > 1e-6 ? lim : Math.tanh(rho / 2)); } function focusOf(M) { return ht_div({ re: -M.b.re, im: -M.b.im }, M.a); } // tree-space point at screen center // clamps M's translation to stay within limitR, preserving any accumulated rotation. function clamp(Mnext) { const f = focusOf(Mnext); const r = Math.hypot(f.re, f.im); if (!(r > limitR)) return Mnext; const s = limitR / r; const fClamped = { re: f.re * s, im: f.im * s }; const rot = ht_composeAfter(Mnext, ht_translateTo(f)); return ht_normalize(ht_composeAfter(rot, ht_translateFrom(fClamped))); } return { measure, clamp, get limit() { return limitR; } }; } // log-compressed spread step (compression fixed at 1, matching ht_chart's own runtime default). function ht_spreadTick(v, dir, spreadStep) { const potential = (x) => { const u = Math.log(x); return u <= 0 ? u : u + (u * u) / 2; }; const fromPotential = (P) => (P <= 0 ? Math.exp(P) : Math.exp(Math.sqrt(1 + 2 * P) - 1)); return fromPotential(potential(v) + dir * Math.log(spreadStep)); } display("Pan limiter + spread-tick — ht_createPanLimiter, ht_spreadTick"); display(ht_createPanLimiter);3b:T6cc,// CELL: viewer-kinship-structural — ht_buildKinshipStructural(): one-time parent/depth/leaf-count // structural data + persistent focal/locality state for kinship-weighted detail (see // ht_computeKinshipDetail, viewer-node-data cell). Details: see viewer-main-reference § Detail mode. function ht_buildKinshipStructural(nodes, rootNode) { const nodeIndexOf = new Map(nodes.map((n, i) => [n, i])); const parentIdxArr = new Int32Array(nodes.length).fill(-1); const depthOfArr = new Int32Array(nodes.length); for (let i = 0; i < nodes.length; i++) { depthOfArr[i] = nodes[i].depth; if (nodes[i].parent) parentIdxArr[i] = nodeIndexOf.get(nodes[i].parent); } const byDepthArr = Int32Array.from(nodes.keys()).sort((a, b) => depthOfArr[a] - depthOfArr[b]); // leaf count computed directly (not trusting `.value`, which the shared ht_layout never sets). const leafCount = new Float32Array(nodes.length); for (let j = byDepthArr.length - 1; j >= 0; j--) { const i = byDepthArr[j]; const kids = nodes[i].children; if (!kids || !kids.length) leafCount[i] = 1; else { let sum = 0; for (const c of kids) sum += leafCount[nodeIndexOf.get(c)]; leafCount[i] = sum; } } const impOfArr = new Float32Array(nodes.length); const span = Math.log1p(Math.max(1, leafCount[nodeIndexOf.get(rootNode)])); for (let i = 0; i < nodes.length; i++) impOfArr[i] = Math.log1p(leafCount[i]) / span; return { nodeIndexOf, structural: { parentIdxArr, depthOfArr, byDepthArr, impOfArr }, state: { focalIdx: null, locality: 0 } // persistent across renders (focal hysteresis + eased locality) }; } display("Kinship structural data builder — ht_buildKinshipStructural"); display(ht_buildKinshipStructural);3c:T727,// CELL: viewer-filter-controller — ht_createFilterController(): category-filter membership + // opacity state (target/from/fade), decoupled from the animation loop that drives its fade value. // Details: see viewer-main-reference § Category filter. function ht_createFilterController(nodes, floorOpacity = 0.05) { let set = null, fade = 0, nodeFrom = null, edgeFrom = null; // current opacity fraction for a node, given the active filter (if any) and any in-flight fade. function nodeOpacity(n) { const target = (!set || set.has(n)) ? 1 : floorOpacity; if (!nodeFrom) return target; const from = nodeFrom.has(n) ? nodeFrom.get(n) : target; return from + (target - from) * fade; } // same idea, for an edge (identified by its own child node). function edgeOpacity(parent, child) { const target = (!set || (set.has(parent) && set.has(child))) ? 1 : floorOpacity; if (!edgeFrom) return target; const from = edgeFrom.has(child) ? edgeFrom.get(child) : target; return from + (target - from) * fade; } // snapshots every node's/edge's ACTUAL current opacity, then sets the new filter target. function snapshotAndSet(newSet) { const nSnap = new Map(), eSnap = new Map(); for (const n of nodes) { nSnap.set(n, nodeOpacity(n)); if (n.parent) eSnap.set(n, edgeOpacity(n.parent, n)); } set = newSet; nodeFrom = nSnap; edgeFrom = eSnap; } function setFade(v) { fade = v; } function clearSnapshots() { nodeFrom = null; edgeFrom = null; } function reset() { set = null; fade = 0; nodeFrom = null; edgeFrom = null; } return { nodeOpacity, edgeOpacity, snapshotAndSet, setFade, clearSnapshots, reset, get set() { return set; } }; } display("Category filter controller — ht_createFilterController"); display(ht_createFilterController);3d:T1682,// CELL: viewer-theme-colors — ht_resolveThemeColors(): the light/dark color palette for one render. // Details: see viewer-main-reference § Theme. function ht_resolveThemeColors(theme, rootWaveColor) { const dark = theme === "dark"; return { dark, containerBg: dark ? "#000" : "", plotBg: dark ? "#000" : "white", plotText: dark ? "#eee" : "black", diskStroke: dark ? "#555" : "#ccc", edgeStroke: dark ? "#888" : "#999", nodeStroke: dark ? "#000" : "white", rootStroke: dark ? "#f2f2f4" : "black", statsBg: dark ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.75)", statsColor: dark ? "#aaa" : "#888", labelInner: dark ? "#7c9ce8" : "#4269d0", labelOuter: dark ? "#33475e" : "#bfdbfe", labelOuterText: dark ? "#9fb8e8" : "#7ba7e0", rootWave: rootWaveColor ?? (dark ? "#9db8f5" : "#4269d0") }; } // the fixed categorical color scheme + grey "Other" swatch color used for BOTH the node color // scale (so Plot's actual fill colors) AND the compact custom legend that mirrors it — assigning // this explicitly (rather than letting Plot pick its own default scheme) is what lets the legend // reproduce the exact same colors without needing to inspect Plot's own resolved scale. const HT_CATEGORICAL_SCHEME = d3.schemeTableau10; const HT_OTHER_COLOR = "#a9a9a9"; function ht_assignCategoricalRange(domain, otherLabel) { return domain.map((d, i) => (d === otherLabel ? HT_OTHER_COLOR : HT_CATEGORICAL_SCHEME[i % HT_CATEGORICAL_SCHEME.length])); } // CELL: viewer-render-mappings — ht_buildRenderMappings(): builds the "Node color"/"Node // size"/"Edge color"/"Edge width" Mappings-pane scales for one render, PLUS `legendSpec` (for the // compact custom legend — see ht_buildLegend) and `nodeCategoryOf` (the actual per-node category // string/number Plot's fill channel should read, already collapsed into "Other" if needed — see // ht_collapseCategories). Details: see viewer-main-reference § Data-driven mappings. // // `branchColorDomain`/`branchCategoryOf` are the (construction-time, static) collapsed "branch" // category domain/mapper — passed in rather than recomputed here every frame, since branch // membership never changes; `rawBranchOf(n)` is the raw (pre-collapse) branch value for a node. // `clusterColorDomain`/`clusterCategoryOf` are the analogous static, balanced-leaf-count CLUSTER // domain/mapper (see ht_buildClusterCategories, ported from ht_chart's own cluster-cut algorithm) // — also computed once, since which cluster a node falls into is likewise a fixed property of // tree structure, not something that changes frame to frame. function ht_buildRenderMappings(nodes, edgesData, branchColorDomain, branchCategoryOf, rawBranchOf, clusterColorDomain, clusterCategoryOf, opts) { const { nodeColorMode, nodeColorField, nodeSizeMode, nodeSizeField, edgeColorMode, edgeColorField, edgeWidthMode, edgeWidthField, edgeWidth } = opts; let colorScaleSpec = null; let legendSpec = null; let nodeCategoryOf = null; // (n) => the value Plot's fill channel should read; null for "single" mode if (nodeColorMode === "field" && nodeColorField) { const kind = ht_fieldKind(nodes.map((n) => n.data[nodeColorField])); if (kind === "numeric") { const domain = d3.extent(nodes, (n) => +n.data[nodeColorField]); colorScaleSpec = { legend: false, type: "linear", domain, scheme: "blues", unknown: "#ccc" }; legendSpec = { kind: "continuous", domain, interpolator: d3.interpolateBlues }; nodeCategoryOf = (n) => +n.data[nodeColorField]; } else { const { domain, categoryOf } = ht_collapseCategories(nodes, (n) => n.data[nodeColorField]); const range = ht_assignCategoricalRange(domain, "Other"); colorScaleSpec = { legend: false, type: "categorical", domain, range, unknown: "#ccc" }; legendSpec = { kind: "categorical", domain, range }; nodeCategoryOf = (n) => categoryOf(n.data[nodeColorField]); } } else if (nodeColorMode === "branch") { const range = ht_assignCategoricalRange(branchColorDomain, "Other"); colorScaleSpec = { legend: false, type: "categorical", domain: branchColorDomain, range }; legendSpec = { kind: "categorical", domain: branchColorDomain, range }; nodeCategoryOf = (n) => branchCategoryOf(rawBranchOf(n)); } else if (nodeColorMode === "cluster") { const range = ht_assignCategoricalRange(clusterColorDomain, "Other"); colorScaleSpec = { legend: false, type: "categorical", domain: clusterColorDomain, range }; legendSpec = { kind: "categorical", domain: clusterColorDomain, range }; nodeCategoryOf = (n) => clusterCategoryOf(n); } // "single": colorScaleSpec/legendSpec/nodeCategoryOf all stay null — literal color, nothing to map/show let sizeFactorFn = () => 1; if (nodeSizeMode === "field" && nodeSizeField) { const sizeScale = ht_buildSizeFactorScale(nodes.map((n) => n.data[nodeSizeField])); sizeFactorFn = (n) => sizeScale(n.data[nodeSizeField]); } let edgeColorScaleFn = null; if (edgeColorMode === "field" && edgeColorField && edgesData) { const kind = ht_fieldKind(edgesData.map((r) => r[edgeColorField])); edgeColorScaleFn = ht_buildLiteralColorScale(edgesData.map((r) => r[edgeColorField]), kind); } let edgeWidthScaleFn = null; if (edgeWidthMode === "field" && edgeWidthField && edgesData) { edgeWidthScaleFn = ht_buildWidthScale(edgesData.map((r) => r[edgeWidthField]), edgeWidth); } return { colorScaleSpec, legendSpec, nodeCategoryOf, sizeFactorFn, edgeColorScaleFn, edgeWidthScaleFn, useFastEdges: !edgeColorScaleFn && !edgeWidthScaleFn }; } display("Theme colors + render mappings — ht_resolveThemeColors, ht_buildRenderMappings"); display(ht_resolveThemeColors);3e:T1104,// CELL: layout-anchored — ht_layoutAnchored(): the aperture-weighted, holonomy-anchored // hyperbolic layout used by the "Hyperbolic Tree Viewer Remix" ht_chart demo (see its markdown // cell for the holonomy/anchoring rationale), extracted here as a standalone, reusable function // so ht_viewer can offer it as a third "layout" option (see the control-panel-builder and // viewer-main cells). Unlike ht_layout (the d3.tree-based tidy hyperbolic layout every other // layout option uses), this spaces each node's children by their own subtree weight (default: // leaf count, via weight = d => d.value, filled in by root.count()) rather than splitting the // angular range evenly, and tracks a per-node "forward" direction (_far/_fai/_fbr/_fbi/_forward) // anchored back toward the root as it recurses — this is what keeps a straight pan feeling // straight instead of slowly rotating (the "holonomy" the markdown cell above describes). // Mutates `.z0` (and a handful of internal `_f*`/`_aperture` bookkeeping fields) directly on // every node returned by root.descendants(), exactly like ht_layout does. // // VERIFIED IDENTICAL TO ht_chart's OWN LAYOUT: when the "My Org Chart" demo (using ht_viewer's // default "anchored" layout) was compared against ht_chart on the exact same data (ht_treeData, // the mammals dataset), the two still looked visibly different — this was investigated by // directly diffing every one of that dataset's 8,656 nodes' z0 between (a) this function called // the way ht_viewer calls it (`{k: 2.2}`, so step defaults to `(2*k)/height`) and (b) the exact // call ht_chart makes internally (`{step: HT_CONFIG.baseSpan / height}`, HT_CONFIG.baseSpan = // 4.4): the two step values are algebraically identical (2*2.2 === 4.4), and the resulting // max position difference across all 8,656 nodes was exactly 0. So this function's math was // NOT the cause of the mismatch — see the org-chart-demo cell's own doc note for the actual // cause (ht_viewer's `renderBudget` — a scalability knob unrelated to layout — was, by default, // only drawing the 600 nodes nearest the center out of 8,656, unlike ht_chart's much higher // budget which draws essentially the whole tree) and its fix. function ht_layoutAnchored(root, { k = 2.2, step = null, weight = (d) => d.value, rootAngle = -Math.PI / 2, 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)); let a = u._forward - 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 + beta; a += 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(); } display("Anchored (aperture-weighted, holonomy-anchored) hyperbolic layout"); display(ht_layoutAnchored);3f:T8e9,// CELL: edge-curves — hyperbolic geodesic edge rendering: returns a sampled polyline // (array of {re,im} points) approximating the true hyperbolic straight line from z1 to z2. // Operates in the *projected* (screen-space, post-Möbius) disk coordinates, since that's // what's drawn each frame — it doesn't require re-running the static layout. // True hyperbolic geodesics: the mathematically "straight" line of the hyperbolic metric. // In the Poincaré disk model a geodesic is a circular arc orthogonal to the boundary circle // (or a diameter, when it passes through the center). Möbius-invariant: because ht_apply is // a disk automorphism, this looks like a "clean" hyperbolic line in *every* view, not just // the untransformed one — and it directly avoids overlap problems like a centered node's // edges slicing through a neighboring branch's fan, because geodesics bow back toward the // metrically "cheaper" middle of the disk instead of cutting a straight Euclidean chord. function ht_geodesicPoints(z1, z2, { n = 24 } = {}) { const x1 = z1.re, y1 = z1.im, x2 = z2.re, y2 = z2.im; const det = x1 * y2 - y1 * x2; // near-collinear with the origin (or either endpoint essentially at the center) => the // "circle" degenerates to a straight diameter; fall back to a straight segment. const nearOrigin = Math.hypot(x1, y1) < 1e-6 || Math.hypot(x2, y2) < 1e-6; if (Math.abs(det) < 1e-9 || nearOrigin) { const pts = []; for (let i = 0; i <= n; i++) { const t = i / n; pts.push({ re: x1 + (x2 - x1) * t, im: y1 + (y2 - y1) * t }); } return pts; } const b1 = (x1 * x1 + y1 * y1 + 1) / 2, b2 = (x2 * x2 + y2 * y2 + 1) / 2; const cx = (b1 * y2 - b2 * y1) / det, cy = (x1 * b2 - x2 * b1) / det; const r = Math.sqrt(Math.max(0, cx * cx + cy * cy - 1)); let a0 = Math.atan2(y1 - cy, x1 - cx), a1 = Math.atan2(y2 - cy, x2 - cx); let da = a1 - a0; da -= 2 * Math.PI * Math.round(da / (2 * Math.PI)); // orthogonal-circle property guarantees |da|<=pi here const pts = []; for (let i = 0; i <= n; i++) { const t = i / n; const a = a0 + da * t; pts.push({ re: cx + r * Math.cos(a), im: cy + r * Math.sin(a) }); } return pts; } display("Hyperbolic geodesic edge rendering"); display(ht_geodesicPoints);40:Ta8b,// CELL: edge-curves-radial — alternative "radial tidy tree" style edge curve, matching the // classic d3.linkRadial() bump curve (as seen in https://observablehq.com/@d3/radial-tree/2) // instead of a true hyperbolic geodesic. Same signature as ht_geodesicPoints (operates on the // *projected*, screen-space endpoints and returns a sampled polyline), so it's a drop-in // alternative edge-drawing function. // // WHY: true hyperbolic geodesics bow back toward the disk's center (the metrically "cheapest" // path between two points) — this is great for avoiding cross-branch overlap, but it means that // for a node with MANY children, every one of its outgoing edges bows toward the origin, so they // can read as a chaotic fan of big arcs sweeping through the middle of the disk. d3's radial-tree // link instead computes a Bezier curve in (angle, radius) polar coordinates — which keeps each // edge visually confined to the narrow "wedge" between its two endpoints' angles — giving the // familiar, tidy radial-dendrogram look, with no edge ever ballooning across the disk. // // IMPLEMENTATION: mirrors d3-shape's curveBumpRadial exactly. The 4 cubic-Bezier control points // are first computed in (angle, radius) space — start, (angle0, midRadius), (angle1, midRadius), // end (the same "hold angle, move to the mean radius" shape as curveBumpY) — and only THEN is // each of those 4 points individually converted to Cartesian (r·cosθ, r·sinθ) and used directly // as a literal Cartesian Bezier control point. That's the same trick d3 uses internally: the // curve's *shape* is defined in polar space, but the actual Bezier math runs in Cartesian on the // polar-projected control points. function ht_radialBumpPoints(z1, z2, { n = 24 } = {}) { const r1 = Math.hypot(z1.re, z1.im), a1 = Math.atan2(z1.im, z1.re); const r2 = Math.hypot(z2.re, z2.im); let a2 = Math.atan2(z2.im, z2.re); // unwrap so the curve sweeps the short way around (never the "long way" through the back) while (a2 - a1 > Math.PI) a2 -= 2 * Math.PI; while (a2 - a1 < -Math.PI) a2 += 2 * Math.PI; const midR = (r1 + r2) / 2; const toXY = (a, r) => ({ re: r * Math.cos(a), im: r * Math.sin(a) }); const P0 = toXY(a1, r1), P1 = toXY(a1, midR), P2 = toXY(a2, midR), P3 = toXY(a2, r2); const pts = []; for (let i = 0; i <= n; i++) { const t = i / n, u = 1 - t; const b0 = u * u * u, b1 = 3 * u * u * t, b2 = 3 * u * t * t, b3 = t * t * t; pts.push({ re: b0 * P0.re + b1 * P1.re + b2 * P2.re + b3 * P3.re, im: b0 * P0.im + b1 * P1.im + b2 * P2.im + b3 * P3.im }); } return pts; } display("Radial-tidy-tree-style edge curve"); display(ht_radialBumpPoints);41:Te2fc,// CELL: control-panel-builder — ht_buildJoystick() + ht_buildControlPanel(): reusable UI for // driving a ht_viewer4 instance (reset button, a light/dark theme toggle, a draggable pan // joystick with an "Animation demo" auto-play journey, a layout selector, a handful of // live sliders, a "Mappings" pane for data-driven node/edge color & size, and a "Filter" pane — // itself split into a "filter by attribute" section (search-and-highlight-a-subtree by a // categorical attribute) and a "search for a node" section (jump straight to any single node by // its label text — see below) — so different interaction styles can be tried side-by-side. // ht_alignPanelToPlot() keeps the panel vertically aligned with the plot's disk itself (not the // whole viewer div, which also includes the title/subtitle/legend block above the disk). // // THEMING: the panel itself is colored entirely via a handful of CSS custom properties // (--ht-panel-bg, --ht-text, --ht-muted, --ht-faint, --ht-border, --ht-divider, --ht-input-bg) set // on the panel's own root element by `ht_applyPanelTheme`. Every themed child element references // these with `var(--name, )` rather than a literal color, so descendants // automatically stay in sync — CSS variables are "live": once the root's property changes, every // `var()` reference to it repaints immediately, with no need to walk the DOM and patch each // element by hand. `color-scheme` is also set on the root so native form controls (the `; input.addEventListener("input", () => { const v = +input.value; out.textContent = format(v); viewer.setOptions(toOption(v)); }); const header = label ? html`

${label}${out}

` : html`

${out}

`; const element = html`

${header}${input}

`; function update(rawValue) { input.value = rawValue; out.textContent = format(rawValue); } return { element, update }; } // Builds a labeled checkbox bound to a live viewer option via setOptions(). // // Returns `{ element, update(checked) }` — same pattern as ht_buildSlider: `update` sets the // checkbox's checked state WITHOUT firing the `input` event or calling `viewer.setOptions`, so // external code can keep the checkbox in sync when the underlying option changes for some OTHER // reason (e.g. applyFilter() auto-disabling `showRootWave` — see the "highlight root node" // checkbox's `viewer.onChange` subscription in ht_buildControlPanel below), without creating a // feedback loop back into the viewer. function ht_buildCheckbox(viewer, { label, checked = false, toOption = (v) => ({}) } = {}) { const input = html``; input.checked = checked; input.addEventListener("input", () => viewer.setOptions(toOption(input.checked))); const element = html`${input}${label}`; function update(v) { input.checked = v; } return { element, update }; } // Builds a labeled ${optionsList.map( (o) => html`` )}`; select.addEventListener("input", () => { viewer.setOptions(toOption(select.value)); onInput?.(select.value); }); const element = html`${label}${select}`; function update(rawValue) { select.value = rawValue; } return { element, update }; } // Builds a labeled native color-picker () bound to a live viewer option via // setOptions() — used by the "Node color" / "Edge color" single-color controls. function ht_buildColorInput(viewer, { label, value = "#4269d0", toOption = (v) => ({}) } = {}) { const input = html``; input.addEventListener("input", () => viewer.setOptions(toOption(input.value))); return html`${label}${input}`; } // Builds one "Mappings" pane row that lets the user choose HOW something is colored/sized: a // dropdown of modes — always including the given `fixedModes` (e.g. "Branch (default)" / // "Single color", or "Uniform (default)") — plus one entry per available data field (encoded as // `field:`, optionally annotated with its kind, e.g. "gender (categorical)"). Selecting a // fixed mode with an associated extra control (e.g. "Single color" needs a color picker) reveals // that control; selecting a field mode reveals nothing extra (the field IS the mapping). Only one // extra control is shown at a time, toggled via plain `style.display` swaps on `input` — there's // no data-binding framework here, just a handful of DOM nodes and one event listener. // // `label`, if given, renders as a leading `` above the dropdown (the original layout); if // omitted (`null`, the default), the dropdown is rendered bare — used where the dropdown sits // directly under its OWN section heading + a sibling slider (see "Node size"/"Edge width" below), // so a third repeated label would be redundant. // `fixedModes`: array of `{value, label, extra?}` — `extra`, if given, is a DOM element to reveal // when that mode is selected (e.g. the color-picker for "single"). // `fields`: array of `{name, kind}` (see ht_collectFields) to offer as `field:` entries. // `toOption({mode, field})`: called with the parsed selection on every change. function ht_buildMappingModeRow({ label = null, fixedModes, fields, initialValue, toOption }) { const fieldOptions = fields.map((f) => ({ value: `field:${f.name}`, label: `${f.name} (${f.kind})` })); const optionsList = [...fixedModes.map((m) => ({ value: m.value, label: m.label })), ...fieldOptions]; const extrasByValue = new Map(fixedModes.filter((m) => m.extra).map((m) => [m.value, m.extra])); const select = html``; function applyVisibility(v) { for (const el of extrasByValue.values()) el.style.display = "none"; extrasByValue.get(v)?.style && (extrasByValue.get(v).style.display = ""); } applyVisibility(initialValue); select.addEventListener("input", () => { applyVisibility(select.value); const v = select.value; const parsed = v.startsWith("field:") ? { mode: "field", field: v.slice(6) } : { mode: v, field: null }; toOption(parsed); }); const selectWrap = label ? html`${label}${select}` : select; const extrasContainer = html`

${fixedModes.filter((m) => m.extra).map((m) => m.extra)}

`; return html`

${selectWrap}${extrasContainer}

`; } // Builds the full "Mappings" pane: four independent sections (Node color, Node size, Edge color, // Edge width), each driving the corresponding ht_viewer4 option pair via setOptions. Reads // `viewer.nodeFields`/`viewer.edgeFields`/`viewer.hasEdgesData` (computed once at construction — // see the viewer-main cell) to populate each dropdown with whatever fields actually exist in the // data, so e.g. the flare demo (no extra fields, no edge data) simply shows fewer choices than the // gender/employees org-chart demo, with no dead ends either way. // // LAYOUT: "Node size" and "Edge width" both follow the same consistent shape — a single bold // section heading, then a SLIDER (the uniform value — nodeSizeScale / edgeWidth), then the mode // DROPDOWN (Uniform (default) / by a field) directly underneath, with NEITHER the slider nor the // dropdown repeating their own label — the section heading already says what they're both about. // "Node color" and "Edge color" don't have a uniform-value slider (a color isn't a single scalar // the way a size/width is), so their dropdown keeps its own label as the section's only heading. // // UNITS: both sliders also share the exact same "×" MULTIPLIER currency (range 0.3–3, step 0.1, // default 1.0×) rather than raw pixels — even though under the hood `edgeWidth` is still a plain // px value (the number ht_viewer4 actually multiplies by zoomFactor and passes to Plot as // strokeWidth). The edge-width slider's raw 0.3–3 reading is converted to that px value via a // fixed base (`edgeWidthBasePx`, the original default of 1.5px, i.e. what "1.0×" means) — purely // a presentation-layer rescaling in this one call to `toOption`, so every other part of the // viewer (the "field" width mapping's base width, the zoom multiplier, etc.) keeps working in // px exactly as before. // // NODE COLOR MODES: "By branch (default)" collapses each node's top-level branch into a category // (see ht_collapseCategories); "By cluster" instead cuts the tree into balanced-leaf-count // clusters, one colour per cluster (see ht_buildClusterCategories, ported from ht_chart's own // cluster-cut algorithm) — much more legible on a deep, unbalanced tree with many top-level // branches, since it groups by roughly-equal SIZE rather than by raw top-level membership; // "Single color" applies one literal colour to every node; and any remaining entries let you // colour by an actual data field instead (numeric fields get a continuous scale, everything else // a categorical one — see ht_buildRenderMappings). function ht_buildMappingsPane(viewer) { const numericNodeFields = viewer.nodeFields.filter((f) => f.kind === "numeric"); const numericEdgeFields = viewer.edgeFields.filter((f) => f.kind === "numeric"); const sectionHeadingStyle = "font-size:11px; font-weight:600; color:var(--ht-text,#333);"; // ---- 1. Node color ---- const nodeColorPicker = ht_buildColorInput(viewer, { label: "Color", value: "#4269d0", toOption: (v) => ({ nodeColorSingle: v }) }); const nodeColorRow = ht_buildMappingModeRow({ label: "Node color", fixedModes: [ { value: "branch", label: "By branch (default)" }, { value: "cluster", label: "By cluster" }, { value: "single", label: "Single color", extra: nodeColorPicker } ], fields: viewer.nodeFields, initialValue: "branch", toOption: ({ mode, field }) => viewer.setOptions({ nodeColorMode: mode, nodeColorField: field }) }); // ---- 2. Node size — heading, then slider (nodeSizeScale, "×" multiplier), then dropdown ---- const nodeSizeSlider = ht_buildSlider(viewer, { min: 0.3, max: 3, step: 0.1, value: 1, toOption: (v) => ({ nodeSizeScale: v }), format: (v) => `${v.toFixed(1)}×` }); const nodeSizeRow = ht_buildMappingModeRow({ fixedModes: [{ value: "uniform", label: "Uniform (default)" }], fields: numericNodeFields, initialValue: "uniform", toOption: ({ mode, field }) => viewer.setOptions({ nodeSizeMode: mode, nodeSizeField: field }) }); const nodeSizeNote = numericNodeFields.length ? null : html`

no numeric node fields available

`; const nodeSizeSection = html`

Node size

${nodeSizeSlider.element}${nodeSizeRow}${nodeSizeNote}

`; // ---- 3. Edge color ---- const edgeColorPicker = ht_buildColorInput(viewer, { label: "Color", value: "#999999", toOption: (v) => ({ edgeColorSingle: v }) }); const edgeColorRow = ht_buildMappingModeRow({ label: "Edge color", fixedModes: [{ value: "single", label: "Single color (default)", extra: edgeColorPicker }], fields: viewer.hasEdgesData ? viewer.edgeFields : [], initialValue: "single", toOption: ({ mode, field }) => viewer.setOptions({ edgeColorMode: mode, edgeColorField: field }) }); const edgeColorNote = viewer.hasEdgesData ? null : html`

no separate edge data provided

`; // ---- 4. Edge width — heading, then slider ("×" multiplier onto edgeWidthBasePx px), then dropdown ---- const edgeWidthBasePx = 1.5; // what the slider's "1.0×" reading maps to — the original default edgeWidth const edgeWidthSlider = ht_buildSlider(viewer, { min: 0.3, max: 3, step: 0.1, value: 1, toOption: (v) => ({ edgeWidth: edgeWidthBasePx * v }), format: (v) => `${v.toFixed(1)}×` }); const edgeWidthRow = ht_buildMappingModeRow({ fixedModes: [{ value: "uniform", label: "Uniform (default)" }], fields: viewer.hasEdgesData ? numericEdgeFields : [], initialValue: "uniform", toOption: ({ mode, field }) => viewer.setOptions({ edgeWidthMode: mode, edgeWidthField: field }) }); const edgeWidthNote = viewer.hasEdgesData ? (numericEdgeFields.length ? null : html`

no numeric edge fields available

`) : html`

no separate edge data provided

`; const edgeWidthSection = html`

Edge width

${edgeWidthSlider.element}${edgeWidthRow}${edgeWidthNote}

`; return html`

${nodeColorRow}

${nodeSizeSection}

${edgeColorRow}${edgeColorNote}

${edgeWidthSection}

`; } // Builds the "filter by attribute" section of the Filter pane (see ht_buildFilterPane below): // search-and-highlight-a-subtree by a categorical node attribute (see ht_viewer4's // applyFilter/clearFilter/getFieldValues). Two dropdowns sit side by side in one row — the first // picks WHICH categorical field of the node data to filter by, the second picks WHICH distinct // value (category) of that field to match — followed by a smaller "Apply filter" / "Clear // filter" button pair, ALSO sitting side by side in one row directly below (rather than each // taking its own full-width row, since these two short labels don't need the extra vertical space // that would otherwise separate them). // // The second dropdown is populated (and re-populated every time the first one changes) straight // from `viewer.getFieldValues(fieldName)` — the actual distinct, non-empty values present in the // data for whichever field is currently selected — so it's never stale or showing values that // don't exist for the current attribute. // // Pressing "Apply filter" calls `viewer.applyFilter(attr, category)`, which does all the actual // work (top-down search for the first matching node, take its whole subtree, fade every node/edge // toward its new target opacity while CONCURRENTLY panning the matched node to the disk's center // — both over the same fixed 0.8s — auto-turning off the root-wave highlight if it's on and the // matched node isn't the actual root — see ht_viewer4's doc note); this pane just reports back // whether a match was found. "Clear filter" calls `viewer.clearFilter()` to fade everything back // to full opacity. // // Returns `null` (rather than an element) if the data has no categorical fields at all, so // ht_buildFilterPane can show its own placeholder note instead of a pair of dropdowns with // nothing useful to offer (same pattern as the Mappings pane's various "no X available" notes). function ht_buildFilterByAttributeSection(viewer) { const categoricalFields = viewer.nodeFields.filter((f) => f.kind === "categorical"); if (!categoricalFields.length) return null; const selectStyle = "flex:1; min-width:0; background:var(--ht-input-bg,#fff); color:var(--ht-text,#333); border:1px solid var(--ht-border,#ccc); border-radius:4px; padding:2px;"; const attrSelect = html``; const valueSelect = html``; // (re)populates the second dropdown with every distinct, non-empty value of whichever attribute // is currently selected in the first dropdown — called once up front, and again on every change. function populateValues() { const values = viewer.getFieldValues(attrSelect.value); valueSelect.replaceChildren(...values.map((v) => html``)); } populateValues(); attrSelect.addEventListener("input", populateValues); // smaller than the panel's other full-width buttons (padding:3px 0 instead of 4px, font-size // pinned to 11px rather than inheriting the browser's default button font size), and `flex:1` // instead of `width:100%` so the two share one row edge-to-edge rather than each spanning it. const btnStyle = "flex:1; background:var(--ht-input-bg,#fff); color:var(--ht-text,#333); border:1px solid var(--ht-border,#ccc); border-radius:4px; padding:3px 0; font-size:11px;"; const applyBtn = html``; const clearBtn = html``; const statusEl = html`

`; applyBtn.addEventListener("click", () => { const attr = attrSelect.value; const category = valueSelect.value; const match = viewer.applyFilter(attr, category); statusEl.textContent = match ? `Showing the subtree rooted at the first node where ${attr} = "${category}".` : `No node found where ${attr} = "${category}".`; }); clearBtn.addEventListener("click", () => { viewer.clearFilter(); statusEl.textContent = ""; }); return html`

Filter by attribute

${attrSelect}${valueSelect}

${applyBtn}${clearBtn}

${statusEl}

`; } // escapes the 5 HTML-significant characters — used below so a label containing them (e.g. a // literal "<" or "&" in someone's data) can still be safely interpolated into a plain string that // gets fed into innerHTML-like DOM construction, without ever being misinterpreted as markup. function ht_escapeHtml(s) { return s.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); } // builds a `` rendering `text` with every case-insensitive occurrence of `query` wrapped in // a highlighted `` — used by the search results list below to visually show *where* the // typed substring actually matched within each candidate label. Handles the (rare but possible) // case of `query` appearing more than once in the same label by highlighting every occurrence, // not just the first. Falls back to plain, unhighlighted text if `query` is empty. function ht_highlightSubstring(text, query) { if (!query) return html`${text}`; const lower = text.toLowerCase(); const q = query.toLowerCase(); let html_ = ""; let i = 0; while (i < text.length) { const idx = lower.indexOf(q, i); if (idx < 0) { html_ += ht_escapeHtml(text.slice(i)); break; } html_ += ht_escapeHtml(text.slice(i, idx)); html_ += `${ht_escapeHtml(text.slice(idx, idx + q.length))}`; i = idx + q.length; } const span = document.createElement("span"); span.innerHTML = html_; return span; } // Builds the "search for a node" section of the Filter pane (see ht_buildFilterPane below): a // single-line text field that live-searches every node's own label text (the same display string // shown as its label/tooltip — see ht_viewer4's `label` option), rather than a categorical data // field the way "filter by attribute" does. // // As the user types (or deletes — the `input` event fires for both), the results list right below // the text field is recomputed on every single keystroke from `viewer.findLabelsBySubstring(...)` // — every distinct node label containing the current text as a case-insensitive substring, each // rendered with the matching portion highlighted (see ht_highlightSubstring), capped at // `maxResults` entries and scrollable beyond that. The list is hidden entirely while the field is // empty. Clicking a result COPIES that label into the text field (and re-filters the list down to // it) — it does NOT immediately jump there; the user still has to press "Search node" themselves // (per spec), which also works just as well if they instead type the full label out by hand // without ever touching the list. // // Pressing "Search node" calls `viewer.goToLabel(term, 800)` — an EXACT (not substring) match // against the current text field contents, panning to dead center over a fixed 800ms (0.8s) if // found. If nothing matches exactly, nothing happens to the view at all (per spec) — the status // line below just reports that no match was found, exactly mirroring how the "filter by // attribute" section above reports a failed match. function ht_buildNodeSearchSection(viewer) { const maxResults = 20; const input = html``; const resultsList = html``; const searchBtnStyle = "width:100%; background:var(--ht-input-bg,#fff); color:var(--ht-text,#333); border:1px solid var(--ht-border,#ccc); border-radius:4px; padding:4px 0; font-size:12px;"; const searchBtn = html``; const statusEl = html`

`; function updateResults() { const q = input.value; if (!q.trim()) { resultsList.style.display = "none"; resultsList.replaceChildren(); return; } const matches = viewer.findLabelsBySubstring(q).slice(0, maxResults); if (!matches.length) { resultsList.style.display = "none"; resultsList.replaceChildren(); return; } resultsList.style.display = "flex"; resultsList.replaceChildren(...matches.map((matchLabel) => { const item = html`

`; item.append(ht_highlightSubstring(matchLabel, q)); // clicking a result COPIES it into the text field (and re-runs the search against that // full text — which will normally narrow the list down to just this one exact match) — // it deliberately does NOT jump to the node itself; the user still presses "Search node". item.addEventListener("click", () => { input.value = matchLabel; updateResults(); input.focus(); }); item.addEventListener("mouseenter", () => { item.style.background = "var(--ht-divider,#eee)"; }); item.addEventListener("mouseleave", () => { item.style.background = ""; }); return item; })); } input.addEventListener("input", updateResults); function runSearch() { const term = input.value.trim(); if (!term) return; const target = viewer.goToLabel(term, 800); // fixed 0.8s pan, independent of animDuration statusEl.textContent = target ? `Centered on "${term}".` : `No node found matching "${term}".`; } searchBtn.addEventListener("click", runSearch); // Enter in the text field is a natural, expected shortcut for "run the search" (mirrors how a // browser's own address bar / a typical search box behaves) — doesn't replace the button, just // supplements it. input.addEventListener("keydown", (e) => { if (e.key === "Enter") runSearch(); }); return html`

Search for a node

${input} ${resultsList} ${searchBtn} ${statusEl}

`; } // Builds the full "Filter" pane: two independent sections, stacked with a divider between them // when both are present — "Filter by attribute" (see ht_buildFilterByAttributeSection; highlights // an entire subtree matching a categorical data field) and "Search for a node" (see // ht_buildNodeSearchSection; jumps straight to any single node by its label text, with a live, // highlighted substring-match results list). The first section is entirely omitted (no divider // either) if the data has no categorical fields at all — the search section works regardless, // since it only depends on `label`, which every node always has. function ht_buildFilterPane(viewer) { const filterSection = ht_buildFilterByAttributeSection(viewer); const searchSection = ht_buildNodeSearchSection(viewer); const divider = filterSection ? html`

` : null; const filterFallback = filterSection ? null : html`

no categorical node fields available to filter by

`; return html`

${filterSection ?? filterFallback} ${divider} ${searchSection}

`; } // Builds the "Animation demo" auto-play journey's Play/Stop buttons, wired to the single // ht_buildExplorerConditional implementation (see the viewer-exploration cell). Also auto-stops // the moment the user grabs the joystick themselves (see ht_buildJoystick's onUserDragStart). // // Laid out as a small flex column with an explicit, small `gap` between the two buttons, CENTERED // (via justify-content:center) within a fixed-height (`joystickSize`) box. This keeps the two // buttons close together while still landing their combined block's own center exactly at the // box's center — which lines up with the joystick knob's vertical center, so long as this sits in // a column with the same heading+gap prefix as the joystick's own column (see // ht_buildControlPanel below). Unlike splitting the box into two halves (the previous approach), // an explicit `gap` doesn't depend on — or need to counteract — the buttons' actual rendered // height to control how close together they are; it's a small, exact, directly-chosen value. function ht_buildExplorationControls(viewer, joystick, joystickSize = 88) { const explorer = ht_buildExplorerConditional(viewer, joystick); const btnStyle = "width:100%; background:var(--ht-input-bg,#fff); color:var(--ht-text,#333); border:1px solid var(--ht-border,#ccc); border-radius:4px; padding:4px 0;"; const playBtn = html``; const stopBtn = html``; function setPlaying(playing) { playBtn.disabled = playing; stopBtn.disabled = !playing; } playBtn.addEventListener("click", () => { explorer.play(); setPlaying(true); }); stopBtn.addEventListener("click", () => { explorer.stop(); setPlaying(false); }); joystick.onUserDragStart(() => setPlaying(false)); // explorer.stop() already runs via driveExternal's user-priority check, but the buttons still need to reflect it return html`

${playBtn}${stopBtn}

`; } // Builds a simple tab strip + pane switcher. `panes` is an array of `{label, content}` (content // is any DOM node). Only one pane's content is visible at a time (toggled via `display:none`); // the first pane is active by default. Returns the combined `{element}` — the tab strip stacked // above whichever pane is currently showing. // // IMPORTANT: each pane's ORIGINAL `display` value (e.g. "flex", for panes authored as flex // columns) is captured up front and restored when re-showing it — setting `style.display = ""` // to "show" an element does NOT restore its authored inline value, it just *removes* the // `display` declaration entirely, silently reverting to the browser default ("block" for a // `

`), which would break a pane's `flex-direction:column` layout (confirmed empirically: an // authored `display:flex; flex-direction:column;` pane rendered with the `flex-direction` intact // but `display` missing after being toggled, collapsing it back to normal block flow). function ht_buildTabbedPanes(panes) { const tabBar = html`

`; const buttons = panes.map((pane) => html``); tabBar.append(...buttons); const originalDisplays = panes.map((pane) => pane.content.style.display || "block"); function setActive(activeIndex) { panes.forEach((pane, i) => { pane.content.style.display = i === activeIndex ? originalDisplays[i] : "none"; buttons[i].style.color = i === activeIndex ? "var(--ht-text, #333)" : "var(--ht-faint, #999)"; buttons[i].style.borderBottomColor = i === activeIndex ? "#4269d0" : "transparent"; }); } buttons.forEach((btn, i) => btn.addEventListener("click", () => setActive(i))); setActive(0); // "General" (the first pane) is visible by default const paneContainer = html`

${panes.map((pane) => pane.content)}

`; return { element: html`

${tabBar}${paneContainer}

` }; } // Keeps `panelEl` vertically aligned with the actual plotted disk inside `viewerEl` — not the // whole viewer div, which also includes the title/subtitle text and the color legend sitting // above the disk. Measures the main plot

`; // "layout" — renamed from "Edge curve": still drives the same `edgeCurve` option, which now // selects a NODE LAYOUT as well as an edge-drawing curve — see the LAYOUT doc note above. // Defaults to "anchored", matching ht_viewer4's own default. const edgeCurveSelect = ht_buildSelect(viewer, { label: "Layout - general", optionsList: [ { value: "anchored", label: "anchored" }, { value: "geodesic", label: "geodesic" }, { value: "radial", label: "radial" } ], value: edgeCurve, toOption: (v) => ({ edgeCurve: v }) }); // "Detail" — drives ht_viewer4's `detailMode` option (see the DETAIL doc note above this // function). Defaults to "kinship", matching ht_viewer4's own default. const detailModeSelect = ht_buildSelect(viewer, { label: "Layout - detail", optionsList: [ { value: "kinship", label: "kinship (default)" }, { value: "distance", label: "distance" } ], value: detailMode, toOption: (v) => ({ detailMode: v }) }); const zoomSlider = ht_buildSlider(viewer, { label: "Zoom", min: 50, max: 300, step: 5, value: 100, toOption: (v) => ({ domainR: baseDomainR * 100 / v }), format: (v) => `${Math.round(v)}%` }); // keep the Zoom slider synchronized with the viewer's true domainR at all times — see the // doc comment above the function. viewer.onChange(({ domainR }) => { const percent = Math.min(300, Math.max(50, (baseDomainR * 100) / domainR)); zoomSlider.update(percent); }); // "Radius for labels shown" + "show radius" — shared by BOTH label modes now: a fade cutoff // (plus the outer fade-ring caption) in "Radius fade", and the hard nearest-first search cutoff // in "Collision aware" (see ht_computeLabelDataCollision and the LABEL PLACEMENT doc note // above) — so BOTH the slider and the checkbox stay visible/live at all times, regardless of // which mode is currently selected; neither is hidden on a mode switch. const labelRadiusSlider = ht_buildSlider(viewer, { label: "Radius for labels shown", min: 0.05, max: 1, step: 0.01, value: 0.28, toOption: (v) => ({ labelRadius: v }), format: (v) => v.toFixed(2) }); const labelRadiusCheckbox = ht_buildCheckbox(viewer, { label: "show radius", checked: false, toOption: (v) => ({ showLabelRadius: v }) }); const labelRadiusControls = html`

${labelRadiusSlider.element}${labelRadiusCheckbox.element}

`; // "Label placement" — drives ht_viewer4's `labelMode` option (see the LABEL PLACEMENT doc note // above this function). Defaults to "collision", matching ht_viewer4's own default. Doesn't // toggle any sibling control's visibility — see the "Radius for labels shown" doc note above. const labelModeSelect = ht_buildSelect(viewer, { label: "Label placement", optionsList: [ { value: "collision", label: "Collision aware (default)" }, { value: "radius", label: "Radius fade" } ], value: labelMode, toOption: (v) => ({ labelMode: v }) }); const fontSizeSlider = ht_buildSlider(viewer, { label: "Label font size", min: 6, max: 20, step: 1, value: 9, toOption: (v) => ({ labelFontSize: v }), format: (v) => `${v}px` }); // "General" pane: everything the panel used to show, unconditionally (minus "Node size", // which now lives in the Mappings pane next to its mode dropdown, and minus a "Number of root // waves" slider — rootWaveCount now defaults to 1 and has no dedicated UI control here). const generalPane = html`

${resetBtn}${themeSelect.element}${rootWaveCheckbox.element}

Pan

Interactive

${joystick.element}

${panDivider}

Animation

${explorationControls}

${edgeCurveSelect.element} ${detailModeSelect.element} ${zoomSlider.element} ${labelModeSelect.element} ${labelRadiusControls} ${fontSizeSlider.element}

`; // "Mappings": four data-driven mapping controls (node color/size, edge color/width). const mappingsPane = ht_buildMappingsPane(viewer); // "Filter": filter-by-attribute (subtree) + search-for-a-node (single node, by label). const filterPane = ht_buildFilterPane(viewer); const tabs = ht_buildTabbedPanes([ { label: "General", content: generalPane }, { label: "Mappings", content: mappingsPane }, { label: "Filter", content: filterPane } ]); panelRoot = html`

Controls

${tabs.element}

`; ht_applyPanelTheme(panelRoot, theme); // sync initial CSS vars (and color-scheme) with the `theme` option return panelRoot; } display("Control-panel builder"); display(ht_buildControlPanel); 42:Tb0c,// CELL: viewer-exploration — the "Animation demo" auto-play journey: a live joystick simulation // that repeatedly cycles through a fixed path, by continuously aiming the joystick at a sequence // of fixed disk waypoints and watching the root's actual position each frame (exactly like a real // held drag, except the held direction is recomputed every frame to always point from wherever the // root *currently* is toward the next waypoint): // 1) toward the top quarter of the disk // 2) toward the bottom quarter (passing back through the middle) // 3) toward the right, vertically centered // 4) toward the left, about a quarter in from the edge // 5) back to the center // ...then repeats indefinitely, until stopped or the user grabs the joystick themselves. // // Drives the joystick knob via joystick.driveExternal/stopExternal (see ht_buildJoystick in the // control-panel-builder cell), so the knob visibly moves in sync with the panning. const HT_EXPLORE_WAYPOINTS = [ { x: 0, y: 0.8 }, // 1: top { x: 0, y: -0.8 }, // 2: bottom (pushes back through the middle to get there) { x: 0.8, y: 0 }, // 3: right, vertically centered { x: -0.8, y: 0 }, // 4: left { x: 0, y: 0 } // 5: back to center ]; const HT_EXPLORE_ARRIVE_RADIUS = 0.08; // "close enough" to a waypoint to advance to the next // every frame, points the joystick from the root's ACTUAL current position toward the current // waypoint (via driveExternal, exactly like a real held drag aimed at a moving target) and // advances to the next waypoint once within HT_EXPLORE_ARRIVE_RADIUS of it — timing is emergent, // not scripted, and the journey converges correctly regardless of where it started. function ht_buildExplorerConditional(viewer, joystick) { let playing = false, phaseIndex = 0, rafId = null; function step() { if (!playing) return; const target = HT_EXPLORE_WAYPOINTS[phaseIndex]; const p = viewer.getRootPosition(); const dx = target.x - p.re, dy = target.y - p.im; // data-space delta (y increases upward) const dist = Math.hypot(dx, dy); if (dist <= HT_EXPLORE_ARRIVE_RADIUS) { phaseIndex = (phaseIndex + 1) % HT_EXPLORE_WAYPOINTS.length; } else { // joystick uses screen convention (x right+, y DOWN+), so the y component is flipped // relative to the data-space delta (where y increases upward). joystick.driveExternal(dx / dist, -dy / dist, 0.5); // "half the full extent", aimed at the target } rafId = requestAnimationFrame(step); } return { play() { if (!playing) { playing = true; phaseIndex = 0; rafId = requestAnimationFrame(step); } }, stop() { playing = false; if (rafId) cancelAnimationFrame(rafId); joystick.stopExternal(); } }; } display("Exploration journey — ht_buildExplorerConditional"); 43:T91c,// CELL: math-and-layout — SU(1,1) Möbius transform primitives + ht_layout() static layout function 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_composeAfter(M2, M1) { const a = ht_add(ht_mul(M2.a, M1.a), ht_mul(M2.b, ht_conj(M1.b))); const b = ht_add(ht_mul(M2.a, M1.b), ht_mul(M2.b, ht_conj(M1.a))); return { a, b }; } function ht_translateTo(p) { const r2 = Math.min(0.999999, ht_abs2(p)); const s = 1 / Math.sqrt(Math.max(1e-9, 1 - r2)); return { a: ht_cx(s, 0), b: ht_cx(p.re * s, p.im * s) }; } 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_normalize(M) { const norm = Math.sqrt(Math.max(1e-9, ht_abs2(M.a) - ht_abs2(M.b))); return { a: ht_cx(M.a.re / norm, M.a.im / norm), b: ht_cx(M.b.re / norm, M.b.im / norm) }; } function ht_layout(root, { k = 2.2 } = {}) { const tree = d3.tree() .size([2 * Math.PI, root.height || 1]) .separation((a, b) => (a.parent === b.parent ? 1 : 2) / Math.max(1, a.depth)); tree(root); const maxY = d3.max(root.descendants(), (d) => d.y) || 1; root.each((d) => { const rDisk = Math.tanh((k * d.y) / maxY); const angle = d.x - Math.PI / 2; d.z0 = { re: rDisk * Math.cos(angle), im: rDisk * Math.sin(angle) }; }); return root.descendants(); } // small generic helper used by the "edge treatment" options in ht_viewer4 function ht_smoothstep(edge0, edge1, x) { const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } display("Functions for math and layout"); display(ht_layout);44:T4eb,// CELL: viewer-geometry — small pure geometry helpers used by ht_viewer4's render loop. // Extracted out so ht_viewer4 itself can stay focused on option handling and the Plot marks. // the Poincaré disk itself always has radius 1 in data-space, regardless of any rendering // margin — panning/zooming/clicking should only engage inside this circle. function ht_inDisk(z, maxR = 1) { return z.re * z.re + z.im * z.im <= maxR * maxR; } // clamps (x,y) to lie within radius maxR of the origin, preserving its angle — used to keep // the root visible (pinned) even when pushed toward/past the boundary. function ht_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 }; } // projects every node through the current Möbius transform M, returning {n, x, y, r2} for each. function ht_projectNodes(nodes, M) { const out = new Array(nodes.length); for (let i = 0; i < nodes.length; i++) { const n = nodes[i]; const z = ht_apply(M, n.z0); out[i] = { n, x: z.re, y: z.im, r2: z.re * z.re + z.im * z.im }; } return out; } display("Viewer geometry helpers — ht_inDisk, ht_clampToDisk, ht_projectNodes");45:T5dad,// CELL: viewer-node-data — per-frame node data prep for ht_viewer4: color category collapsing, // node size/opacity computation (per edgeStyle), spatial thinning (with sticky persistence + // eased fade in/out, and — see below — kinship-weighted priority/spacing), leaf-square rotation, // and nearest-node hit-testing. // ranks categories by frequency and collapses any beyond `maxCategories` into a single "Other" // bucket — ported (in spirit, not in its exact leaf-count-balancing algorithm — see ht_chart's own // HT_CONFIG.maxGroups/minGroupFraction) from ht_chart's own grey "Other" bucket for balanced // cluster coloring — keeps a color scale (and the compact legend that mirrors it) meaningful and // readably-sized even on a tree with dozens of raw top-level branches (e.g. 27 for the mammals // dataset), rather than silently repeating the same handful of colors once the true domain // outgrows the color scheme. Returns `{domain, categoryOf}`: `domain` is every KEPT category // (alphabetical) plus `otherLabel` (only appended if anything was actually collapsed); // `categoryOf(rawValue)` maps any raw value onto whichever of those `domain` entries it belongs to. function ht_collapseCategories(nodes, rawValueFn, { maxCategories = 10, otherLabel = "Other" } = {}) { const counts = new Map(); for (const n of nodes) { const v = rawValueFn(n); if (v == null || v === "") continue; counts.set(v, (counts.get(v) ?? 0) + 1); } const byCount = Array.from(counts.keys()).sort((a, b) => counts.get(b) - counts.get(a)); if (byCount.length <= maxCategories) { return { domain: byCount.slice().sort(), categoryOf: (v) => v }; } const kept = new Set(byCount.slice(0, maxCategories - 1)); const domain = [...byCount.filter((v) => kept.has(v)).sort(), otherLabel]; return { domain, categoryOf: (v) => (v != null && kept.has(v) ? v : otherLabel) }; } // KINSHIP-WEIGHTED DETAIL (ported from ht_chart's own importance/kinship-based thinning — see its // render() function's farFrac/locality/focal/kinLut/shareBuf/keep/thin/score pipeline): an // alternative to (and, as of ht_viewer's own `detailMode` default, now preferred over) pure // distance-from-center thinning priority — see the `detailMode` doc note atop the viewer-main // cell. Rather than always keeping whatever's simply nearest the current view center in full // detail and thinning everything else purely by distance, this keeps FULL detail along the path // to (and the entire subtree of) whichever node currently sits nearest the center — the "focal" // node — and lets unrelated branches degrade faster the less closely related they are, while also // protecting bigger subtrees (by their own leaf count) from being thinned as aggressively as // small ones. // // Returns per-node-index Float32Arrays `needMult` (a spacing-requirement MULTIPLIER — 1× at full // detail, up to `spacingMultRange[1]`× when maximally thinned; consumed by ht_thinNodesBySpacing, // below, as an extra factor on `spacingData`) and `score` (a thinning PRIORITY — consumed by // ht_computeVisibleNodes as the sort key candidates are ordered by before admission, in place of // raw distance). // // Mutates `state` (`{focalIdx, locality}`, persistent across calls for one viewer instance — see // its construction in viewer-main) in place: // - `state.focalIdx` implements FOCAL HYSTERESIS: a rival node only takes over as the "focus" // once it's clearly nearer (by `focalHysteresis`×) than the incumbent — otherwise a slow pan // would flip which node is treated as the focus back and forth between two similarly-close // candidates, frame to frame, along with everything that depends on it (which branch keeps // full detail). // - `state.locality` is an EASED 0..1 dial (via `localityEase`) tracking how much of the current // view is "squashed" out near the rim (`crampRho`/`localityRange`) — thinning intensity ramps // up smoothly as more of the tree scrolls out of the readily-visible center, rather than // snapping on the instant any single node happens to cross that line. // // `structural` (built once in viewer-main, since parent/depth/leaf-count relationships never // change for the lifetime of a viewer instance) provides `parentIdxArr`/`depthOfArr`/`byDepthArr` // (a depth-ascending traversal order) /`impOfArr` (0..1 "importance", from log-scaled leaf count). function ht_computeKinshipDetail(all, structural, state, opts) { const { parentIdxArr, depthOfArr, byDepthArr, impOfArr } = structural; const n = all.length; const { crampRho = 5, localityRange = [0.2, 0.8], localityEase = 0.15, kinFalloff = 1.5, focalHysteresis = 2.5, nearFreeRho = 2, nearFalloffRho = 2.5, spacingMultRange = [1, 2.5] } = opts; const crampR2 = Math.tanh(crampRho / 2) ** 2; const rhoOf = (r) => 2 * Math.atanh(Math.min(0.999999, r)); // farFrac: how much of the tree is currently squashed against the rim (r2 past crampR2) — and, // in the same pass, the raw nearest-to-center candidate for the focal node (before hysteresis). let farCount = 0, bestIdx = 0, bestR2 = Infinity; for (let i = 0; i < n; i++) { const r2 = all[i].r2; if (r2 > crampR2) farCount++; if (r2 < bestR2) { bestR2 = r2; bestIdx = i; } } const farFrac = farCount / n; // ease `locality` toward its target — see the doc note above. const localityTarget = ht_smoothstep(localityRange[0], localityRange[1], farFrac); state.locality += (localityTarget - state.locality) * localityEase; if (Math.abs(localityTarget - state.locality) < 2e-3) state.locality = localityTarget; const locality = state.locality; // FOCAL HYSTERESIS — see the doc note above. let focalIdx = bestIdx; if (state.focalIdx != null && state.focalIdx !== focalIdx && all[state.focalIdx].r2 < bestR2 * focalHysteresis) { focalIdx = state.focalIdx; } state.focalIdx = focalIdx; const focalDepth = depthOfArr[focalIdx]; // kinLut[d]: kinship strength for a common-ancestor-with-focal at depth d (0..focalDepth). const kinLut = new Float64Array(focalDepth + 1); for (let d = 0; d <= focalDepth; d++) { const kin = focalDepth > 0 ? d / focalDepth : 1; kinLut[d] = kinFalloff === 1 ? kin : Math.pow(kin, kinFalloff); } // onPath: every ancestor of the focal node, including the focal node itself. const onPath = new Uint8Array(n); for (let i = focalIdx; i !== -1; i = parentIdxArr[i]) onPath[i] = 1; // shareBuf[i]: the depth of i's common ancestor with the focal node — computed in one // parent-first (byDepthArr) sweep. Three cases, matching ht_chart's own logic exactly: (1) i // itself is an ancestor of focal (onPath[i] true) => share = i's own depth (increasing as we // walk deeper along the path, capping at focalDepth for focal itself AND every one of its own // descendants, once they inherit via case 3 below — see the doc note above); (2) i branches OFF // an ancestor of focal (its parent is on-path, but i itself isn't) => share = that ancestor's // depth, fixed at the branch point; (3) i is already off-path => inherit its parent's share. const shareBuf = new Int32Array(n); for (let j = 0; j < byDepthArr.length; j++) { const i = byDepthArr[j]; const pi = parentIdxArr[i]; shareBuf[i] = pi < 0 ? 0 : onPath[pi] ? (onPath[i] ? depthOfArr[i] : depthOfArr[pi]) : shareBuf[pi]; } // per-node spacing-multiplier + priority score — see the doc note atop this function. const multSpan = spacingMultRange[1] - spacingMultRange[0]; const needMult = new Float32Array(n); const score = new Float32Array(n); for (let i = 0; i < n; i++) { const rho = rhoOf(Math.sqrt(all[i].r2)); const near = 1 / (1 + Math.max(0, rho - nearFreeRho) / Math.max(1e-6, nearFalloffRho)); const k = kinLut[shareBuf[i]]; const keep = k + (1 - k) * near; const thin = locality * (1 - keep) * (1 - impOfArr[i]); needMult[i] = spacingMultRange[0] + multSpan * thin; score[i] = impOfArr[i] + locality * (keep - impOfArr[i]); } return { needMult, score, focalIdx, locality }; } // STICKY PERSISTENCE + EASED FADE IN/OUT (ported from ht_chart — see its own `pool`/`stickList`/ // `fadeEase`/`stickyRelief` machinery): previously, this recomputed the admitted set completely // fresh every single frame, with no memory of what was drawn a moment ago — a node sitting right // at the spacing-contention boundary during a pan (or a slow scroll-to-fan) could pop in and out // of existence from one frame to the next as its exact on-screen position nudged it just past (or // just back within) a neighbor's spacing radius. `thinningState` (a `Map`, // built once per viewer instance in viewer-main and threaded through from ht_computeVisibleNodes // below) fixes this with the same two-part technique ht_chart itself uses: // 1. STICKY SPACING: a node that was admitted last frame (`state.keep === true`, read BEFORE // this frame's own admission decisions overwrite it — see `wasKept` below) gets first crack // at this frame's budget, via its own priority-ordered pass, using a RELAXED spacing // requirement (`spacingData * (candidate's own needMult) * stickyRelief`, default 0.7× — i.e. // it needs LESS clearance to keep its spot than a brand-new node needs to newly claim one). // Only once every such "sticky" candidate has had this one relaxed-spacing shot does a // second pass admit brand-new candidates at the normal, full spacing requirement — mirroring // ht_chart's own two-pass stickList/orderBuf admission loop. This is what stops a node right // on the contention boundary from flickering: staying visible is easier than becoming // visible. // 2. EASED FADE: admission is still a hard in/out decision every frame, but that decision only // sets a per-node *target* opacity (1 if admitted this frame, 0 otherwise) that `state.op` // eases toward by `fadeEase` (default 0.22) of the remaining distance each frame — so a node // that just lost its spot keeps drawing, fading smoothly down, while a newly-admitted node // fades smoothly up, rather than either popping instantly. A node is included in the // returned list whenever `state.op` is still meaningfully above zero (i.e. either currently // admitted, or still mid-fade-out) — its final rendered opacity is that eased `state.op` // multiplied into whatever opacity the active `edgeStyle` curve already computed (see // ht_computeVisibleNodes below), so the two fades compose rather than fight each other. // // Each candidate's own `d.needMult` (a per-node spacing-requirement multiplier — see // ht_computeKinshipDetail above), when present, scales the spacing requirement it's held to in // BOTH passes (further scaled down by `stickyRelief` in the sticky pass, same as before); // candidates with no `d.needMult` set (i.e. `detailMode: "distance"`, which skips computing it // entirely — see ht_computeVisibleNodes below) default to a flat 1× via `?? 1`, reproducing the // exact previous (uniform-spacing) behavior with no change at all. // // Returns `{others, fading}` — `fading` is true whenever any candidate's `op` hasn't yet settled // at its target, so the caller (render(), in viewer-main) knows to keep scheduling frames until // the easing has fully finished, exactly like ht_chart's own `if (fading) scheduleRender()`. On a // brand-new viewer instance every node starts at `op: 0` (see the `thinningState` construction in // viewer-main), so the very first frame's newly-admitted nodes fade up from nothing too, just // like every other admission — a handful of frames (well under a second, given the default // fadeEase), not a hardcoded special case for "first paint". // // `candidates` must already be sorted in PRIORITY order (highest priority first — either raw // distance-to-center, or the kinship `score` above, depending on `detailMode` — see // ht_computeVisibleNodes); every candidate is assumed to already be a node this frame's edgeStyle // pass wants to consider (i.e. still within edgeHorizon/etc., if that style filters at all) — // this function only decides which of THOSE survive spatial thinning. (Minor, deliberately- // accepted edge case: a node excluded outright by "fade"/"cutoff" edgeStyle filtering — i.e. never // even reaching this function as a candidate — keeps whatever stale `keep` flag it last had // rather than being actively reset to false; if it later re-enters candidacy it can get one // undeserved frame of sticky treatment. Invisible in practice, and irrelevant for the default // "shrinkFloor" edgeStyle, which never excludes candidates this way.) function ht_thinNodesBySpacing(candidates, { dotSpacingPx, domainR, width, height, plotMargin, renderBudget, thinningState, fadeEase = 0.22, stickyRelief = 0.7 }) { const spatial = dotSpacingPx > 0 && domainR && width && height; const spacingData = spatial ? (dotSpacingPx * 2 * domainR) / (Math.min(width, height) - 2 * plotMargin) : 0; const useGrid = spatial && spacingData > 0; // which candidates were admitted LAST frame — read before any of this frame's own admission // decisions get written back below (see the STICKY SPACING doc note above). const wasKept = candidates.map((d) => thinningState.get(d.n)?.keep === true); const admitted = new Uint8Array(candidates.length); let count = 0; if (useGrid) { const gridN = Math.max(1, Math.ceil(2 / spacingData) + 1); const grid = new Int32Array(gridN * gridN).fill(-1); const cellOf = (v) => Math.max(0, Math.min(gridN - 1, ((v + 1) / spacingData) | 0)); const isFree = (d, gx, gy, need) => { const reach = need <= spacingData ? 1 : Math.min(16, Math.ceil(need / spacingData)); const need2 = need * need; const x0 = Math.max(0, gx - reach), x1 = Math.min(gridN - 1, gx + reach); const y0 = Math.max(0, gy - reach), y1 = Math.min(gridN - 1, gy + reach); for (let yy = y0; yy <= y1; yy++) { for (let xx = x0; xx <= x1; xx++) { const h = grid[yy * gridN + xx]; if (h === -1) continue; const o = candidates[h]; const dx = o.x - d.x, dy = o.y - d.y; if (dx * dx + dy * dy < need2) return false; } } return true; }; // pass 0: previously-admitted ("sticky") candidates, at a RELAXED spacing requirement. for (let i = 0; i < candidates.length && count < renderBudget - 1; i++) { if (!wasKept[i]) continue; const d = candidates[i]; const gx = cellOf(d.x), gy = cellOf(d.y); if (!isFree(d, gx, gy, spacingData * (d.needMult ?? 1) * stickyRelief)) continue; const k = gy * gridN + gx; if (grid[k] === -1) grid[k] = i; admitted[i] = 1; count++; } // pass 1: every other candidate, at the normal (full) spacing requirement — a "sticky" // candidate that failed even its own relaxed pass 0 doesn't get a second chance here. for (let i = 0; i < candidates.length && count < renderBudget - 1; i++) { if (wasKept[i]) continue; const d = candidates[i]; const gx = cellOf(d.x), gy = cellOf(d.y); if (!isFree(d, gx, gy, spacingData * (d.needMult ?? 1))) continue; const k = gy * gridN + gx; if (grid[k] === -1) grid[k] = i; admitted[i] = 1; count++; } } else { // spatial thinning disabled (dotSpacingPx <= 0) or the viewport dimensions it needs weren't // supplied — fall back to a pure priority-rank cutoff, but still let "sticky" candidates claim // their spot first, so a node hovering right at the budget's rank boundary doesn't flicker as // minor pans/re-sorts nudge its exact rank back and forth across that line frame to frame. for (let i = 0; i < candidates.length && count < renderBudget - 1; i++) { if (wasKept[i]) { admitted[i] = 1; count++; } } for (let i = 0; i < candidates.length && count < renderBudget - 1; i++) { if (!admitted[i]) { admitted[i] = 1; count++; } } } // ease every candidate's persistent opacity toward this frame's target (1 = admitted this // frame, 0 = not), and collect whichever ones are still meaningfully visible (admitted OR still // mid-fade-out) — see the EASED FADE doc note above. let fading = false; const others = []; for (let i = 0; i < candidates.length; i++) { const d = candidates[i]; const state = thinningState.get(d.n); const keepNow = admitted[i] === 1; if (!state) { if (keepNow) others.push(d); continue; } // safety net — shouldn't happen const target = keepNow ? 1 : 0; if (state.op !== target) { state.op += (target - state.op) * fadeEase; if (Math.abs(target - state.op) < 0.01) state.op = target; else fading = true; } state.keep = keepNow; if (state.op > 0.02) { d.opacity = (d.opacity ?? 1) * state.op; others.push(d); } } return { others, fading }; } // computes each non-root node's rendered radius (`vr`) and BASE opacity according to `edgeStyle` // ("shrinkFloor" shrinks-to-a-floor rather than dropping by distance; "fade" shrinks+fades out // near edgeHorizon; "cutoff" is a hard cutoff), sorts the survivors into PRIORITY order (either // raw distance-to-center, or — when `detailMode` is "kinship", the default — the kinship/ // importance-weighted `score` computed by `kinshipDetail`, below), then ALWAYS spatially thins // them via ht_thinNodesBySpacing — which layers STICKY PERSISTENCE + EASED FADE IN/OUT on top of // the on-screen PIXEL SPACING technique (see that function's own doc note for the full mechanism, // ported from ht_chart) — bounded by `renderBudget` as a hard ceiling on top of everything else. // Returns `{others, fading}` (see ht_thinNodesBySpacing). // // `detailMode`/`kinshipDetail`: when `detailMode === "kinship"` (the default — see the // `detailMode` doc note atop viewer-main), `kinshipDetail` is the ALREADY-COMPUTED // {needMult, score} arrays from ht_computeKinshipDetail (computed once per render in viewer-main, // over the FULL node set, since that computation needs the whole tree's structure — see its own // doc note) — this function just reads each candidate's own two values out of those arrays (via // `nodeIndexOf`) and attaches them as `d.needMult`/`d.priority`, then sorts by `d.priority` // descending. When `detailMode === "distance"` (the original behavior), neither field is set at // all, and candidates sort by raw `r2` ascending (nearest-to-center first) exactly as before — // ht_thinNodesBySpacing's own `?? 1` fallback for a missing `needMult` then reproduces the // original flat, uniform-spacing behavior with no change whatsoever. // // IMPORTANT: thinning is UNCONDITIONAL — it does NOT check "does the count already fit under // renderBudget" first. This was a deliberate fix: an earlier version only thinned once the raw // count *exceeded* renderBudget, which meant a demo that set `renderBudget: nodes.length` // specifically to show an entire large tree (matching ht_chart's look) would ALWAYS have exactly // enough "room" under that budget, so the spatial-thinning pass would never even run, silently // defeating the entire point of adding it (confirmed empirically: profiling still showed every // single node being drawn, with no reduction at all). Mirroring ht_chart's own actual design — // which always runs its grid-based admission pass, with its renderBudget only serving as an // extra cap on that process, never a reason to skip it — fixes this: the surviving set is always // sorted by priority and passed through ht_thinNodesBySpacing, whose greedy admission naturally // keeps EVERY node anyway whenever nothing actually collides (e.g. a modest, well-spread tree // like the 252-node flare demo), so small/medium trees see no visible change — only a genuinely // crowded tree (thousands of overlapping nodes) actually gets thinned. // // `sizeFactorFn(n)` (default: always 1) is an extra PER-NODE multiplier folded in alongside the // existing uniform `nodeSizeScale` — this is what lets the "Node size" Mappings control scale // each node individually by a chosen data field (e.g. employee count) while the existing // shrink-by-distance curve and the uniform nodeSizeScale slider keep working exactly as before // (sizeFactorFn simply defaults to a no-op 1× when sizing is "uniform"). // // `thinningState`/`fadeEase`/`stickyRelief` are passed straight through to ht_thinNodesBySpacing — // see its own doc note atop this cell. function ht_computeVisibleNodes(othersAll, { edgeStyle, edgeStart, edgeHorizon, edgeFloorSize, nodeSizeScale, zoomFactor, renderBudget, sizeFactorFn = () => 1, dotSpacingPx = 2, domainR, width, height, plotMargin = 20, thinningState, fadeEase = 0.22, stickyRelief = 0.7, detailMode = "kinship", kinshipDetail = null, nodeIndexOf = null }) { for (const d of othersAll) d.r = Math.sqrt(d.r2); let others; if (edgeStyle === "shrinkFloor") { others = othersAll; // no node is ever dropped for being far away — only spatial crowding (below) can drop one for (const d of others) { const t = ht_smoothstep(edgeStart, edgeHorizon, d.r); d.vr = (3 - (3 - edgeFloorSize) * t) * nodeSizeScale * sizeFactorFn(d.n) * zoomFactor; d.opacity = 1; } } else if (edgeStyle === "fade") { others = othersAll.filter((d) => d.r < edgeHorizon); for (const d of others) { const t = ht_smoothstep(edgeStart, edgeHorizon, d.r); d.vr = 3 * (1 - 0.75 * t) * nodeSizeScale * sizeFactorFn(d.n) * zoomFactor; d.opacity = 1 - 0.88 * t; } } else { // "cutoff" — legacy hard cutoff others = othersAll.filter((d) => d.r2 < edgeHorizon * edgeHorizon); for (const d of others) d.vr = 3 * nodeSizeScale * sizeFactorFn(d.n) * zoomFactor; } if (detailMode === "kinship" && kinshipDetail && nodeIndexOf) { for (const d of others) { const idx = nodeIndexOf.get(d.n); d.needMult = kinshipDetail.needMult[idx]; d.priority = kinshipDetail.score[idx]; } others.sort((a, b) => b.priority - a.priority); // highest priority (score) first } else { others.sort((a, b) => a.r2 - b.r2); // priority order: nearest-to-center first, same bias as before } return ht_thinNodesBySpacing(others, { dotSpacingPx, domainR, width, height, plotMargin, renderBudget, thinningState, fadeEase, stickyRelief }); } // computes the on-screen angle of each node's incoming edge (parent -> node), stored as `d.rotate` // (degrees), so leaf squares can be rotated to sit "square" to their own edge. Negates the y-delta // since data-space y increases upward but SVG rotate() operates in pixel space (y increases down). function ht_computeLeafRotations(others, rootNode, rootEntry, M) { for (const d of others) { const p = d.n.parent; if (p) { const zp = p === rootNode ? { re: rootEntry.x, im: rootEntry.y } : ht_apply(M, p.z0); d.rotate = Math.atan2(-(d.y - zp.im), d.x - zp.re) * (180 / Math.PI); } else { d.rotate = 0; } } } // finds the nearest hit-test entry (in screen-pixel distance) to a data-space point `p`, within // `maxPx` pixels — used to resolve double-clicks/taps regardless of which exact DOM element // (dot, tip box, label) was actually under the pointer. function ht_findNearestNode(hitTest, p, maxPx) { let best = null, bestDistPx = Infinity; for (const c of hitTest.entries) { const dxPx = (p.re - c.x) * hitTest.pxPerUnitX; const dyPx = (p.im - c.y) * hitTest.pxPerUnitY; const distPx = Math.hypot(dxPx, dyPx); if (distPx < bestDistPx) { bestDistPx = distPx; best = c; } } return bestDistPx <= maxPx ? best : null; } display("Viewer node-data helpers — ht_collapseCategories, ht_computeKinshipDetail, ht_thinNodesBySpacing, ht_computeVisibleNodes, ht_computeLeafRotations, ht_findNearestNode");46:T1416,// CELL: viewer-cluster-categories — ht_buildClusterCategories(): balanced-leaf-count cluster // coloring, ported from ht_chart's own HT_CONFIG cluster-cut algorithm (see the "Node coloring — // Balanced cluster coloring" item in the "Items to be ported" cell). Rather than coloring by each // node's own top-level branch (which reads poorly on deep, unbalanced trees — e.g. 27 top-level // mammal orders all fighting over the same 10-color scheme), this instead cuts the tree into up to // `maxGroups` clusters of roughly EQUAL LEAF COUNT — a cut that sits at a different depth in each // branch: heavy branches keep splitting further, light branches stay whole as a single cluster. // Any leftover branches that only meet at the root (plus every node ABOVE the clusters) share one // grey "Other" bucket, exactly like `ht_chart`'s own. // // ALGORITHM (identical to ht_chart's, mechanically): a cut is "every maximal node holding at most // tau leaves" for some threshold tau (`cutAt`); every distinct leaf-count value present in the // tree is tried as a candidate tau (downsampled to at most 96 candidates for very deep/varied // trees), each cut is scored by how much of the tree it colours (each cluster's contribution // capped at the *ideal* per-cluster size, `totalLeaves / maxGroups`, so balance is rewarded over // one single giant cluster dominating), and the highest-scoring cut (ties broken by total // coverage) is kept as the final `groups`. // // Clusters are then named by their own last path segment (`label(n)` split on "."/"/", keeping // just the final component) — falling back to the FULL label if two different clusters would // otherwise share that short name. // // Returns `{domain, categoryOf}` in the same shape `ht_collapseCategories` does (domain: every // cluster's name, plus "Other" if anything was left uncolored), except `categoryOf` here takes an // actual hierarchy NODE (not a raw field value) — a node's cluster membership isn't a property of // its own data row, it's a property of its position in the tree. // // Computed ONCE per viewer instance (like `branchColorDomain`/`branchCategoryOf` in viewer-main) — // tree structure/leaf counts never change for the lifetime of a viewer, so this never needs to // rerun per frame. Calls `rootNode.count()` itself (d3.hierarchy's own leaf-counting method, // setting `.value` on every node) so it works regardless of which layout mode is active — some // layouts (ht_layoutAnchored) already call this as a side effect of their own default edge-weight // function, but ht_layout (the tree-based layout) never does, so this can't rely on that. function ht_buildClusterCategories(nodes, rootNode, label, { maxGroups = 10, minGroupFraction = 0.2, otherLabel = "Other" } = {}) { rootNode.count(); // sets .value = leaf count on every node const leaves = (n) => n.value ?? 1; const totalLeaves = Math.max(1, leaves(rootNode)); const K = Math.max(1, maxGroups); 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)); 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 domain = []; groups.forEach((g) => { let name = shortSeen.get(shortOf(g)) > 1 ? String(label(g)) : shortOf(g); while (domain.includes(name) || name === otherLabel) name += "\u200b"; domain.push(name); 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)) domain.push(otherLabel); return { domain, categoryOf: (n) => catOf.get(n) ?? otherLabel }; } display("Balanced cluster coloring — ht_buildClusterCategories"); display(ht_buildClusterCategories);47:T3e7b,// CELL: viewer-edges-labels-data — per-frame edge polyline + label data prep for ht_viewer4. // builds edge polylines: each edge is a run of {x,y,e} sample points (unique edge id `e`) so // Plot.line can draw them as separate series via the z channel, rather than a single Plot.link. // `edgeCurveFn` is whichever curve function edgeCurve selects (ht_geodesicPoints / ht_radialBumpPoints). // `edgeAttrIndex`, if given (see ht_buildEdgeAttrIndex), is an id-pair-keyed lookup into a SEPARATE, // optionally-provided edge-data table; each point of a matched edge gets that row attached as // `edgeRow`, so the "Edge color"/"Edge width" Mappings controls can read arbitrary fields from it // (an edge with no matching row simply gets `edgeRow: undefined`, which callers treat as "use the // default/uniform style" — the mapping is opt-in per edge, not required for every edge). // `edgeOpacityFn(parent, child)`, if given (see ht_viewer4's edgeFilterOpacityOf), returns this // edge's current category-filter opacity FRACTION (1 = fully shown, down to a low floor when // filtered out, or any value in between while a filter fade transition is in flight — see the // doc note above filterSet/filterFadeValue in ht_viewer4). Stored per point as `filterFrac` and // used directly as a stroke-opacity multiplier by the caller. Omitting `edgeOpacityFn` makes // every edge `filterFrac: 1`, i.e. a no-op (no active filter). // // NOTE: this is the SLOW-but-fully-general edge path (see `useFastEdges` in ht_viewer4's // render()) — Plot's `z` channel renders ONE SEPARATE DOM ELEMENT PER EDGE, which for a // large tree means thousands of elements rebuilt every single frame during a pan (measured as the // single biggest rendering cost for an 8,656-node tree in this notebook's own profiling). It's // still needed — and kept exactly as before — whenever an edge Mappings control needs genuinely // different color/width PER EDGE, which the fast hand-built-path alternative (see // ht_buildTieredEdgePaths below) can't represent. See that function for the common, much faster // case (no per-edge field mapping active). function ht_buildEdgeLinkData(others, rootNode, rootEntry, visibleSet, M, edgeCurveFn, edgeSamples, edgeAttrIndex, edgeOpacityFn) { const linkData = []; let edgeId = 0; for (const d of others) { const p = d.n.parent; if (p && visibleSet.has(p)) { const zp = p === rootNode ? { re: rootEntry.x, im: rootEntry.y } : ht_apply(M, p.z0); const zc = { re: d.x, im: d.y }; const pts = edgeCurveFn(zp, zc, { n: edgeSamples }); const id = edgeId++; const edgeRow = edgeAttrIndex ? edgeAttrIndex.get(`${p.id}->${d.n.id}`) : undefined; const filterFrac = edgeOpacityFn ? edgeOpacityFn(p, d.n) : 1; for (const pt of pts) linkData.push({ x: pt.re, y: pt.im, e: id, edgeRow, filterFrac }); } } return linkData; } // FAST edge rendering: builds every edge as one of at most `tiers` hand-assembled SVG path-data // STRINGS (bucketed by opacity, exactly like ht_chart's own buildPath/TIERS technique), instead // of the one--per-edge cost of ht_buildEdgeLinkData + Plot's `z`-channel line mark. This is // the single biggest lever for panning performance on a large tree: concatenating every edge's own // "M x,y L x,y…" segment into a handful of per-tier strings collapses what would be thousands of // separate DOM elements (recreated from scratch every single frame during a pan) down to // AT MOST `tiers` elements TOTAL, regardless of how many edges there are. // // The tradeoff (and why ht_viewer4 only uses this when `useFastEdges` is true — i.e. no per-edge // color/width Mappings field is active): a single element can only have one shared // stroke/width, so genuinely per-edge color or width can't be represented this way — only opacity, // which is bucketed into `tiers` discrete levels (a close visual approximation of the continuous // per-edge `filterFrac`, exactly as ht_chart itself already does for its own link opacity). // // Operates directly in PIXEL space (via xScaleObj/yScaleObj), unlike ht_buildEdgeLinkData (which // stays in data space for Plot's own scales to convert) — its output is appended directly as raw // SVG, bypassing Plot's mark system entirely, so it must run AFTER Plot.plot() has produced real // scale objects (see render()), the same requirement ht_makeCirclePath/ht_makeCircleLabel have. function ht_buildTieredEdgePaths(others, rootNode, rootEntry, visibleSet, M, edgeCurveFn, edgeSamples, edgeOpacityFn, xScaleObj, yScaleObj, baseOpacity = 0.35, tiers = 6) { const X = (v) => xScaleObj.apply(v), Y = (v) => yScaleObj.apply(v); const buckets = Array.from({ length: tiers }, () => []); for (const d of others) { const p = d.n.parent; if (!p || !visibleSet.has(p)) continue; const zp = p === rootNode ? { re: rootEntry.x, im: rootEntry.y } : ht_apply(M, p.z0); const zc = { re: d.x, im: d.y }; const pts = edgeCurveFn(zp, zc, { n: edgeSamples }); const frac = edgeOpacityFn ? edgeOpacityFn(p, d.n) : 1; const bucket = Math.min(tiers - 1, Math.max(0, ((1 - frac) * tiers) | 0)); let seg = `M${X(pts[0].re).toFixed(1)},${Y(pts[0].im).toFixed(1)}`; for (let i = 1; i < pts.length; i++) seg += `L${X(pts[i].re).toFixed(1)},${Y(pts[i].im).toFixed(1)}`; buckets[bucket].push(seg); } return buckets .map((segs, i) => ({ d: segs.join(""), opacity: baseOpacity * (1 - i / tiers) })) .filter((t) => t.d.length > 0); } // builds + appends the fast-edge of tiered elements directly to `svg` — see // ht_buildTieredEdgePaths above for the technique; this just does the DOM-appending part that // ht_viewer4's render() used to do inline. function ht_appendFastEdges(svg, others, rootNode, rootEntry, visibleSet, M, edgeCurveFn, edgeSamples, edgeOpacityFn, xScaleObj, yScaleObj, color, strokeWidth) { const tiers = ht_buildTieredEdgePaths(others, rootNode, rootEntry, visibleSet, M, edgeCurveFn, edgeSamples, edgeOpacityFn, xScaleObj, yScaleObj, 0.35, 6); const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); for (const tier of tiers) { const p = document.createElementNS("http://www.w3.org/2000/svg", "path"); p.setAttribute("d", tier.d); p.setAttribute("fill", "none"); p.setAttribute("stroke", color); p.setAttribute("stroke-width", strokeWidth); p.setAttribute("stroke-opacity", tier.opacity.toFixed(3)); g.appendChild(p); } svg.prepend(g); } // selects labelable non-root nodes (within labelRadius + labelFadeWidth of center) and computes, // for each one: // - `labelOpacity`: full opacity within labelRadius, smoothly eased to 0 across the fade ring, // so labels fade out instead of abruptly vanishing at a hard cutoff. // - `labelY`: a data-space y position, offset upward from the node's own position by exactly // THAT node's own rendered radius (`d.vr`) plus a gap — not a single shared "worst case" // constant. This matters because node radii vary continuously (the shrinkFloor/fade curves // shrink nodes smoothly as they approach the boundary, and now node size can also vary by a // data field), so a shared constant clearance would either overlap larger nodes or // over-space smaller ones. // // WHY THIS WORKS AS A "y" CHANNEL WHEN A CONSTANT "dy" WOULDN'T: Plot.text's `dy` option only // accepts a plain constant (a per-datum function is silently ignored — confirmed empirically, // see the doc note on the root's label), but `y` is a normal per-datum channel, just like // `vr`/`opacity`/`rotate` already are on the dot mark. So instead of a post-scale pixel `dy`, // we bake the desired *pixel* clearance directly into the *data-space* position fed into the // `y` channel — converting a pixel amount into a data-space delta via `pxPerUnitY` (this // conversion is exact, not approximate, because Plot's default continuous position scale is // a plain affine/linear map from data domain to pixel range: see `render()` for how // `pxPerUnitY` is derived analytically from `height`/`margin`/`domainR`, before Plot.plot() // even runs). // // Also returns the outer fade-ring radius (used to draw the optional dashed "showLabelRadius" // circles). Note: the ROOT's label does NOT need this treatment — it already gets an exactly // correct constant `dy` from its own dedicated single-row Plot.text mark, since a mark with // exactly one row has no "shared constant vs. varying values" tension to begin with. // // This was ht_viewer's ORIGINAL label-placement algorithm ("radius fade") — a pure function of // distance from the view's center (with budget/radius as the only limits, and no awareness of // where any OTHER label actually lands). Still available (`labelMode: "radius"`), but no longer // the default — see ht_computeLabelDataCollision below for the alternative, ht_chart-ported // "collision-aware" mode (`labelMode: "collision"`, now the default), which instead rejects // overlapping labels outright and guarantees + emphasizes whichever node is nearest center. function ht_computeLabelData(others, { labelRadius, labelFadeWidth, labelBudget, labelGap, zoomFactor, pxPerUnitY }) { const labelFadeRadius = labelRadius + labelFadeWidth; const labelData = others.filter((d) => d.r < labelFadeRadius).slice(0, labelBudget); for (const d of labelData) { d.labelOpacity = 1 - ht_smoothstep(labelRadius, labelFadeRadius, d.r); d.labelY = d.y + (d.vr + labelGap * zoomFactor) / pxPerUnitY; } return { labelData, labelFadeRadius }; } // COLLISION-AWARE LABEL PLACEMENT — ported from ht_chart's own label algorithm, and now // ht_viewer's DEFAULT label mode (`labelMode: "collision"` — see ht_computeLabelData above for // the original, still-available "radius fade" alternative). Rather than showing a label for every // node within a fixed data-space radius of the center (fading it out near the edge of that // radius), this instead: // // 1. REJECTS A CANDIDATE OUTRIGHT IF IT WOULD OVERLAP AN ALREADY-PLACED LABEL — a fixed PIXEL // padding (`labelSpacingPx`, converted to data-space via `pxPerUnitX`/`pxPerUnitY`, exactly // like `dotSpacingPx` itself is converted for node spacing — see ht_thinNodesBySpacing), NOT // a fade. A candidate either is or isn't placed — no partial opacity. // 2. GUARANTEES + EMPHASIZES A LABEL FOR WHICHEVER NODE SITS NEAREST THE CENTER — root or not // (ht_chart's own "centerEntry") — bypassing both the collision test and `labelBudget` // entirely, and marking it `isFocal: true` so the render's Plot.text mark draws it in a // slightly LARGER font. UNLIKE ht_chart, this emphasis is never bold when the focal node // isn't the root — bold is reserved for the root's own label alone (drawn by its own // separate, always-on mark), so a size bump is the only emphasis a non-root focal node ever // gets. This is the one part of ht_chart's algorithm ht_viewer's root-labeling ALREADY // exceeds (root is unconditionally labeled regardless of mode) — what's NEW here is that // guarantee/emphasis extending to whichever OTHER node you've actually panned to, not just // the root. // 3. STICKY LABEL PERSISTENCE — mirrors ht_thinNodesBySpacing's own sticky-node-admission // technique exactly: a label that was shown last frame (tracked in the persistent // `stickyLabelSet`, built once per viewer instance and mutated in place here — see // viewer-main) gets first crack at this frame's collision test/budget, in its own pass, // before any brand-new candidate is even considered — so a label doesn't flicker in/out // independently of the (already-sticky) node dots. // 4. STOPS SEARCHING ENTIRELY ONCE CANDIDATES ARE FARTHER THAN `labelRadius` FROM CENTER — this // is NOT pure collision-detection-plus-budget over the whole tree, however far the budget // still has room: ht_chart's own render() sorts its candidates nearest-first and does // `if (d.r2 > labelR2) break;` INSIDE that sorted walk, so once every node within the SAME // central radius "Radius fade" mode itself uses as its own cutoff has been tried, it stops // looking entirely, even with labelBudgetCollision (40) nowhere near full. Mirrored here by // sorting `byDistance` ascending and `break`ing (not `continue`ing) the instant a candidate's // own `r2` exceeds `labelR2` — every candidate beyond that point in the sorted order is at // least as far, so none of them could pass either. Unlike "Radius fade", there's no fade at // this cutoff — a candidate just past it is simply never considered, not partially shown. // // SPECIAL CASE: since root's own label is drawn by a separate, always-on Plot.text mark in // ht_viewer (see render()) rather than through this function's own `labelData`, root's label // position is seeded here as a fixed collision obstacle whenever it ISN'T the centered node — // without being included in the returned `labelData` itself (it's never drawn by this mark) — so // every other candidate still correctly avoids overlapping it. function ht_computeLabelDataCollision(others, rootEntry, rootNode, { labelSpacingPx = [30, 10], labelRadius, labelBudget, labelGap, zoomFactor, pxPerUnitX, pxPerUnitY, stickyLabelSet }) { const labelPadX = labelSpacingPx[0] / pxPerUnitX; const labelPadY = labelSpacingPx[1] / pxPerUnitY; const labelR2 = labelRadius * labelRadius; // same central-radius cutoff "Radius fade" itself uses — see point 4 above // priority order for LABEL admission: nearest-to-center first — independent of whatever order // `others` is already sorted in for NODE thinning purposes (kinship score, raw distance, etc). // Sorting ascending by r2 is also what lets the `break` below (point 4) short-circuit the whole // search the instant candidates start falling outside labelRadius, exactly like ht_chart. const byDistance = [...others].sort((a, b) => a.r2 - b.r2); const placed = []; // {x,y} of every label committed to this frame (incl. any seeded obstacle) const labelData = []; const labeledThisFrame = new Set(); const tryPlace = (d) => { for (const q of placed) { if (Math.abs(q.x - d.x) < labelPadX && Math.abs(q.y - d.y) < labelPadY) return false; } placed.push({ x: d.x, y: d.y }); return true; }; const centerEntry = (byDistance[0] && byDistance[0].r2 < rootEntry.r2) ? byDistance[0] : rootEntry; if (centerEntry !== rootEntry) { placed.push({ x: rootEntry.x, y: rootEntry.y }); // seed root's own always-on label as a fixed obstacle — see the SPECIAL CASE doc note tryPlace(centerEntry); // guaranteed — bypasses both the collision test above and the budget/radius cap below centerEntry.isFocal = true; labelData.push(centerEntry); labeledThisFrame.add(centerEntry.n); } for (let pass = 0; pass < 2; pass++) { for (const d of byDistance) { if (labelData.length >= labelBudget) break; if (d.r2 > labelR2) break; // ht_chart: sorted nearest-first, so every remaining candidate is at least as far — stop looking entirely, don't just skip this one if (d === centerEntry) continue; const wasSticky = stickyLabelSet.has(d.n); if (pass === 0 ? !wasSticky : wasSticky) continue; if (tryPlace(d)) { labelData.push(d); labeledThisFrame.add(d.n); } } } stickyLabelSet.clear(); for (const n of labeledThisFrame) stickyLabelSet.add(n); for (const d of labelData) d.labelY = d.y + (d.vr + labelGap * zoomFactor) / pxPerUnitY; // same per-node clearance ht_computeLabelData itself uses return { labelData, centerEntry }; } display("Viewer edge/label data helpers — ht_buildEdgeLinkData, ht_buildTieredEdgePaths, ht_appendFastEdges, ht_computeLabelData, ht_computeLabelDataCollision"); display(ht_computeLabelDataCollision); 48:T2959,// CELL: viewer-dom-helpers — DOM/SVG construction & calibration helpers for ht_viewer4. // ported from ht_chart's own stylesheet (`.ht-viewer g[aria-label="tip"] { pointer-events:none; // }`): Observable Plot's `tip: true` mark option generates its own pointer/hover-interaction // overlay (a ``), which by default sits directly on top of the disk wherever // a node's hover hit-region is and — being a normal, `pointer-events:auto` element — becomes the // actual target of any pointerdown that lands there. Since that overlay is a DESCENDANT of the // viewer's own container, and Plot's own pointer-interaction code registers its OWN listeners // directly on it, this could silently steal a drag's very first pointerdown before our own // capturing-phase container listener (see the PAN doc note in viewer-main) even gets a chance — // this single CSS rule (setting `pointer-events:none` on every tip overlay, so the browser hit- // tests straight through it to whatever is actually meant to receive pointer input) is what makes // a drag reliably start from anywhere, including right on top of a node with a visible tooltip. // Injected ONCE globally (guarded by `ht_viewerStyleInjected`), scoped to `.ht-viewer-chrome` so // it only ever affects ht_viewer's own containers, no matter how many instances share the page. let ht_viewerStyleInjected = false; function ht_ensureViewerGlobalStyle() { if (ht_viewerStyleInjected) return; ht_viewerStyleInjected = true; const style = document.createElement("style"); style.textContent = `.ht-viewer-chrome g[aria-label="tip"] { pointer-events: none; }`; document.head.appendChild(style); } // builds the persistent DOM chrome for a viewer instance: the outer container, an inner slot the // live Plot figure gets swapped into on every render (leaving statsOverlay untouched), and a // small fixed-position overlay for live stats (see ht_formatStatsText) that's updated via // textContent rather than ever being re-inserted into Plot's own DOM. function ht_buildViewerChrome() { ht_ensureViewerGlobalStyle(); const container = html`

`; const plotSlot = html`

`; const statsOverlay = html`

`; container.append(plotSlot, statsOverlay); return { container, plotSlot, statsOverlay }; } // draws a dashed circle of a given data-space radius (used for the disk boundary and, optionally, // the label-radius rings) by sampling points and mapping them through Plot's own x/y scales. // `strokeWidth` lets the ring's line weight scale with zoomFactor, just like everything else. function ht_makeCirclePath(xScaleObj, yScaleObj, radius, color, strokeWidth = 1) { const pts = d3.range(0, 2 * Math.PI + 0.1, 0.1).map((t) => [xScaleObj.apply(radius * Math.cos(t)), yScaleObj.apply(radius * Math.sin(t))]); const el = document.createElementNS("http://www.w3.org/2000/svg", "path"); el.setAttribute("d", d3.line()(pts)); el.setAttribute("fill", "none"); el.setAttribute("stroke", color); el.setAttribute("stroke-width", strokeWidth); el.setAttribute("stroke-dasharray", "2,3"); return el; } // builds a curved text label that follows the top (or bottom) arc of a circle of the given // data-space radius — used to caption the "full label area" / "fade label area" rings drawn by // ht_makeCirclePath. Returns [invisibleArcPath, textEl]; append BOTH to the svg (the text // references the arc path by id via , so the arc must be present in the DOM, but its // stroke is "none" — it's purely a curve for the text to follow, not a visible mark). // Deliberately uses a serif/italic font, distinct from the node labels' sans-serif Plot font, so // these ring captions are never confused with actual node labels. // // `liftPx` lifts the caption clear of the ring's own dashed line rather than sitting directly on // top of it. NOTE: this is done by nudging the (invisible) guide arc's *radius* itself slightly // larger than the visible ring — NOT via a `dy` attribute on , which turns out not to // be a supported attribute on that element (browsers silently ignore it; confirmed empirically it // has no visible effect), unlike on plain /. `fontSize` and `liftPx` are both // expected to be pre-multiplied by the caller's zoomFactor, so the caption (and its clearance // from the ring) scales consistently with everything else when zooming. function ht_makeCircleLabel(xScaleObj, yScaleObj, radius, text, pathId, { position = "top", fontSize = 10, color = "#666", liftPx = 2 } = {}) { // convert the desired pixel lift into a data-space radius delta using the scale's local // derivative (Plot's continuous scales are affine, so this is exact, not an approximation). const pxPerUnitY = Math.abs(yScaleObj.apply(1) - yScaleObj.apply(0)); const liftRadius = pxPerUnitY > 0 ? liftPx / pxPerUnitY : 0; const effectiveRadius = radius + liftRadius; // slightly outside the visible ring => lifted clear of its line // an invisible semicircular guide path swept left-to-right across the top (or bottom) of the // circle, so lays the text out curving naturally with the circle instead of upside // down or backwards (the sweep direction here is chosen specifically to read left-to-right). const n = 40; const pts = d3.range(0, n + 1).map((i) => { const t = position === "top" ? Math.PI - (Math.PI * i) / n : Math.PI + (Math.PI * i) / n; return [xScaleObj.apply(effectiveRadius * Math.cos(t)), yScaleObj.apply(effectiveRadius * Math.sin(t))]; }); const arcPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); arcPath.setAttribute("d", d3.line()(pts)); arcPath.setAttribute("fill", "none"); arcPath.setAttribute("stroke", "none"); arcPath.setAttribute("id", pathId); const textPath = document.createElementNS("http://www.w3.org/2000/svg", "textPath"); textPath.setAttribute("href", `#${pathId}`); textPath.setAttribute("startOffset", "50%"); textPath.setAttribute("text-anchor", "middle"); textPath.textContent = text; const textEl = document.createElementNS("http://www.w3.org/2000/svg", "text"); textEl.setAttribute("font-size", fontSize); textEl.setAttribute("fill", color); textEl.setAttribute("font-family", "Georgia, 'Times New Roman', serif"); textEl.setAttribute("font-style", "italic"); textEl.setAttribute("letter-spacing", "0.4"); textEl.style.userSelect = "none"; textEl.appendChild(textPath); return [arcPath, textEl]; } // draws the "full label area" (labelRadius) ring + caption always, and the "fade label area" // (labelFadeRadius) ring + caption ONLY when `labelFadeRadius` is not null — used by ht_viewer4's // `showLabelRadius` debug toggle. `labelFadeRadius` is passed as `null` by render() whenever // `labelMode === "collision"` (see the call site in viewer-main): that mode has no fade concept // at all — a candidate either is or isn't considered, with no partial zone — so there is no // second ring to draw; drawing only the inner ring there (rather than either skipping the whole // toggle or drawing a second ring that doesn't correspond to anything the algorithm actually // does) is what makes "show radius" draw something meaningful in BOTH label modes. function ht_drawLabelRadiusRings(svg, xScaleObj, yScaleObj, labelRadius, labelFadeRadius, zoomFactor, instanceId, { innerColor, outerColor, outerTextColor }) { if (labelFadeRadius != null) { svg.prepend(ht_makeCirclePath(xScaleObj, yScaleObj, labelFadeRadius, outerColor, zoomFactor)); } svg.prepend(ht_makeCirclePath(xScaleObj, yScaleObj, labelRadius, innerColor, zoomFactor)); svg.append(...ht_makeCircleLabel(xScaleObj, yScaleObj, labelRadius, "full label area", `${instanceId}-fullArc`, { position: "top", color: innerColor, fontSize: 10 * zoomFactor, liftPx: 2 * zoomFactor })); if (labelFadeRadius != null) { svg.append(...ht_makeCircleLabel(xScaleObj, yScaleObj, labelFadeRadius, "fade label area", `${instanceId}-fadeArc`, { position: "top", color: outerTextColor, fontSize: 10 * zoomFactor, liftPx: 2 * zoomFactor })); } } // derives a data-space <-> pixel-space calibration from a rendered Plot figure's scales: // `toData(clientX, clientY)` converts a pointer event's viewport coordinates to data space, and // `pxPerUnitX`/`pxPerUnitY` convert data-space distances to pixel distances (used for hit-testing). function ht_makeScaleCalibration(svg, xScaleObj, yScaleObj, domainR) { const pxAtNeg = xScaleObj.apply(-domainR), pxAtPos = xScaleObj.apply(domainR); const pyAtNeg = yScaleObj.apply(-domainR), pyAtPos = yScaleObj.apply(domainR); const toData = (clientX, clientY) => { const rect = svg.getBoundingClientRect(); const px = clientX - rect.left, py = clientY - rect.top; const x = -domainR + ((px - pxAtNeg) / (pxAtPos - pxAtNeg)) * (2 * domainR); const y = -domainR + ((py - pyAtNeg) / (pyAtPos - pyAtNeg)) * (2 * domainR); return { re: x, im: y }; }; return { toData, pxPerUnitX: (pxAtPos - pxAtNeg) / (2 * domainR), pxPerUnitY: (pyAtPos - pyAtNeg) / (2 * domainR) }; } // assembles the hit-testing index used by ht_findNearestNode (see viewer-node-data cell). function ht_buildHitTestIndex(others, rootEntry, pxPerUnitX, pxPerUnitY) { return { entries: [ ...others.map((d) => ({ n: d.n, x: d.x, y: d.y })), { n: rootEntry.n, x: rootEntry.x, y: rootEntry.y } ], pxPerUnitX, pxPerUnitY }; } // belt-and-suspenders: explicitly forbid text selection on everything Plot renders (tip boxes, // labels, legend) so a click-drag never turns into a native text-selection drag instead of panning. function ht_disableTextSelection(svg) { svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; } // formats the small fixed-position live-stats readout text. function ht_formatStatsText(visibleCount, totalCount, ms, rootPinned) { return `${visibleCount.toLocaleString()}/${totalCount.toLocaleString()} nodes · ${ms.toFixed(1)}ms${rootPinned ? " · root pinned" : ""}`; } display("Viewer DOM/SVG helpers — ht_buildViewerChrome, ht_makeCirclePath, ht_makeCircleLabel, ht_drawLabelRadiusRings, ht_makeScaleCalibration, ht_buildHitTestIndex, ht_disableTextSelection, ht_formatStatsText");49:T1392,// CELL: mapping-helpers — field discovery + self-managed (non-Plot) scales that back the four // "Mappings" pane controls: node color, node size, edge color, edge width. // // WHY SELF-MANAGED SCALES (not Plot's built-in color/size scales) FOR EDGES AND FOR NODE SIZE: // Plot only gives you ONE shared "color" scale by default (fill and stroke both draw from it // unless you go out of your way to define a second named scale) — but node color-by-field and // edge color-by-field are two totally independent mappings with unrelated domains, so sharing one // scale would be wrong. Rather than fight Plot's scale-sharing, edge color/width (and node size) // are computed here as LITERAL values (a real CSS color string, a real pixel width, a real pixel // radius factor) using plain d3 scales — confirmed empirically that a mark's color channel, when // every value already looks like a valid CSS color, is rendered as-is and never touches any scale // or legend (see the test cell above this one). Node color-by-field, by contrast, DOES go through // Plot's real scale (see viewer-main), specifically so it still gets an automatic legend — that's // a feature worth keeping for the *node* mapping (the primary one), even though it means edges and // node color use two different mechanisms under the hood. // classifies a set of raw values as "numeric" (every non-null/non-empty value is a finite number) // or "categorical" (anything else) — used to decide continuous vs. discrete treatment. function ht_fieldKind(values) { let sawAny = false; for (const v of values) { if (v == null || v === "") continue; sawAny = true; if (typeof v !== "number" || !Number.isFinite(v)) return "categorical"; } return sawAny ? "numeric" : "categorical"; } // collects every field name found across a set of plain data rows (e.g. `.data` of each tree // node, or rows of an optional edge-data table), excluding structural id-like fields, along with // each field's kind ("numeric" | "categorical") — used to populate the Mappings dropdowns. function ht_collectFields(rows, excludeKeys = ["id", "parentId", "source", "target"]) { const keys = new Set(); for (const row of rows) for (const k of Object.keys(row)) if (!excludeKeys.includes(k)) keys.add(k); return Array.from(keys).sort().map((name) => ({ name, kind: ht_fieldKind(rows.map((r) => r[name])) })); } // builds an O(1) lookup from an optional edge-data table (rows with `source`/`target` fields // matching the tree's own node ids) to that row's extra fields — used to color/size-by-field an // edge whose two endpoint ids match a row in a SEPARATE, optionally-provided dataset (distinct // from the main hierarchical node data). function ht_buildEdgeAttrIndex(edgesData, sourceKey = "source", targetKey = "target") { const m = new Map(); for (const row of edgesData) m.set(`${row[sourceKey]}->${row[targetKey]}`, row); return m; } // a categorical (d3.scaleOrdinal) or continuous (sequential) literal-color function for a given // field's values — returns a plain CSS color string (or null for missing/invalid values, which // callers should then fall back to a default constant color for). function ht_buildLiteralColorScale(values, kind) { if (kind === "numeric") { const nums = values.map(Number).filter(Number.isFinite); const [mn, mx] = d3.extent(nums); const interp = d3.interpolateBlues; return (v) => { const n = Number(v); if (!Number.isFinite(n)) return null; return interp(mn === mx ? 0.5 : (n - mn) / (mx - mn)); }; } const domain = Array.from(new Set(values.filter((v) => v != null && v !== ""))).sort(); const ord = d3.scaleOrdinal(domain, d3.schemeTableau10); return (v) => (v == null || v === "" ? null : ord(v)); } // maps a numeric field's values to a multiplicative size factor (area-true via sqrt), clamped to // a reasonable [0.5x, 2.4x] range — used to scale node radii by a chosen numeric field. function ht_buildSizeFactorScale(values) { const nums = values.map(Number).filter(Number.isFinite); const [mn, mx] = d3.extent(nums); const scale = d3.scaleSqrt().domain([mn ?? 0, mx ?? 1]).range([0.5, 2.4]).clamp(true); return (v) => { const n = Number(v); return Number.isFinite(n) ? scale(n) : 1; }; } // maps a numeric field's values to a literal pixel stroke width, centered on `baseWidth` (area // analog for lines: sqrt scale so visual "weight" scales roughly linearly with the field). function ht_buildWidthScale(values, baseWidth) { const nums = values.map(Number).filter(Number.isFinite); const [mn, mx] = d3.extent(nums); const scale = d3.scaleSqrt().domain([mn ?? 0, mx ?? 1]).range([baseWidth * 0.4, baseWidth * 2.5]).clamp(true); return (v) => { const n = Number(v); return Number.isFinite(n) ? scale(n) : baseWidth; }; } display("Mapping helpers — ht_fieldKind, ht_collectFields, ht_buildEdgeAttrIndex, ht_buildLiteralColorScale, ht_buildSizeFactorScale, ht_buildWidthScale");4a:T2802,// CELL: root-wave — a lightweight D3-driven "radar ping" animation that stays locked onto the // root node's on-screen position and scale, completely decoupled from ht_viewer4's own per-frame // Plot re-render (which recreates a brand new

`/`

` need their `color` set directly (inline), not just on the parent `
`, because this notebook's own page stylesheet targets `h1..h6` directly and beats plain CSS inheritance regardless of specificity — see `ht_applyFigureTextColor` (`viewer-dom-helpers`). Tooltip suppression — filtered-out nodes are split into a no-`tip` Plot.dot mark and a `tip: true` one (Plot's `tip` option applies to an entire mark's dataset, so this is the only way to suppress hover tooltips for just some nodes), drawn no-tip-first so filtered-in nodes layer on top. Double-rAF root-wave fix — the very first `render()` can run before the caller has attached `container` to the document, when `getBoundingClientRect()` still returns all-zero rects; a double-`requestAnimationFrame` follow-up corrects the root-wave's position once layout has actually settled (the same trick `ht_alignPanelToPlot` uses for the control panel).4c:[{"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}] 2f:{"id":"f97e598dfea31ad1","slug":"hyperbolic-tree-viewer-part-3","title":"Hyperbolic Tree Viewer - Part 3","thumbnail":"dfca4665dd02b26214134693a4a1b2551c0607d0e0b04e4d1e79e1b8910387f4","access_level":"public","create_time":"$D2026-09-10T18:42:06.950Z","update_time":"$D2026-09-14T23:30:15.411Z","view_time":null,"first_public_time":"$D2026-09-14T23:13:23.423Z","fork":{"id":"631c67bfe57f0a1c","slug":"hyperbolic-tree-viewer-remix","title":"Hyperbolic Tree Viewer Remix","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":1,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024"},"version":1223,"publish_version":1223,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"},{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hyperbolic Tree Viewer - Part 3","cells":[{"id":141,"value":"# Hyperbolic Tree Viewer - Part 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"## Visualizing the mammals datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"## Visualizing the flare dataset (in dark mode 🌃)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$33","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"### 1.7 Try it yourself: a toy example with edge data\n\nA minimal, runnable example combining a nested org chart (Shape A, §1.1) with a separate\nedges dataset (§1.4), mapping edge color and width to a \\`weight\\` field per reporting line.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"// CELL: toy-edges-data — a tiny toy dataset for §1.7: a nested org chart (Shape A) plus a\n// separate flat edges table (source/target + a numeric \"weight\" field per reporting line).\nconst ht_toyOrgData = {\n name: \"CEO\",\n children: [\n { name: \"VP Engineering\", children: [\n { name: \"Engineer A\" },\n { name: \"Engineer B\" }\n ]},\n { name: \"VP Sales\", children: [\n { name: \"Sales Rep A\" },\n { name: \"Sales Rep B\" }\n ]}\n ]\n};\n\nconst ht_toyEdgesData = [\n { source: \"CEO\", target: \"VP Engineering\", weight: 8 },\n { source: \"CEO\", target: \"VP Sales\", weight: 5 },\n { source: \"VP Engineering\", target: \"Engineer A\", weight: 3 },\n { source: \"VP Engineering\", target: \"Engineer B\", weight: 6 },\n { source: \"VP Sales\", target: \"Sales Rep A\", weight: 2 },\n { source: \"VP Sales\", target: \"Sales Rep B\", weight: 9 }\n];\n\ndisplay(\"Toy org chart (nested JSON, Shape A)\");\ndisplay(ht_toyOrgData);\ndisplay(\"Toy edges dataset (source/target + weight)\");\ndisplay(ht_toyEdgesData);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"// CELL: toy-edges-viewer — builds the toy hierarchy from ht_toyOrgData (Shape A), assigns each\n// node's own `.id` (required for edgesData matching — d3.hierarchy doesn't set `.id` on its own,\n// unlike d3.stratify — see the §1.4 gotcha above), then visualizes it with ht_viewer, mapping\n// both edge color and edge width to the toy edges dataset's own \"weight\" field.\nconst ht_toyRoot = d3.hierarchy(ht_toyOrgData);\nht_toyRoot.each((d) => { d.id = d.data.name; }); // stable unique id per node — see the doc note above\nconst ht_toyNodes = ht_layout(ht_toyRoot, { k: 2.2 });\nconst ht_toyViewer = ht_viewer(ht_toyNodes, {\n label: (d) => d.data.name,\n title: \"Toy example — edges mapped to color & width\",\n subtitleBase: \"edgesData's own \\\"weight\\\" field drives both edge color and edge width\",\n theme: \"dark\",\n edgesData: ht_toyEdgesData,\n edgeColorMode: \"field\", edgeColorField: \"weight\",\n edgeWidthMode: \"field\", edgeWidthField: \"weight\"\n});\ndisplay(ht_toyViewer);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"## Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"const ht_treeData =\n await FileAttachment(\"mammals.json\").json();\n //await FileAttachment(\"gtdb-life-genus.json\").json();\ndisplay(\"The mammals dataset\");\ndisplay(ht_treeData);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"// CELL: flare-data — builds the flare class-hierarchy d3 tree + static hyperbolic layout (ht_flareNodes)\nconst ht_flareRoot = d3.stratify()\n .id((d) => d.name)\n .parentId((d) => d.name.includes(\".\") ? d.name.slice(0, d.name.lastIndexOf(\".\")) : null)\n (flare);\nconst ht_flareNodes = ht_layout(ht_flareRoot, { k: 2.2 });\ndisplay(\"The flare class-hierarchy d3 tree + static hyperbolic layout (ht_flareNodes)\");\ndisplay(ht_flareNodes);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"flare","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"// CELL: section-implementation — markdown section header\ndisplay(md`\n## Implementation`)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$37","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$38","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$39","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$3a","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$3b","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$3c","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$3d","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"#### Edge rendering options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$3e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$3f","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"$40","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"#### Animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// CELL: lerp-easing — ht_lerpM (transform interpolation) + easing function, used for animations\n// smooth interpolation between two SU(1,1) transforms (nlerp-style: lerp components + renormalize,\n// with hemisphere alignment since M and -M represent the same transform — avoids \"long way round\" spins)\nfunction ht_lerpM(M0, M1, t) {\n const dot = M0.a.reM1.a.re + M0.a.imM1.a.im + M0.b.reM1.b.re + M0.b.imM1.b.im;\n const s = dot < 0 ? -1 : 1;\n const a = { re: M0.a.re(1-t) + sM1.a.ret, im: M0.a.im(1-t) + sM1.a.imt };\n const b = { re: M0.b.re(1-t) + sM1.b.ret, im: M0.b.im(1-t) + sM1.b.imt };\n return ht_normalize({ a, b });\n}\nfunction ht_easeInOutCubic(t) { return t < 0.5 ? 4ttt : 1 - Math.pow(-2t+2, 3)/2; }\n\n display(`Smooth transition using eased interpolation when node is selected`);\n display(ht_lerpM);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"#### Control Panel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$41","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$42","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"#### Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$43","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$44","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$45","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$46","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$47","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$48","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$49","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$4a","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"2","titling":"auto"}} 30:"$2f:body"