Making of "The Fantasy Eurozone 2011"

This is my story about making


  1. Introduction: Challenges Are Beautiful

    I created "The Fantasy Eurozone 2011" to submit to a infoviz contest hosted by the Guardian. The contest is to visualise data  featured on the Guardian about current economic crisis. You can either submit full information visualisation, or "Napkin" entries which involve writing down a concept on a piece of paper for those who do not have design skills.  Even though I have close to zero design sense and skills, I decided to enter the full information visualisation category so that I can build my design skills.  I am hoping that my coding skills will compensate for my lack of design flair.
  2. We give you the data. You supply the creativity. If your entry wins, there's $5000 available in prize money.
  3. Finding A Topic: European Debt Crisis

    One of the criteria is to use the dataset featured on the Guardian's data blog. After having reviewed all the articles from the past year, I had various conversations with family and friends, some of who work in the financial industry. In the end, I decided on an article about the current Euro debt crisis that appeared on the contest page.
  4. This article was very informative describing various indicators about the euro debt crisis. The Guardian did a great job collecting various figures from Eurostats and explaining each figure in great detail. However, I found it difficult to get the big picture about the European debt crisis as a whole due to an overwhelming amount of data. As such, my aim is to visualise the highlights from this article in one page.
  5. Asking A Question:  What happens if Greece leaves the euro?
  6. The blog article also asked an interesting question, "What happens if Greece leaves the euro?" This is often associated whether it leads to the end of Eurozone as a whole.
  7. This question gave me a great idea. What if the member of Eurozone is not fixed, but rather replaceable like any other sport team? 
  8. Finding A Concept: The Fantasy Football
  9. Have you played "Fantasy Fooball"? You become a manager of your own team and pick players from various teams to form your dream team. 
  10. So how do you apply these to Eurozone? One way is to create a multi dimensional chart plotting each player's ability. For instance, 5 for pass, 2  for goal, 1 for defence and etc. Below is my paper prototype. I am glad that I did not enter to the "Napkin" category as it is very clear that my napkin entry is not so strong..
  11. Choosing a Toolset: Raphaël
  12. Next, it's time to pick a tool for the job. There are so many different kinds of infoviz libraries, some of them are HTML5 Canvas based, and others are SVG(Scalable Vector Graphics). HTML5 Canvas. There are lots of libraries which offer's some framework to use either of the format.
  13. The one I chose is called "Raphael".
  14. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
  15. Here is an animation example.