Turning World Cup match data into interactive 3D portraits
Summary
A developer transformed 1,500 World Cup match events into interactive 3D data visualizations using Three.js, demonstrating how raw sports data becomes compelling storytelling. The project showcases self-hosted solutions with GPU fallbacks, proving technical elegance and accessibility aren't mutually exclusive.
Key Takeaways
- Structure complex datasets into narrative visualizations by categorizing granular events (1,500+ touches, passes, shots, cards) into meaningful interactive experiences that reveal patterns invisible in raw data.
- Implement Three.js with local assets and content security policy to reduce external dependencies, improving load times and security posture while maintaining rich 3D rendering capabilities.
- Design GPU-aware fallbacks into visualization systems to ensure accessibility across devices with varying hardware capabilities—critical for reaching broader audiences beyond high-spec machines.
- Transform retrospective analysis into emotional engagement by letting users re-explore familiar events (completed matches) through new visual contexts, deepening connection with data.
- Use interactive data visualization as a secondary narrative layer that complements existing context—users already understand match outcomes, but visualization provides novel insights and accessibility.
Related topics
Transcript Excerpt
The World Cup might be over, but we can still have fun with his data. World Cup 2026 data portraits turns every match into an interactive data piece built from roughly 1500 recorded events. Touches, passes, shots, cards, and more become a living portrait of the game. The implementation uses self-hosted 3.js, local assets, and data, a content security policy, and fallbacks for weaker GPUs. Pick a match to watch and explore it all over again. Good data visualization gives you another way into a story that you already saw and maybe we're happy, maybe we're sad about, but this is a really fun way to visualize all that…