Since the 50's, there has been an annual song contest involving many European countries. It's a fairly bizarre event, but one of the most interesting things about it is the voting system. Countries vote for each other's songs - they can give their top 10 songs 1-8, 10, and 12 points. Most of the time in the contest is taken up with the voting process (although they have streamlined it a bit in the past few years), and it's fascinating to watch the political landscape in Europe being played out in the voting. For example Greece and Cyprus always give each other maximum points, the Nordic countries always vote for each other, the large Turkish immigrant population in Germany means that Turkey always gets high votes from Germany, which are not really reciprocated.
All this makes a for rich source of visualization data. I had to take the data from a few different places, so there may be a few gaps or inaccuracies. Please let me know on our forum if you find any.
Here's a live visualization.
The darker the intersection between countries, the more votes they give to each other. Hovering over this, along with the bar charts, you can see the cultural anomalies. For example the viz below showed a very dark intersection between Greece and Cyprus. Hovering over that, we can see the average votes Greece received from all countries for each year they made the finals, and we can also see that, regardless of the votes the other countries gave (in theory an indication of the song quality), Cyprus gave Greece maximum votes every year they were allowed to vote
Here's a brief summary of how this was built.
The data comes directly from a google sheet, and the country ISO codes come from a fusion Table. I use Database abstraction with google apps script to pick up the data from both these sources asynchronously as in these snippets.
crossfilter.js was new to me for this visualization. It allows easy filtering of data for the interactive bar charts. I plan to use this heavily in the future.
dc.js is a library to simplify chart creation using d3.js, combined with crossfilter.js. Although I'm comfortable with d3.js, I found it hard work to get what I wanted from dc.js. The good part is that you get automatic re-rendering when you manipulate the underlying crossfilter dimensions,and a lot of the d3.js busy work for creating charts can be avoided . On the other hand, some basics like grouped barcharts and rotating grid labels are not there natively. Of course, since we are using d3.js underneath, any reformatting you can think of is possible, and with the use of composite charts you can create more complex chart types. However once you start having to use d3 to reformat your charts, you may as well use it from the start. At this stage, I'm not sure if I'll use this again - there are a number of alternatives such as nvd3 and dimple.js, although I like dc.js conceptually.
The main visualization is done with d3.js, and is based on Mike Bostock's Les Miserables co-occurrence matrix.
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > d3.js >