Map: https://ahutnick.github.io/eurovisionmap/ Repository: https://ahutnick.github.io/eurovisionmap/
As I mentioned in class last week, I have relatively recently become a huge fan of the Eurovision Song Contest. Though I do not always agree with the politics of the competition (or the winners selected), I find the kinship, experimentation, and cultural pride to be inspiring.
When I was trying to think of what to map for this project, I figured that it would be neat to see who won each year in Eurovision compared to who would win strictly according to the jury vote and the televote respectively. To put it simply, Eurovision winners are determined by points allocated by the televote (the viewers) and the jury (representatives from each nation participating in the competition. As such, a nation can fail to win the most votes from either or both the jury and televote systems and still win. I was curious to see how often since the joint system was put in place in 2009 all three winners were the same. So, I loaded up Eurovision World (a fan archive of Eurovision contest history) and pulled the data into a spreadsheet.
After considering free ArcGISOnline, I decided to use Leaflet since I have a basic understanding of JavaScript and felt more familiar with writing the code myself. I figured I’d program the map using simple JavaScript and HTML and host the site on GitHub Pages. Also, as someone with Ukrainian heritage, I admittedly felt biased toward the Kyiv-originated open-source site. I pulled up as many tutorials as I thought would be relevant, loaded in a basic tile map, and got to work.
My idea for the map was that the user would see markers, one for each year of the competition from 2009 – 2024, noting the host cities. When the user clicked on one, they would see a popup with the year and the host city name, and then the winners from that year would be colored in. I decided that yellow would represent the official winner, dark blue would represent the jury vote winner, and a sort of fuschia would represent the televote winner. If the official winner also won the televote and / or the jury vote, then the country would remain yellow. I chose these colors for their distinctiveness and also because they roughly matched Eurovision’s 2022 color palette, which was based around those 3 colors.
Adding the markers and popups were easy, and thanks to a Leaflet tutorial, I was able to separate the tilemap layer from the label layer so the markers and color fills wouldn’t obscure the nation labels.
My first big hurdle arrived with adding the country data so I could add in the colorfill since I didn’t want the map to be crowded with markers. In order to fill in each specific country, I would need to pull in geoJSON geometry data, consisting in a collection of points to have the computer draw the borders. After some searching, I found rapomon’s geojson-places module, which contained a function to pull geojson information for countries by two letter country code. Unfortunately, since I wanted to keep the site setup simple, I wound up copying and pasting geojson geometry coordinates for each country into my own geojson file from the downloaded module. This was somewhat time consuming, but ultimately worked. Figuring out how to reliably change the country colors on marker click was a little more challenging considering that the geojson information isn’t inherently accessible after adding it to the map. After much Googling and scouring Stack Exchange, I figured out how to create a Layer Group and change the fill colors per year there.
For finishing touches, I needed to decide where to focus the map. This was especially tricky considering that I not only had to account for Israel being involved in the competition, but also Australia. While these inclusions spark a vigorous debate as to “What is Europe, really?”, I had to decide whether I wanted to show every country on load and have the markers blend into each other more, or focus on most of the countries and have the markers be a little clearer (thanks again for hosting twice in the same location in the past 15 years, Sweden). In the end, I decided on the latter. I also decided to add specifically which country and song won which vote into the Host City popup to aid in map navigation and also include more context behind the win.
Along the way, I found myself adding more details to my to do list – update the markers, add in the other participating countries per year, have each country have a pop up including their song per year – but in the interest of time, I decided to ship the map once my initial plan was done. GitHub Pages also takes a considerable amount of time to deploy the first time, so I definitely wanted to give extra time for troubleshooting in case it failed.
For the current minimum viable product, when you open the map, the popup for the 2009 Moscow competition is displayed, and Norway, winner of all three categories, glows yellow. The idea is that the user will then follow the gold path to the next marker in chronological order, since the winning country hosts the next year’s competition. The only exception is reflected in 2023, where runner up and jury vote winner UK hosted since the winner, Ukraine, could not host due to the war with Russia. The user would have already passed by the one Ukrainian marker at that point, and would ideally be drawn toward the only UK marker in the dark blue filled country.
Some improvements I would like to make:
- Add in the participating countries for each year to flesh out who was in the Europe that decided the winners, and lead the audience to ask why.
- Change the marker appearance and size. As previously mentioned, Sweden hosted two competitions in Malmö in the past 15 years. Add the Copenhagen competition and you have three markers practically overlapping unless you’re zoomed in on Sweden and Denmark. I was originally also going to change the marker appearance to include the logos from each competition, but refrained due to copyright concerns. Replacing the markers with empty hearts – a nod to Eurovision’s logo – may be a better move.
- Perhaps add a line between each of the competitions chronologically to aid the user
- Add a legend for the color scheme
- Automate the popup population for the host cities
- Add in accessibility improvements (i.e. fine tuning the color palette, ensuring I hav ealt text, etc)
- Figure out how to remove Crimea from Russia’s geometry
- Update the README
Issues inherent to this map:
- Pulling someone else’s geoJSON geometry means that I am forced to use their defined boundaries. For example, as mentioned above, Crimea is included in Russia’s geoJSON geometry. I need to learn how to either pull this data myself or edit this data to be more cognizant of contentious borders.
- Similarly, hard coding the geoJSON geometry means that this map cannot reflect any changing borders without me going in and updating the coordinates manually.
- My premise of “highest jury / televote score” may be slightly misleading – just because a song “won” one of these categories does not mean that they won by a large percent, or even that they placed higher than every other song except for the actual winner. Furthermore, some years the jury vote and televote are at opposite ends of the spectrum, with most of each votes going to their respective songs, and sometimes the highest jury vote or televote counts aren’t that far apart. It would be easy for someone with, say, an anti-jury bias to take a look at the map for the 2023 contest and argue that the jury “rigged” the competition in favor of Sweden over the televote winner Finland when in reality, the televote totals between Sweden and Finland were not far off. My current plan to improve this point is to add in difference in points for that particular category from the other winners.