Phase 3: data-story viz — StatsBomb shot map, xG race, pass networks

- buildStatsbombViz.ts: processes the 2022 WC Final (Argentina 3-3 France) from
  StatsBomb open data → shots+xG, cumulative xG race, starting-XI pass networks,
  totals, shootout result. Output committed (11KB) to avoid build-time fetch
- Custom SVG viz (no chart lib): reusable Pitch (StatsBomb 120x80 coords),
  ShotMap (xG-sized dots, teams attacking opposite goals), XgRace (stepped
  cumulative xG with goal markers, d3-scale), PassNetwork (nodes ∝ involvement,
  links ∝ pass volume)
- StoryPage: narrative with hero scoreline, by-the-numbers bars, and the three
  visualizations with explanatory copy
- Verified in browser: all three render correctly, no console errors

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 13:34:19 +02:00
parent d604bb14ff
commit dd8156376d
9 changed files with 603 additions and 6 deletions
+4 -1
View File
@@ -8,7 +8,10 @@ server/node_modules
.env
.env.local
# Generated build artifacts (reproduced by `npm run data:build`)
public/data
public/data/fixtures.json
public/data/ratings.json
public/pwa-192x192.png
public/pwa-512x512.png
public/favicon.svg
# Note: public/data/viz/*.json IS committed — it's processed from a fixed
# historical StatsBomb match, so we don't refetch 3.7MB of events at build time.