§6 UMAP: bias default view toward the dense bottom-right clusters

Lock min zoom to ~1.35 with a bottom-right offset (tx=-0.18, ty=0.15) so
the landing frame skips the wide empty band along the top and ~40% of the
viewport stops going to whitespace. Min-zoom matches the default view,
so visitors can pan/zoom around but never reach the fit-everything view
where the clusters drown in margin.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/js/sections/umap.js

@@ -152,8 +152,17 @@
   let bounds = [0,0,0,0];
   let colorBy = "species";
   // Viewport: translate (tx, ty) + scale around origin, in NDC space.
-  // The whole world is fit into [-0.95, 0.95]² at initial zoom.
-  let view = { tx: 0, ty: 0, scale: 1 };
+  // We *don't* show the data fully fit-to-canvas at zoom 1: the UMAP layout
+  // has a wide empty band along the top edge and a smaller one on the left,
+  // and fit-all wastes ~40% of the viewport on whitespace. Instead the
+  // landing view is biased toward the bottom-right (where Vertebrates, Plants,
+  // Fungi/Bacteria/Viruses sit) with a moderate zoom so the dense clusters
+  // fill the frame on first paint. The same view doubles as the minimum
+  // zoom-out (scale ≥ MIN_SCALE in the wheel handler) so visitors can pan
+  // around but can never zoom *back* into the empty-margins view.
+  const MIN_SCALE = 1.35;
+  const DEFAULT_VIEW = { tx: -0.18, ty: 0.15, scale: MIN_SCALE };
+  let view = { ...DEFAULT_VIEW };
   let dpr = Math.max(1, window.devicePixelRatio || 1);
   let needsRedraw = false;
   // Spatial grid for hover (built once after data load, in normalized world space).
@@ -687,11 +696,14 @@
   // distracting always-active control on first paint.
   function updateResetEnabled() {
     if (!resetBtn) return;
-    const atDefault = view.tx === 0 && view.ty === 0 && view.scale === 1;
+    const atDefault =
+      view.tx === DEFAULT_VIEW.tx &&
+      view.ty === DEFAULT_VIEW.ty &&
+      view.scale === DEFAULT_VIEW.scale;
     resetBtn.disabled = atDefault;
   }
   function resetView() {
-    view = { tx: 0, ty: 0, scale: 1 };
+    view = { ...DEFAULT_VIEW };
     updateResetEnabled();
     requestRedraw();
   }
@@ -699,10 +711,10 @@
   // Keep the viewport always full of data. The data spans [-0.92, 0.92]·scale
   // in world space; the viewport spans [-1, 1]. As long as 0.92·scale ≥ 1
   // (zoom ≥ ~1.087), there's "slack" we can pan within: |tx| ≤ 0.92·scale-1.
-  // Below that — i.e. at minimum zoom where the UMAP fits the viewport with
-  // margin — we snap to (0, 0) so the data stays centered and no white edge
-  // creeps in. Paired with the scale clamp in the wheel handler, this means
-  // "fully zoomed out" = "UMAP exactly fit, perfectly centered".
+  // Since MIN_SCALE > 1.087 the slack branch is always taken in practice —
+  // the m === 0 fallback only kicks in if somebody later relaxes the wheel-
+  // handler clamp below ~1.087, in which case data snaps to (0, 0) so no
+  // white edge creeps in.
   function clampPan() {
     const m = Math.max(0, 0.92 * view.scale - 1);
     if (m === 0) {
@@ -766,11 +778,12 @@
     const ndc = clientToNDC(e);
     // Zoom factor — natural feeling on both trackpad and mouse wheel.
     const factor = Math.exp(-e.deltaY * 0.0018);
-    // Min scale = 1 means "fully zoomed out = UMAP fits the viewport". We
-    // intentionally don't let the visitor zoom out further: there's no
-    // information past the data bounds, and the empty margin makes the
-    // dataset feel small. Max 50× keeps individual points pickable.
-    const newScale = Math.min(50, Math.max(1, view.scale * factor));
+    // Min scale = MIN_SCALE (matches DEFAULT_VIEW.scale): we intentionally
+    // disallow zooming further out than the bottom-right framing so the user
+    // can't reach the fit-everything view where ~40% of the canvas is empty
+    // margin (long whitespace band above the clusters). Max 50× keeps
+    // individual points pickable.
+    const newScale = Math.min(50, Math.max(MIN_SCALE, view.scale * factor));
     const k = newScale / view.scale;
     // Zoom around the cursor: shift translate so the point under the cursor
     // stays under the cursor.