loop-benchmarking

commit d6e1006bcb1223e1b0bc4e7a662cd23904a2c5d4
parent 44de0c73095807dba4c68ff7a6b61d5f143dd225
Author: Brian Graham <brian@buildingbetterteams.de>
Date:   Mon,  6 Apr 2026 06:36:31 +0200

Scatter plot: 4 density levels instead of 2

Nested convex hulls at 100%, 75%, 50%, 25% of cells (by distance
to centroid). Increasing opacity creates a topographic map effect:
- 100%: 5% fill, 20% stroke (full spread)
- 75%: 10% fill, 25% stroke
- 50%: 18% fill, 35% stroke
- 25%: 30% fill, 50% stroke (densest core)

Model sort order: haiku, sonnet, opus.

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

Diffstat:
M
dashboard/src/components/ScatterPlot.tsx
 | 
77
+++++++++++++++++++++++++++++++++++++++++++----------------------------------

1 file changed, 43 insertions(+), 34 deletions(-)
diff --git a/dashboard/src/components/ScatterPlot.tsx b/dashboard/src/components/ScatterPlot.tsx
@@ -105,15 +105,28 @@ function convexHull(points: Point[]): Point[] {
   return [...lower.slice(0, -1), ...upper.slice(0, -1)];
 }
 
+interface DensityHull {
+  pct: number;      // e.g. 100, 75, 50, 25
+  hull: Point[];
+  opacity: number;
+  strokeOpacity: number;
+}
+
 interface ModelRegion {
   model: string;
   points: Point[];
   centroid: Point;
-  fullHull: Point[];
-  coreHull: Point[];
+  hulls: DensityHull[];
   n: number;
 }
 
+const DENSITY_LEVELS = [
+  { pct: 100, opacity: 0.05, strokeOpacity: 0.20 },
+  { pct: 75,  opacity: 0.10, strokeOpacity: 0.25 },
+  { pct: 50,  opacity: 0.18, strokeOpacity: 0.35 },
+  { pct: 25,  opacity: 0.30, strokeOpacity: 0.50 },
+];
+
 function computeRegions(
   byModel: Record<string, { x: number; y: number }[]>
 ): ModelRegion[] {
@@ -127,28 +140,30 @@ function computeRegions(
     const cy = points.reduce((s, p) => s + p[1], 0) / points.length;
     const centroid: Point = [cx, cy];
 
-    const fullHull = points.length >= 3 ? convexHull(points) : [...points];
-
-    const coreCount = Math.max(1, Math.ceil(points.length * 0.5));
     const byDist = [...points].sort((a, b) => {
       const da = (a[0] - cx) ** 2 + (a[1] - cy) ** 2;
       const db = (b[0] - cx) ** 2 + (b[1] - cy) ** 2;
       return da - db;
     });
-    const corePoints = byDist.slice(0, coreCount);
-    const coreHull = corePoints.length >= 3 ? convexHull(corePoints) : [...corePoints];
-
-    regions.push({
-      model,
-      points,
-      centroid,
-      fullHull,
-      coreHull,
-      n: points.length,
-    });
+
+    const hulls: DensityHull[] = [];
+    for (const level of DENSITY_LEVELS) {
+      const count = Math.max(1, Math.ceil(points.length * level.pct / 100));
+      const subset = byDist.slice(0, count);
+      const hull = subset.length >= 3 ? convexHull(subset) : [...subset];
+      hulls.push({
+        pct: level.pct,
+        hull,
+        opacity: level.opacity,
+        strokeOpacity: level.strokeOpacity,
+      });
+    }
+
+    regions.push({ model, points, centroid, hulls, n: points.length });
   }
 
-  return regions.sort((a, b) => a.model.localeCompare(b.model));
+  const MODEL_ORDER: Record<string, number> = { haiku: 1, sonnet: 2, opus: 3 };
+  return regions.sort((a, b) => (MODEL_ORDER[a.model] || 99) - (MODEL_ORDER[b.model] || 99));
 }
 
 interface CentroidDatum {
@@ -197,23 +212,17 @@ function HullLayer({
 
         return (
           <g key={region.model}>
-            {/* 100% hull */}
-            {region.fullHull.length >= 3 && (
-              <polygon
-                points={hullToPolygonPoints(region.fullHull)}
-                fill={`${fillPrefix} 0.08)`}
-                stroke={`${fillPrefix} 0.3)`}
-                strokeWidth={1}
-              />
-            )}
-            {/* 50% core hull */}
-            {region.coreHull.length >= 3 && (
-              <polygon
-                points={hullToPolygonPoints(region.coreHull)}
-                fill={`${fillPrefix} 0.20)`}
-                stroke={`${fillPrefix} 0.45)`}
-                strokeWidth={1}
-              />
+            {/* Density hulls - outer to inner */}
+            {region.hulls.map((dh) =>
+              dh.hull.length >= 3 ? (
+                <polygon
+                  key={dh.pct}
+                  points={hullToPolygonPoints(dh.hull)}
+                  fill={`${fillPrefix} ${dh.opacity})`}
+                  stroke={`${fillPrefix} ${dh.strokeOpacity})`}
+                  strokeWidth={1}
+                />
+              ) : null
             )}
             {/* For 1-2 point models, show individual dots */}
             {region.points.length <= 2 &&