This post was written by Gregor Aisch.

If I was asked for the golden rule of information visualization, it would be:

“Show the most important thing first!”

Not second or third, but first! And what is the most important thing to show about the outcome of an election? Who actually won.

In political systems like Germany’s, where we have no party getting anywhere near 50% of the vote, the usual one-bar-per-party bar charts totally fail to answer this most important question.

For example, in the following chart we can see the number of seats won by different political parties – but this does not tell us who won the election.

This is because the elections are not won by the party with the most votes, but the party who manages to get a majority of seats in parliament. And, with the exception of Bavaria and Hamburg, in Germany there’s no way to take government without forming a coalition.

The bar chart above makes it tremendously difficult for readers to figure out which coalition has won. Therefore one must calculate the total number of seats for each coalition, and compare it to the number of seats needed for a majority (which itself is the sum of each parties seats divided by two).

Humans aren’t particularly good at calculating and weighing up these different possibilities on the fly. That’s why most election reporting websites show an additional coalition view. But where is it? Right – often it is the last thing that they show, such as in this recent example from the Zeit Online:

How coalitions have been visualized in the past

In past elections in Germany coalitions have been visualized in two different ways: either as simple horizontal bar chart or as an interactive coalition calculator.

The simple bar chart (as seen above) usually shows a limited selection of two or three coalitions having a majority. One problem is that sometimes it would be interesting to compare those coalitions with other possible – but politically unlikely – coalitions, such as the CDU and the Greens in Germany.

The second problem is that excluding the coalitions that fail to have a majority eliminates valuable contextual information.

Do it yourself: the coalition calculator

An alternative approach is the coalition calculator. The main idea is to let the users try out their own coalitions and see whether or not a given coalition could have a majority.

However, this puts quite a bit of effort onto the user, who might well be checking back several times during election nights. Also the calculator only shows one or two coalitions at a time, so it’s hard to actually compare different possible coalitions.

A new approach: extended coalition charts

This isn’t exactly groundbreaking stuff, but for some reason nobody seems to have ever visualized elections this way before. The idea is to show as many coalitions as possible side by side, including the politically unlikely and those who fail the majority.

To visually separate the winning coalitions from the rest I finally decided to simply pull them apart. Since I need some more space I went for vertical bars instead.

There’s a nice side effect of showing all coalitions: when new preliminary results are coming in during election nights, the visualization doesn’t show an entirely different picture, but some coalitions simply ‘change sides’.

Since the actual total number of seats depends on the election results, I decided to label the coalitions seats with relative numbers. This means that instead of saying ‘coalition X has 70 seats’ we say ‘3 seats are missing for majority’.

Coalition maps

It was a small step from extended coalition charts to coalition maps. A coalition map shows in which election districts a coalition holds the majority of votes. To indicate the coalition I decided to go for diagonal stripes, although I don’t recommend looking at them for too long. :-)

It is interesting to compare how coalition maps vary between coalitions. For instance from comparing the two most preferred coalitions you can see a clear divide within the state Lower Saxony in the North West.

Try it out!

If you want to try out either the extended charts or the mapping mini-apps shown above, then you can grab the code via the following links. All of my examples above were created using the open source Raphaël JavaScript Library.

• Extended coalition charts and in action on YouTube
• Extended coalition charts code on Github
• Coalition maps
• Coalition maps code on Github

Note: This post is a translated version of this one.