Olympic Medals By Year and Country

Write Up

For this project we started with a dataset that was interesting to our group and answered questions that we wanted to know through an interactive visualization. The dataset we chose was one that recorded the number of gold, silver, and bronze medals awarded to every country from 1896-2014 for the summer and winter Olympics. We chose to use a dynamic world map to display how many medals each country won depending on the year that the user selected. The first feature we wanted to implement was a dynamic hover feature that displays only the award information relevant to the country that your mouse is hovering over. We also wanted to have the map display a color gradient that allows the user to quickly see which of the countries performed the best and which countries performed the worst, or didn’t participate. To help the user understand the color gradient, a legend was implemented to show what darker and lighter hues of the selected color meant. We also wanted ease of access to countries that were smaller on the map and more difficult to mouse over, for this we implemented a zoom feature that allows the user to zoom in and out of the map. We added a color picker to allow the user to select the color of the map in case other colors were harder to see. Lastly, we implemented a feature that shows the countries that accumulated the most gold, silver, and bronze medals respectively.

We arrived at these core set of features be asking ourselves what we would want to know about the information and what tools would be useful to find answers to our questions.

Alternatively, we considered using a globe to display our information but a flat 2-D drawing of a map displayed the information more effectively to the user by showing the entire world at the same time. Having a spinning globe would also mean that the user would have to wait to select on the country of interest when it was visible on the screen, but with a 2-D world map the user can instantly find their country of interest and gather the information they wanted much faster.

We first had to find an implementation of a dynamic map that implemented a drawing feature that drew a different map depending on an input. We learned how we could modify our map to change depending on the year that we selected. From there we had to figure out how to color the map with a color gradient and display the legend to show what the colors meant. After that we added the zoom functionality and the description of the visualization. The overall project took 40+ hours of work. The most time consuming parts of the project included adding features that interacted with the map because some refactoring was needed for each feature.

Victor: Set up the initial project template, implemented the color picker, added boostrap styling to the final version, added project to be hosted on github pages, and implemented medal rankings. Also worked on documentation.
Gabe: Created the drop-down menu that redrew the map depending on the year the user selected. Created the legend that changes depending on the selection of the color picker. Also worked on documentation.
Mitch: Implemented zoom in and zoom out functionality, did all the data wrangling and cleaning, found the topojson file that included country names. Also worked on documentation.