NFL Flight Paths · A Travel-Schedule Globe

A small interactive Three.js scene that plots every NFL road trip of the 2025 and 2026 seasons as a great-circle arc on an interactive globe. Pick a team, watch their tour of the league light up, and read off the total air miles they'll log.

→ Open the live globe · cypherpoet.github.io/THREE-JS-NFL-Flight-Paths

---

What's Inside

• A sculpted globe with real country shapes. Continents are rendered as 3D elevated plates with etched country borders, sitting above a smooth ocean.
• Animated travelers. Every arc is ridden by a small team-coloured pellet looping from home stadium to destination venue, with a soft additive glow that pulses in flight.
• Team-coloured arcs. Each flight path uses the travelling team's primary brand accent. Stadium markers and travelers match.
• Stadium tooltips with photos. Hover any stadium or international venue for venue + team info and a lazy-loaded Wikipedia thumbnail.
• Light + dark modes. A toggle in the top bar swaps the whole scene to a coordinated palette and remembers the choice.
• Filter by clicking. Click a team to toggle it; All / None for sweeping selections. The team list is sorted by total miles travelled.
• 2025 ↔ 2026 toggle. Switch seasons from the header.
• Live mileage tally. League-wide total + sum of selected teams in the header.
• Per-team mileage breakdown. A button in the header opens a modal of all 32 teams as contrail bars with a plane icon at the tip, ordered by miles flown.
• Methodology modal. A small "how mileage is calculated" panel explains the hub-and-spoke travel model behind the totals — including the rule for when consecutive road weeks stay on the road instead of returning home.

A Look Around

The Schedule

Schedules live in src/data/schedule-2026.js (current season) and src/data/schedule-2025.js. Stadiums + international venues + team accent colors live in src/data/teams.js. A travel leg is the great-circle distance from the away team's home stadium to the destination venue; for international games, both teams get a leg since neither plays at home.

Run It Locally

git clone git@github.com:CypherPoet/THREE-JS-NFL-Flight-Paths.git
cd THREE-JS-NFL-Flight-Paths
npm install
npm run dev

Then open the printed URL (default http://localhost:5173/THREE-JS-NFL-Flight-Paths/).

A production build goes to dist/:

npm run build
npm run preview          # serve dist/ at localhost:4173

Deploy

This repo ships with .github/workflows/deploy.yml, which on every push to main:

1. npm ci → npm run build
2. Uploads dist/ as a GitHub Pages artifact
3. Deploys to https://<owner>.github.io/THREE-JS-NFL-Flight-Paths/

Make sure GitHub Pages is set to GitHub Actions under Settings → Pages for the repo.

Acknowledgements

• Three.js by Ricardo Cabello & contributors
• topojson-client by Mike Bostock — reads the bundled country TopoJSON at runtime
• world-atlas — origin of the bundled data/countries-110m.json used as the land source
• 2025 schedule data from Pro Football Reference (regular-season subset)
• 2026 schedule data from Pro Football Reference (regular-season subset)
• Stadium coordinates are public-domain venue locations; team brand colours are the franchises' own. This project is an educational data visualization and is not affiliated with the NFL.

License

MIT — see LICENSE. Team marks, logos, and league names are the property of their respective owners and used here under nominative fair use for non-commercial visualizations.