Monday, April 7, 2014

Olympics Data Visualization

Hello again graph enthusiasts and probably more recently visualization junkies! :-D 

So it was not too long ago that I posted a generative art program I created for an information visualization class. That was an interesting project and hopefully everyone who checks it out can generate a Mondrian Broadway inspired piece to their liking. As data visualization is an interest of mine, I thought I would continue to post things that I have made either this school semester or from past semesters. 

What you see below is a visualization that I made for Olympics data, specifically for select women's track data from the London 2012 summer Olympics. Side by side are visualizations of individual women's track events: 100m, 200m, 400m, 800m and 1500m from left to right. Each column for an event has nodes/circles corresponding to the race participants in the corresponding heat. So for instance the first column corresponds to the participants in the women's 100m semifinals. I chose to exclude the first round because that was making the visualizations extremely long and stringy. Starting from just the semifinals helped keep the area of the visualization more within reason. Following an event's semifinals are the finals heat and a column showing the gold, silver and bronze results. A gray light gray line connects a racer to her corresponding entry in the upcoming round if she ran a qualifying time (all running times are recorded beneath the country nodes). 

And that's that! A nice visualization of track data that allows you to trace the progression of a racer from beginning to end. It's interesting to note that some of the racers who end up winning don't run the fastest times in the beginning, possibly because they are saving up energy until the end. What really stuck out to me were the final results for the women's 1500m. If you look at the final winning times for that event you will notice that they were much slower than times run earlier in the semifinals. Why is that? I really can't say, though my guess is that some form of group running psychology (is there such a fancy term?) had a part in it. Some racers may start off slower making the others feel that they in turn can go slower on the pace so long as they are within close distance of the leaders. That can in turn lead to tightly packed groups of runners leaving ones boxed in the middle with little choice in the matter. But who knows.....

For those who like programming and geeking out over all of the implementation details, let me tell you that it took a while to get it to look this nice. I first copied and pasted the data (obtained from the New York Times) into Excel to clean it up, and then used some Java programming to make it into nice arrays for what was ultimately my JavaScript implementation. I used the html5 canvas to create the lines and draw out all of the country flags. I had to manually rename some of the country names of the icons I downloaded for my program. Getting the right spacing between lines and line lengths also took some tinkering. The flag icons sources are as follows: 

The flag icons for the Virgin Islands, Ivory Coast, Marshall Islands, Central African Republic, Democratic Republic of the Congo, Fiji, and Saint Vincent and the Grenadines were obtained from www.freeflagicons.com. All remaining flag icons were obtained from www.vectorfantasy.com.

So yeah... feel free to click on the picture to get a better look at the data and hopefully learn something. :-)

















NOTE: If you would like to see a larger version of this image with magnifying capabilities for close-up detail, please check out my google+ dataviz collections page: https://plus.google.com/u/0/collection/kg9Bm