Draw the medallion as roots and show the full model-size range

Replace leaf shapes and time rings with tapered, gently irregular branches using the existing family hierarchy. Retain all 102 family tips and corpus counts, with ancestry highlighting on hover. Spacing is illustrative and the age scale is removed. Update the Overview heading to 318M to 3.2B parameters. Verified family data, hover behaviour, motion preferences, light/dark layouts and prior removals.

README.md

@@ -39,8 +39,11 @@ Static landing page for the Botanic1 models (Living Models), linking to the mode
 Living Models' palette (pale sage paper, near-black ink, the neon lime as a fill,
 pill buttons) with two devices of the Space's own: the wordmark set as a row of
 token cells whose last cell is masked and then predicted (`assets/hero.js`), and the
-corpus's dated family tree drawn as a radial medallion on the report page
-(`data/tree.json`, built from `figures/data/plants_family_timetree5.nwk`). Manrope for
+corpus's family tree drawn as spreading roots in the landing-page medallion
+(`data/tree.json`, built from `figures/data/plants_family_timetree5.nwk`). The drawing
+retains the family relationships, with tapered branches and an uneven perimeter;
+its spacing is illustrative. Hovering over a tip shows its family and corpus counts.
+Manrope for
 headings and controls, Spectral for reading, IBM Plex Mono for tokens, labels and
 numbers. Detailed charts remain on the benchmark and corpus pages. The overview
 states a few results from the report and links to their evaluations. The original

assets/hero.js

@@ -1,4 +1,4 @@
-/* Hero: the corpus's dated family tree as a radial dendrogram (the medallion),
+/* Hero: the corpus's family tree drawn as spreading roots (the medallion),
    and the masked token in every wordmark. Needs d3 when a medallion is present. */
 (function () {
   // Private Hugging Face Spaces authorise requests through the __sign token of the
@@ -57,10 +57,46 @@
       const spans = d.children.map(k => d3.extent(k.leaves(), l => l.x)).sort((p, q) => p[0] - q[0]);
       d.x = spans.length === 1 ? d.children[0].x : (spans[0][1] + spans[1][0]) / 2;
     });
-    root.each(d => { d.y = (d.age / maxAge) * R; });
-    const link = d3.linkRadial().angle(d => d.x).radius(d => d.y);
-    const rMax = d3.max(root.leaves(), d => d.data.windows);
-    const rScale = d3.scaleSqrt().domain([0, rMax]).range([1.4, 9]);
+    // Keep the family relationships and ordering, with an uneven outer silhouette.
+    // This is an illustration of the tree, so no time rings or age scale are shown.
+    const seed = name => Array.from(name).reduce((value, ch) => (value * 31 + ch.charCodeAt(0)) >>> 0, 17);
+    root.eachBefore(d => {
+      const reach = R - 12 + 12 * Math.sin(d.x * 3 + .6) + 7 * Math.sin(d.x * 7 - .8);
+      const tipOffset = d.children ? 0 : (seed(d.data.name) % 25) - 12;
+      d.y = Math.max(d.parent ? d.parent.y : 0, Math.pow(d.age / maxAge, 1.45) * reach + tipOffset);
+      d.width = 1 + 7 * Math.pow(d.data._c / nLeaves, .65);
+    });
+    const polar = (angle, radius) => [Math.sin(angle) * radius, -Math.cos(angle) * radius];
+    const rootPath = ({ source, target }) => {
+      const middle = (source.y + target.y) / 2;
+      const controls = [polar(source.x, source.y), polar(source.x, middle), polar(target.x, middle), polar(target.x, target.y)];
+      const distance = controls.slice(1).reduce((sum, point, i) => sum + Math.hypot(point[0] - controls[i][0], point[1] - controls[i][1]), 0);
+      const phase = (seed(target.data.name || String(target.x)) % 628) / 100;
+      const amplitude = Math.min(3.5, distance * .025);
+      const steps = Math.max(12, Math.ceil(distance / 5));
+      const points = d3.range(steps + 1).map(i => {
+        const t = i / steps, u = 1 - t;
+        const weights = [u ** 3, 3 * u * u * t, 3 * u * t * t, t ** 3];
+        const point = [0, 1].map(axis => controls.reduce((sum, p, j) => sum + weights[j] * p[axis], 0));
+        const tangent = [0, 1].map(axis => 3 * u * u * (controls[1][axis] - controls[0][axis]) + 6 * u * t * (controls[2][axis] - controls[1][axis]) + 3 * t * t * (controls[3][axis] - controls[2][axis]));
+        const length = Math.hypot(...tangent) || 1;
+        // The bend fades at each end so adjoining branches meet smoothly.
+        const bend = amplitude * Math.sin(Math.PI * t) ** 2 * Math.sin(2 * Math.PI * t + phase);
+        return [point[0] - tangent[1] / length * bend, point[1] + tangent[0] / length * bend];
+      });
+      const sides = [[], []];
+      const startWidth = Math.min(source.width, target.width * 1.65);
+      const endWidth = target.children ? target.width : .08;
+      points.forEach((point, i) => {
+        const t = i / steps;
+        const before = points[Math.max(0, i - 1)], after = points[Math.min(steps, i + 1)];
+        const dx = after[0] - before[0], dy = after[1] - before[1], length = Math.hypot(dx, dy) || 1;
+        const width = (startWidth * (1 - t) + endWidth * t) * (1 + .06 * Math.sin(3 * Math.PI * t + phase) * Math.sin(Math.PI * t)) / 2;
+        sides[0].push([point[0] - dy / length * width, point[1] + dx / length * width]);
+        sides[1].push([point[0] + dy / length * width, point[1] - dx / length * width]);
+      });
+      return d3.line()(sides[0].concat(sides[1].reverse())) + 'Z';
+    };
 
     const svg = d3.create('svg').attr('viewBox', `0 0 ${size} ${size}`).attr('aria-hidden', 'true');
     // Rotation is driven from JavaScript on a nested group: a CSS transform would
@@ -68,24 +104,17 @@
     const centre = svg.append('g').attr('transform', `translate(${c},${c})`);
     const g = centre.append('g').attr('class', 'spin');
     if (!reduced) { const period = 480000; let t0 = null; const tick = (ts) => { if (t0 === null) t0 = ts; g.attr('transform', `rotate(${((ts - t0) / period) * 360})`); requestAnimationFrame(tick); }; requestAnimationFrame(tick); }
-    const rings = d3.range(100, maxAge, 100);
-    g.selectAll('circle.ring').data(rings).join('circle').attr('class', 'ring').attr('r', d => ((maxAge - d) / maxAge) * R);
-    g.selectAll('path.link').data(root.links()).join('path').attr('class', 'link').attr('d', link);
-    // Each family is a small leaf at its tip, sized by its windows, pointing along the
-    // branch with a slight deterministic tilt.
-    const lScale = d3.scaleSqrt().domain([0, rMax]).range([5, 16]);
-    const leafPath = (L) => { const w = L * 0.36; return `M0,0 Q${L * 0.45},${-w} ${L},0 Q${L * 0.45},${w} 0,0 Z`; };
-    const tips = g.selectAll('g.leaf').data(root.leaves()).join('g').attr('class', 'leaf')
-      .attr('transform', (d, i) => `rotate(${(d.x * 180 / Math.PI) - 90}) translate(${d.y - 2},0) rotate(${((i * 37) % 41) - 20})`);
-    tips.append('path').attr('class', 'blade').attr('d', d => leafPath(lScale(d.data.windows)));
-    tips.append('path').attr('class', 'rib').attr('d', d => `M1,0 L${lScale(d.data.windows) * 0.8},0`);
-    tips.append('circle').attr('class', 'hit').attr('r', d => Math.max(6, lScale(d.data.windows) * 0.6)).attr('cx', d => lScale(d.data.windows) * 0.5);
-    tips.on('mousemove', (ev, d) => showTip(`<b>${d.data.name}</b> · ${d.data.order}<br>${d.data.n_species} species · ${d.data.windows.toLocaleString()} windows`, ev))
-      .on('mouseleave', hideTip);
+    const branches = g.selectAll('path.root-branch').data(root.links()).join('path').attr('class', 'root-branch').attr('d', rootPath);
+    // Each fine tip is still one family. Invisible targets retain the data tooltip.
+    const tips = g.selectAll('circle.root-tip').data(root.leaves()).join('circle').attr('class', 'root-tip')
+      .attr('cx', d => polar(d.x, d.y)[0]).attr('cy', d => polar(d.x, d.y)[1]).attr('r', 7);
+    tips.on('mousemove', (ev, d) => {
+      const ancestors = new Set(d.ancestors());
+      branches.classed('highlighted', link => ancestors.has(link.target));
+      showTip(`<b>${d.data.name}</b> · ${d.data.order}<br>${d.data.n_species} species · ${d.data.windows.toLocaleString()} windows`, ev);
+    }).on('mouseleave', () => { branches.classed('highlighted', false); hideTip(); });
     const lab = svg.append('g').attr('transform', `translate(${c},${c})`);
-    lab.selectAll('text').data([]).join('text').attr('class', 'ring-label')
-      .attr('x', 4).attr('y', d => -((maxAge - d) / maxAge) * R - 4).text(d => `${d} Ma`);
-    lab.append('text').attr('class', 'ring-label').attr('x', 4).attr('y', -R - 6).text(`${Math.round(maxAge)} Ma · 102 families · 320 species`);
+    lab.append('text').attr('class', 'tree-label').attr('x', 0).attr('y', -R - 16).attr('text-anchor', 'middle').text(`${nLeaves} families · ${data.tree.n_species} species`);
     el.appendChild(svg.node());
   }).catch(() => {});
 })();

assets/site.css

@@ -122,13 +122,10 @@ em, i { font-style: italic; }
 .medallion { position: relative; width: min(780px, 94vw); aspect-ratio: 1; display: grid; place-items: center; }
 .medallion .hero-art { position: absolute; inset: 0; }
 .medallion .hero-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
-.hero-art .link { fill: none; stroke: var(--tree); stroke-width: 1.1; }
-.hero-art .leaf { cursor: default; }
-.hero-art .leaf .blade { fill: var(--tree-2); stroke: var(--sage); stroke-width: 0.8; transition: fill 0.2s ease; }
-.hero-art .leaf .rib { fill: none; stroke: var(--sage); stroke-width: 0.7; opacity: 0.9; }
-.hero-art .leaf:hover .blade { fill: var(--lime); stroke: var(--ink); }
-.hero-art .ring { fill: none; stroke: var(--rule); stroke-dasharray: 2 5; }
-.hero-art .ring-label { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); letter-spacing: 0.08em; }
+.hero-art .root-branch { fill: var(--tree-2); opacity: .65; transition: fill .2s ease, opacity .2s ease; }
+.hero-art .root-branch.highlighted { fill: var(--accent); opacity: 1; }
+.hero-art .root-tip { fill: transparent; cursor: default; }
+.hero-art .tree-label { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); letter-spacing: 0.08em; }
 .medallion .centre { position: relative; z-index: 2; text-align: center; padding: 44px 40px 40px; border-radius: 50%; background: radial-gradient(closest-side, var(--sage) 58%, color-mix(in srgb, var(--sage) 70%, transparent) 80%, transparent 100%); pointer-events: none; max-width: 100%; }
 .medallion .centre > * { pointer-events: auto; }
 .medallion .org { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink-3); margin: 0; }

index.html

@@ -47,7 +47,7 @@
     <div class="facts">
       <article class="fact">
         <p class="fact-label">Model size</p>
-        <h2>318M parameters</h2>
+        <h2>318M to 3.2B parameters</h2>
         <p>Botanic1-S scores 0.758 on the aggregate benchmark across nine task families. PlantCAD2-L scores 0.756, Carbon-8B 0.727, and Evo&nbsp;2-7B 0.695.</p>
         <p class="fact-note">Frozen models · aggregate test score (S<sub>bal</sub><sup>test</sup>)</p>
         <a class="text-link" href="leaderboard.html">Scores by task and species <span aria-hidden="true">↗</span></a>