Geo-visualizing the FIFA World Cup 2018, with Mapbox
This blog describes my journey (and England) through the FIFA World Cup 2018 & Mapbox #worldmapcup.
To make the World Cup engaging and interactive for modern-day cartographers (or map-makers), Mapbox created the #worldmapcup. This involved a four-part challenge with a number of exciting prizes to win. This blog presents each of my four attempts for each challenge!
Round 1
The first challenge was very simple and an easy stage for the first round. This involved using Cartogram to create a custom map using my nations colours, which is naturally England. The first task was to import an image and then select desired colour from the image to represent the different components; land, water, roads and buildings. I then designed my Cartogram to represent the Saint George’s Cross (England’s national flag) — see below.
Round 2
The second challenge involved styling the nations who qualified for the event, through the Mapbox Studio. Mapbox provided a GeoJSON file, with those nations who qualified. Before importing the GeoJSON file into Mapbox Studio, I did some pre-processing of the data in Rstudio, where I merged this with the probability of winning the FIFA World Cup 2018. This is based of the Leitner et al. (2010) model.
Before importing the GeoJSON file into Mapbox Studio, I styled the map again based on the Saint George’s flag with slight tweaks to draw the attention of the reader towards the data. After importing the data, I styled each participating nation, based on their probability using choropleth mapping. The colours are based on the ‘Reds’ sequential colour scheme form ColorBrewer, and the class intervals (6) were defined using the R-classInt, defined all in Rstudio. I then changed the styling further, for example by only including country labels containing only the nation’s participating in the event, changing the data file to extrusion, with England being elevated higher above the other nations, to support my nation!
Without knowing what Round 3 would entail, I decided to create an interactive web map using Mapbox GL JS. This involved creating an interactive popups; containing statistics for each nation, a custom legend, adding a text box and scale bar. Below is some sample code for the interactive popups;
Overall, I was very pleased with the outcome of this simple but informative web map. The results are shown below;
Round 3
For round 3, the second challenge required creating an interactive story using either Mapbox GL JS library or Maps SDK for Unity. Although the second option allows for more dynamic geo-visualizations, Mapbox GL JS was selected because it’s more intuitive for describing a story and there’ s plenty of tutorial online! Moreover Mapbox provided some sample code and I incorporated the skills from the last rounds into this one to build a story of mine (and England’s) journey through the World Cup to the semi-finals. This story begins looking at England’s past success but then goes on to describe England’s unfortunate defeat in the semi-finals. Finally through a series of panning and zooming features (courtesy of Javacript), I show where I will be watching the France vs Croatia game. I added some more CSS / HTML styling to the map (compared to round 2), for customizing features such as the background colour of the Mapbox controls;
The results are shown below;
Round 4
For the final challenge, I decided to keep things simple and use the mapbox-gl-compare function, that allows users to Swipe and sync between two maps. This allows us to compare the predictive accuracy of the Leitner et al. (2010) model against the each nation’s performance in the World Cup, defined as each stage the nation got to. I’ve kept this map as simple as possible to allow the user to focus on the single interactive “compare” function, to allow users to see how each nation compared to the model by using the slider.
Step 1: Mapbox Studio
Firstly, the data was pre-processed in R studio to show the position of each nation in the World Cup (code). After exporting the shapefile (zipped) into Mapbox Studio, I defined the class intervals directly , based off my classification scheme — the stage each nation got to (see left).
Where rank 32 is the winner and rank 16 for those nations kicked out of the group stage!
Step 2: Mapbox GL JS
Importing the styles into a text editor, where Javascript/HTML/CSS is used for making a custom interactive web map.
Step 3: Observe the results
By comparing the predicted and observed positions of each qualified nation in the tournament, you can see the Leitner et al. (2010) model performs reasonably ok with some anomalies. Although it predicted Brazil as the nation with the highest probability of winning the World Cup, France won. In particular, Spain and Germany performed considerably worse than predicted by the model.
Final Note
Finally, I would like to say thank Mapbox for creating this really fun and exciting competition. I was waiting frantically each day a new challenge was released! Whilst my interactive visualizations may not be the most dynamic ones created in this competition, my goal was to create several simple but elegant geo-visualizations of the FIFA World Cup 2018. The aim was to create a story of showing how each nation performed in the World cup and I think I’ve pulled it off!
Moreover, it’s important to note that just like how the World Cup has brought nations together, the #worldmapcup has brought together the skills of modern day cartographers. I have learnt some new skills and had fun whilst doing this #Thankyou.