Purpose and ParametersThe background to the project is framed by the contest and the opportunity to collaborate with a good friend of mine, Andrew Witherley, who is a skilled programmer and somebody with whom I have worked for a number of years in the past. We've been looking for an opportunity to work on a piece together in a non-client environment and so this was ideal. The contest's brief was very open - “We challenge you to use data and design to visualize the Olympics, helping us understand and enjoy as we watch” - and so this gave us a blank canvas to decide on the data story we wished to focus on. There were a number of ideas flying around but one of the most fascinating (and achievable) directions surrounded the curiosity of how much faster people are these days compared to athletes down the years. How have enhancements in coaching, technology, sports science, training and physique influenced the improvement in performances? And so the initial purpose of this project was to create an elegant, exploratory interface that allows users to learn about how medal results for different speed-based Olympic sporting events have improved across every summer games in which they have been held. In terms of the influencing parameters surrounding the project, the main factor was the timescales for the contest. Whilst it was open for about 5 weeks, we really only had chance to work on things for the latter two weeks and even then it was rather irregular. The intended target audience would really be anyone with an interest in the Olympics but specifically those with a more analytical slant looking to learn something new rather than just digesting eye-candy - after all the Games would be (and has been) flooded with so many visualisation and infographics pieces.
DataAcquisition – With a clear idea of what we required, the best source of athlete, result and event based data was found on the excellent databaseOlympics, which has huge repository of data for all Olympic Games from 1896 to 2008. To extract the data we imported it from the source URL using Google Spreadsheet and the formula '=ImportHtml("http://www.databaseolympics.com/games/gamessport.htm?g=47&sp=ATH"; "table";0)', repeating for each year and sport. We extracted data for all sports that involved time-based measurements for the results, rather than those that are based on points, distance measurements or tournament style contests. This narrowed down the sports to: Track Athletics, Canoeing, Cycling, Rowing, Swimming and Triathlon. Examination – An inspection of the data revealed a few issues that we would have to deal with early. The different sports and the events within each sport have changed over the years so there were some inconsistent datasets. We decided to eliminate any event that wasn't held in 2008 and those that have been held fewer than on three occasions (as there wouldn't be much comparable data to work with). Also, there were pockets of records for which no results were recorded or the results were estimated and a few that seemed questionable in accuracy (perhaps input errors of wrong times or years). Another issue was the challenge of handling time data (especially formats) which always seems to bring so much baggage with it as it moves from one tool to the next. This was particularly a problem with the problem of dealing with the date 1896 in Excel and Tableau (I understand this can be resolved but it did cause a problem initially). A further problem, which materialised too late to undo, was the failure of Google's Spreadsheet import routine to cope with non-standard text characters such as á or ö in many athletes names. Transforming Data – a certain amount of data cleaning was undertaken to resolve some of the quality issues identified above, except for, at this stage, the athlete name problems (which affected 400+ records) - due to the time restrictions it was decided that this would be tackled later if possible. Further transformation was undertaken to put the data into shape fit for analysis and fit for connection to the web. This included forming a calculated field of the result time in seconds to facilitate the creation of an 'index' which would reveal the % improvements across an event based on changes compared to the slowest result. This index therefore enabled comparison within and between events and sports. Team-based events (with multiple medal winners) were combined in to a single record. After all the data treatment we were left with just four sports: Athletics, Canoeing, Rowing and Swimming. Consolidation – We decided not to acquire any other data but we did seek to consolidate our raw material with a bank of images for country flags and event posters, which would be intended for use in the final design. Visual Analysis – This was conducted using Tableau to familiarise with the range and distribution of values for each event/sport, understand design factors such as axis parameters, learn about which events were for both genders/just one and generally learn about the data in a more visual setting.
There were a few curious results (such as the men's 3000m Steeplechase) which, after investigation, were down to inconsistent distances being run in some of the earliest events. The most confusing data surrounded some of the Canoeing events which revealed time inconsistencies around the 2000 Sydney games (much slower) but there were no apparent answers for this so we decided to leave them unchanged.
We were now very clear about the physical properties of the data we had to work and an early concept for how each variable would be deployed was soon apparent: Year (axis), Country (for analysis and detail for annotation), Sport (selection), Event (selection), Gender (filter), Athlete (detail for annotation), Result Time (axis, detail for annotation), Medal (data marker, series, filter).
Data StoriesThere were several different ways of slicing our analysis and visualising the data on this subject so we needed to demonstrate a clear editorial focus. Some of the best visualisations are based on the type of questions that might pop up in a pub conversation between friends. We wanted to create an exploratory tool that allowed users to pursue queries such as “I wonder how much faster the 100M medallists are now compared to the past?” and be able to find out further information about all the relevant events, how the patterns compare for the different medals, what % improvement in time has been experienced, which events have improved the most and the least, who were the athletes who won the medals etc. Additionally, we wanted to facilitate comparison between the progress of men and women: is one improving more than the other? Whilst we knew from the data that women were slower compared to men across the events, were they showing evidence of getting closer to men in any event?
Design ConceptingData representation - The data representation was intentionally straightforward, presented using the visual variable of position on a common scale to maximise the clarity of the visualisation. The markers would resemble medals (albeit transparent) and coloured accordingly, then each point would be joined into a line chart to show the pattern and progress of improvement. Below are a couple of the early concept sketches.
The x-axis would be the years of the Olympics games and the vertical y-axis would be the result times. The main decision made here involved the plotting of smaller values towards the top. Whilst this is counter-intuitive for most displays of line charts, actually for issues of speed it is more natural to think of better as being higher. Metaphorically it also 'feels right' that the faster results appear to reach the x-axis before the slower ones, as if you were looking at the finish line. We packed the results into a frame based on a dynamic axis which just had a buffer of 1% above and below the fastest and slowest results.We experimented with different medal sizes and line widths to get a balance between visibility and resolution of the data. There was a technical barrier differentiating in marker shape between male and female results but because the times were always so different (and women's results consistently slower than men's) this didn't prove a problem ultimately. As well as the data on the line chart, we wanted to include details of the races for users to lookup in a pop-up box and provide a range of summary statistics to form some deeper analysis of the events and across the sports:
- The top 5 countries to win medals in each event - presented using a simple look-up table with medal icons
- The % improvement of each event and its most comparable events (by gender) - using a panel of small multiples to aid efficient comparison
- Top 5 largest % improvements of events (by gender) - look-up table
- Top 5 winning margins in events (by gender) - using a horizontal dot-plot
The colours of the medals were used for the line/medal markers on the main chart and a non-patronising (the lazy use of blue vs. pink) palette of dark blue and orange was chosen for the summary stats to differentiate genders. The grey-shaded panels just helped to frame the individual charts without battling for attention with the data. Interactivity - The main interactive features involved allowing the user to change their sport, event and data selection, with toggle filters for medals and genders. Additionally, a hover (athlete, result) and click (pop-up of race details) event was programmed for interacting with the main chart. Here's an early technical version to get the concept working initially:
In an ideal world, with extra time, we intended to create a sort button to switch between 'by year' and 'by fastest time' view and we would have liked to have incorporated a visual 'ruler' when you hovered over a marker to create a horizontal line allowing you to see the faster and slower results easier. The summary statistics and a view of the raw data were included using a neat concertina device to show/hide these extra elements. Arrangement - The main decisions around arranging the design involved whether to go for a portrait (years on the Y, times on the X) or landscape layout (years on the X, times on the Y). We correctly (in my opinion) settled for the latter. We also had to decide where to position the selection tabs and filters, eventually placing them across the top. All this would be packed into a central web page dimension of 960px wide to maximise screen compatibility. As mentioned above, gridlines, tickmarks, axes and axis labels, borders and tabs were all reduced as much as possible in terms of their visual prominence. Annotation - The annotation was important to maximise the user assistance. We included a brief introduction to allow people to get on with using the visualisation but then included a further 'about' page with much more detail about the function, intention and background to the project. The font throughout was 'Myriad Web Pro' apart from the title which was created using 'Kozuka Gothic Pro'.
Construction and EvaluationIn terms of the tools used to construct this piece:
- As already mentioned Google Spreadsheet was used to extract prepare the data
- Excel was used for further cleaning and transformation
- Tableau to conduct the visual analysis and create the summary statistic graphic elements
- Not all browsers were unfortunately compatible so it targets HTML 5 compatible browsers including Chrome 20, Firefox 13, Safari 5.1, Internet Explorer 9.
- Have we reasoned our design choices effectively?
- Have we created accessibility through intuitive design?
- Are all visual properties deployed with deliberate meaning and serving a purpose?
- Is the form and function appropriately balanced?
- Is the reward of reading the visualisation greater than the effort to read it?
- Have we checked the accuracy of the data?
- Understanding (10 Points): How effectively does the visualisation communicate? How well does it help you make sense of this issue?
- Originality (5 Points): Are the approach and design innovative?
- Style (5 Points): Is the visualisation aesthetically compelling?