35,827 runners finished the annual Berlin Marathon in 2016. After the race, the Berliner Morgenpost received the finishing times of every runner.
With that data, a detailed interactive was developed that lets you compare your city’s average or your individual finishing time with others.
The challenge here was to animate all runners efficiently and to show and hide runners dynamically.
This was achieved by developing a WebGL-based datavisualization that is controlled using react.
As you can see in the application, the interactivity is distinguishing the app from a pre-rendered video.
Not only can you playback the race in your own time but also select a city and show only the runners from this place.