World Cup Team Journeys
Travel is often an overlooked part of the World Cup. Not only does the winner have to play seven matches in less than a month, they are almost always going to have to travel between matches. To show just how intense that travel could be, I created a web app that shows the locations that each team played, as well as their initial travel to the tournament.
Technology Behind The Application
To create this map, I used Deck.gl within a React app, while using react-map-gl as the base map component. Deck.gl let me create the nice arc layers on top of my Cartogram Mapbox style. The switching between teams and highlighting of different layers was all controlled using Redux. Fortunately, I was able to leverage an existing open source project as my starting point.
Where the Data Came From
On top of my Mapbox style, I grabbed the individual match and stadium data from this site.
The match-stadium information was extremely helpful, and gave me a great starting point to go get the individual stadium latitudes and longitudes from Wikipedia.
To show the origin of each team, I got the world capitals from this site.
To get the data into a useful JSON format, I put together a Python notebook, that has all of my data manipulation steps in it.
A Peek Behind the Scenes
This was one of the most fun side projects I’ve ever done. Not only did I have a chance to put some of my brand new Redux skills into practice, I got to do it around an interesting topic.
The other area, that I had played with but had never built a full application with was Deck.gl. This project gave me the opportunity to create different layers, see how viewport changes are handled in a React app, and prove just how extensible the Mapbox GL JS library, and React-Map-GL components could be.
You can see the final demo here: https://mcgovey.github.io/wc-team-travel/
