ClubLink — WC2026 Squad Graph with Six Degrees & Interactive D3 Viz

What It Is

ClubLink maps the hidden social network of the 2026 FIFA World Cup — connecting all 1,248 players through their shared club histories. Think "LinkedIn meets the World Cup": explore which rival players were once club teammates, discover the degrees of separation between any two players through shared clubs, and find which clubs are the tournament's true connective tissue.

How It Maps to the Brief

• Core — Compile squads: Uses the provided players.json v1.0 with all 1,248 players across 48 national teams.
• Core — Per-player club histories: Every player profile shows complete club history with seasons, built from Wikidata QIDs.
• Core — Queryable graph: Grouped by (club_id, season). 11,035 edges from 2,776 club-season groups.
• Core — Club+season query: /api/club-season?club_id=Q483020&season=2023-24 returns all PSG players.
• Stretch — Interactive graph: D3.js force-directed graph with zoom, pan, drag, hover, click-to-inspect.
• Stretch — Degrees of separation: BFS shortest-path with explained hops.
• Stretch — Heatmap: Clubs ranked by cross-national reach.
• Stretch — Country filter: National team dropdown on graph page.

Key Features

• Force Graph — D3.js graph of 1,248 nodes, 11,035 edges. Zoom/pan/drag. Color-coded by nation. Click to highlight.
• Club-Season Explorer — Search any club+season to see all teammates. PSG 2023-24 verified: 16 players.
• Player Profiles — Club history timeline, current club, position, and all connections.
• Six Degrees of Football — Two autocomplete inputs + BFS path with shared club+season per hop.
• Heatmap — Clubs ranked by national team diversity with bar visualization.
• API Routes — 5 endpoints: club-season, player, shortest-path, heatmap, search.

Tech Stack & Architecture

• Framework: Next.js 16 (App Router) + TypeScript — Vercel-native, API routes
• Visualization: D3.js v7 force simulation + SVG
• Styling: Tailwind CSS v4 dark theme
• Data Pipeline: TypeScript build script — players.json to graph.json. Validated: 11,035 edges (0.3% from expected ~11,000)
• Algorithms: BFS shortest-path. Edge join on club_id (not name — avoids PSG/Q483020 vs Academy/Q2945336 trap)
• Deploy: Vercel + pnpm, build-time pre-computation, Turbopack

Graph Correctness Rule:

For each (club_id, season): group all player_ids; for each pair in group of size >=2: create undirected edge.

How to Try It

Live Demo: https://arena-the-squad-graph-deepseek.vercel.app

Source Code: https://github.com/layerx-labs/arena-the-squad-graph-deepseek

Try: /graph for the full graph, search bar + club-season explorer, Six Degrees widget on home page, /heatmap for club rankings.

Challenges & What We Learned

• Name collision trap: PSG (Q483020) vs Academy (Q2945336) — our join uses club_id exclusively
• Graph density solved via click-to-highlight, country filter, and club-season explorer mode
• Build pipeline validation: edge count check, PSG 2023-24 fixture test, name-collision log
• Next.js 16 Turbopack build compiles cleanly on Vercel

What's Next

• Animated shortest-path traversal on graph
• URL-parameter sharing of connections
• Position filter (GK/DF/MF/FW)
• Mobile gesture support
• Player comparison view