ai-research-survey

commit 3776fd8528b73d85622c4a27e63d7a6e653b67c9
parent 8667f4fa26aaf394db5fbd7bf771dbcdeffe505e
Author: Brian Graham <brian@buildingbetterteams.de>
Date:   Tue, 24 Mar 2026 06:31:56 +0100

Add count scale ticks and clearer axis description to tension charts

Left edge now shows numeric count ticks (midpoint and max) for both
positive and nuanced sides. Description text uses bold labels:
Height = count, Darkness = methodology score.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Diffstat:
M
explorer/src/views/tensions.ts
 | 
13
++++++++++---

1 file changed, 10 insertions(+), 3 deletions(-)
diff --git a/explorer/src/views/tensions.ts b/explorer/src/views/tensions.ts
@@ -119,9 +119,16 @@ function renderButterfly(positive: TensionClaim[], nuanced: TensionClaim[], meta
   // Zero line
   svg += `<line x1="${pad.l}" y1="${midY}" x2="${w - pad.r}" y2="${midY}" stroke="var(--border)" stroke-width="1"/>`;
 
+  // Count scale ticks on left edge
+  for (const count of [Math.round(maxCount / 2), maxCount]) {
+    const tickH = (count / maxCount) * barMaxH;
+    svg += `<text x="${pad.l}" y="${midY - tickH - 1}" text-anchor="start" font-size="9" fill="var(--text-dim)">${count}</text>`;
+    svg += `<text x="${pad.l}" y="${midY + tickH + 8}" text-anchor="start" font-size="9" fill="var(--text-dim)">${count}</text>`;
+  }
+
   // Side labels at edges
-  svg += `<text x="${pad.l + 4}" y="${pad.t + 8}" font-size="10" fill="var(--text-dim)">\u2191 ${meta.positive}</text>`;
-  svg += `<text x="${pad.l + 4}" y="${h - pad.b - 2}" font-size="10" fill="var(--text-dim)">\u2193 ${meta.nuanced}</text>`;
+  svg += `<text x="${w - pad.r}" y="${pad.t + 8}" text-anchor="end" font-size="10" fill="var(--text-dim)">\u2191 ${meta.positive}</text>`;
+  svg += `<text x="${w - pad.r}" y="${h - pad.b - 2}" text-anchor="end" font-size="10" fill="var(--text-dim)">\u2193 ${meta.nuanced}</text>`;
 
   for (let i = 0; i < sortedYears.length; i++) {
     const y = sortedYears[i];
@@ -190,7 +197,7 @@ function renderButterfly(positive: TensionClaim[], nuanced: TensionClaim[], meta
   }
 
   return `<div style="margin:1rem 0">
-    <p style="font-size:0.78rem;color:var(--text-dim);margin-bottom:0.5rem">Bar height = claim count. Darker = higher methodology score. Dashed line = quality-weighted balance (above center = optimism dominates, below = skepticism). A tall pale bar means many claims with weak methodology.</p>
+    <p style="font-size:0.78rem;color:var(--text-dim);margin-bottom:0.5rem"><strong>Height</strong> = number of claims. <strong>Darkness</strong> = mean methodology score (darker = more rigorous). Dashed line = quality-weighted balance. A tall pale bar = many claims from weak papers.</p>
     <svg viewBox="0 0 ${w} ${h}" style="width:100%;max-width:${w}px">${svg}</svg>
   </div>`;
 }