How We Visualized 112 Years of Olympic Games

After reading about the visualizing.org challenge to create an interactive visualization for the Olympic Summer Games, our current intern Christian Gross accepted the challenge and took it upon himself to create a visualization, applying the new design and development skills he got while staying with us.

His visualization looks back at the 112 year history of the games, which were first held in the city of Athens in 1896. His visualization tries to convey their evolution and to provide an overview of the participating nations, the medals they won and the sports they were most successful in. Here’s how Christian experienced his work on the challenge, what obstacles he had to overcome and what he has learned by doing so.

The Brief

The competition brief was to design a visualization about the Olympic Summer Games. The deadline was set for the 27th of July, which meant that I had merely two weeks left to complete the project, when I started working on the project in the beginning of July. The rest of the briefing was kept rather open providing only an exemplary visualization piece by the New York Times and some suggested data sources to start with.

The Idea

My initial idea was to compare the individual sports visualizing differences in the average age per sport for the competing athletes. Though, after having a first look into the existing data sources I had to give up on the idea because the data on the athletes age was to incomplete to craft it into a meaningful visualization. The idea I settled for was derived from the greek mythology and the history of the Olympic Games.

The origin of the Olympics is shrouded in mystery and legend. One of the most popular myths identifies Heracles and his father Zeus as the progenitors of the Olympic Games. According to legend, it was Heracles who first called the Games “Olympic” in reference to the mythological Mount Olympus – the home of the gods and the highest mountain in Greece – as a strong symbol incorporating the spirit of the games.

The story of Mount Olympus inspired me to apply the metaphor of a mountain to my approach on how to visualize the accumulation of medals for each nation over time. The concept I then came up with generates unique looking images for each nation by layering all the medals a country has won over time on top of each other while sorting them by sports, thus creating a bar chart resembling a mountain range built out of stacked olympic medals.

The Data

I decided to use sports-reference.com/olympics as the data source for the project, because the site was well structured and also offered some of the data as downloadable CVS files. After some initial tests on the data, I sketched out the complete data structure needed for the visualization consisting of informations about the games, the sports and each individual country. I wrote a handful of python scripts to fetch all the medal-counts and information for each country sorted by year. The result was a collection of 137 separate country data files in the JSON format which I merged together into one big file.

The Design

The next step in the process was to test the dataset and look for emerging patterns. My initial plan was to map each sport to a fixed position inside the graph, so that the user could easily compare rankings in one sport across different nations.

What sounded like a good idea at first was quickly revealed to be visually unsatisfactory, for it resulted in to distracting graphs that looked like there would be data missing, since not every country had won medals in all kinds of sport.


After reconsidering the placing of each sport, I came up with the elegant and simple solution to sort each sport by the medal count and arrange them from the center outwards, thus showing which are the top sports for each country while reinforcing the metaphor of growing mountains.

With the gaps in the graphs closed, the next step was to do a ranking of all the countries. After reading how the official ranking of the IOC works, I implemented the system which weights the countries by their gold, silver and bronze medals count to conclude the ranking list. Using this system I develop the first working prototype of my visualization with the help of the Javascript framework D3.


The prototype also presented me with several new challenges. The first thing I realized was that the total amount of american medals would break the scale boundaries of the visualization. I came up with three different ways to handle the issue: First, I could rescale the boundaries, but that would mean to lose the details in the countries with a small medal count. Second, I could use a logarithmic scale. Or third, I could take advantage of the situation by including the break to add a unique touch to the visualization. I decided to go with the third possibility, letting the bar break through the upper boundary, thereby conveying the remarkable strength of the US in the athletics field in an even more engaging manner.

Info

Furthermore, I tried to keep the design of the visualization as clean and simple as possible in order to keep the communication on a clear and focused manner and support the idea of the metaphorical mountains. Therefore I limited the use of color to labeling of the selected sports and to indicate the newly won medals in the currently selected Olympic game. I also limited the user interaction to allow only the possibility to change the year of the game and to highlight a chosen sport across all countries.

The Conclusion

It was a great project to start, test and improve my skills in D3 and Python. I learned a lot about data gathering and how to work with, transform and verify the data. The timeframe of 2 weeks, working mainly on the side of the normal daily business, was really quite challenging and maybe even a little bit to short. In the end I wish I would have had just a little more time to work on it, maybe even adding some more features like an overview of all the newly won medals for each country and a detail view of each sport, so that the user can understand the IOC ranking a little bit better.

Finally, I have to thank the whole Interactive Things Team for supporting me!

How We Visualized 112 Years of Olympic Games Christian Gross studies interaction design at the University of Applied Science in Potsdam, near Berlin and is currently an intern at Interactive Things.

Wanna have your work featured here?
Submit a link!

Share this article

Subscribe for more

Give Feedback