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

Generative Art

Howdy everybody! 

So this posting is a bit different from my other ones which have mostly had to do with graphs. It was in an information visualization class I'm taking that we were recently asked to create our own generative art (programs to produce artsy stuff). For my project I decided to write up some javascript code to generate Mondrian inspired art. I had always thought that his art looked like something that could be created through code, and my intuition was right. What you see below is the result of my programming labors. Every time that you click the Generate Mondrian button you get a new randomly generated Mondrian's Broadway inspired work of art. Refreshing the web page will also give you a new result. Pretty cool huh? ;D  

So how did I do it? Well, to be quite frank I didn't use any fancy algorithms in the process. My code basically involves randomly generating rectangles within an html5 canvas. The number of thin yellow rectangles/columns running from top to bottom was randomly chosen to be a number within a certain range. The same applied to the number of yellow rectangles/rows spanning the canvas from left to right. The number of small grey, red or blue squares to be drawn on each yellow rectangle was also random (constrained by upper and lower bounds as well). To make sure that the yellow rectangles did not line up together and produce thick rectangles, I only drew a rectangle on the canvas if its x or y coordinates were equal to some number modulo 2 (i.e. I made sure that there was some spacing between yellow rows and columns). The final touch was randomly generating some larger red or blue rectangles to layer on top of the rest of the canvas art. I chose a brighter color of red than Mondrian's original brick red for this final part. I thought that the generated art popped out more with this revised shade of red. If you would like to save a copy of any of the randomly generated Mondrians just right click on the image and follow the standard save image as procedure.  

P.S. If you'd like to see more artsy stuff then I'd recommend that you check out my other blog: Joys of a Craftista 
http://craftistajoys.blogspot.com/



Generate Mondrian

Practice