info_viz

Information Visualization

Interactive Visualization of Olympic Swim. data

Click here to try it

Time: Sep'12 - Dec'12
Design Methods: Interaction Design, Info Visualization, Prototyping, Project Management
Tools: Protovis, Photoshop
Link: Visualization
Downloads: Project Report


For the final project for one of our class we designed an interactive visualization for summer Olympic Swimming events.


Problem

Visualize Summer Olympic data for Swimming event from 1896 to 2008.


Our solution

We have visualized the number of participating countries, medal winning countries and their medal count for each year from 1896 to 2008. We also added filters for all three types of medal. User can toggle all types of medals on and off and can sort them individually. We used data provided by The Guardian.


Process

We started this visualization by brainstorming ideas and doing paper pencil sketches. Once we all agreed upon a design, we made a sketch on photoshop. We refined this sketch too for nine times because of the limitation of the system that we were using to build it. We used Protovis for creating visualization.

One of the biggest challenges for us was to accomodate missing data. The original data did not have any value for the countries that either did not participate in a given year or participated but did not win any medal.


System Description

Our visualization was made using Protovis to display the data and HTML/CSS to style the page. Since our group had extremely little knowledge of Protovis, our ultimate visualization was limited in comparison to our design sketches.


A. Line Graph

We decided to use line graphs because they are helpful to see the changes in data over time and user can compare these changes for more than one countries. The line graph shows total medal counts over time for selected countries. Countries are selected via drop down lists on the left, and each country is represented by a different colored line on the graph. Up to four countries can be selected at once in order to reduce confusion that too many lines might cause.


line_graph
Line Graph

B. Bar Chart

Bar charts are used to allow comparison for total and individual medals between different countries. This data is well within limits so horizontal bar chart is a good option vizualize this information. Also our bars are split into boxes so that user can count total as well as individual type of medals won by a particular country.

Filters

The data can be further filtered on the side by selecting/unselecting each of the three medal types to appear on the chart. The bars can also be sorted according to total medals, total gold, total silver, or total bronze.


bar_chart
Bar Chart

C. Pie Chart

The pie chart on the right of the page reflects the years selection shown in the line graph, giving overall participation information for that period. The three wedges represent a count of the countries that medaled, that participated but did not medal, and that did not participate. The counts are printed within the pie chart itself, and the legend indicates which group the colored wedges represent. This chart is how users will be able to see the popularity (in terms of participating countries) of the sport in a given year.



pie_chart
Pie Chart

Putting them all together


Other Design Decisions

We were motivated to look for limitations in our data by Fishkin and Stone’s work with dynamic queries. Missing data can give just as much information as traditional data points can. One design decision we made from the beginning was to somehow make a distinction between countries that participated and did not medal vs. countries that did not participate in a given year, even though the medal count for both would be zero.


Group Members

Greg Cunningham, Anand Geetey, Morgan Morel, Rachael Ludec