Fixtures 15/16
An interactive exploration of every match from the 2015–16 Premier League season. Users can analyze shot locations, team heatmaps, match timelines, and key statistics through a custom-designed interface powered by StatsBomb Open Data.
Challenge
Making Data Fun
I wanted to combine my interest in football with my passion for interactive web experiences. Most football statistics sites focus on tables and numbers, while I was interested in exploring how spatial data could be presented in a more engaging and visual way.
Technichal Highlights
Interactive Shotmaps
To help users explore how chances developed during a match, I built an interactive shot map synced to a timeline scrubber. The map plots every shot and own goal on a proportional pitch, sized by the 'expected goals' (xG) stat, and colored by outcome. A shared state connects the scrubber to the visualization: as users drag through the match, shots appear progressively up to that minute, creating a simple replay of attacking momentum without leaving the page.
Spatial Heatmaps
Passes, carries, duels, and defensive actions are aggregated into a spatial grid to generate both 2D and 3D heatmaps. The visualizations update instantly as users switch between teams, event types, and match moments, providing an intuitive view of where teams controlled the game.
3D Data Visualization
Using React Three Fiber, I transformed heatmap intensity into a dynamic terrain surface. Grid density drives the elevation of the mesh, while additive blending, animated transitions, and custom colour gradients create a holographic visualization that responds smoothly as the underlying data changes.