September 23rd, 2013

Mapping Electionland

I created a whole new kind of election map for the German Bundestag elections 2013 for ZEIT Online. Instead of showing the electoral districts results on a geographic map, or in a table, I decided use the data to map a new land: Electionland (german version | english version), where all the districts which vote in a similar way are located nearby. This new kind of map allows us to see a Germany grouped by lifestyles, preferences and attitudes.


Here is some background on how I created this map. First of all, I need to normalize the data and make the parties comparable. To this end, I applied a z-score normalization on the data. In short, a z-score centers the data (so the average value is at zero), and it rescales the data, so that one standard deviation difference from the average lands at one, two standard deviation differences from the average lands at 2, etc. This makes the relative differences in voting behavior comparable, even if we compare huge parties with smaller ones.


In the map, the triangle sizes correspond to these z-scores per party; I only show the results above average – these are the “characteristic” parties for a district. Each color and angle stands for one party.

I then use scikit-learn to calculate a 2-dimensional map of the resulting “electoral district space” using Multi-Dimensional Scaling or short: MDS.


It is an algorithm that you can feed a matrix of similarities between objects (in our case, how similarly the districts voted), and it will attempt to find an arrangement that expresses these similarities as good as possible on a two-dimensional map. (For me, also a nice flashback to my 2005 B.Sc. Thesis, where I investigated MDS and related algorithms quite a bit :)

Some words about the interpretation of the map: First of all, it is important to note that the rotation of the map is a purely aesthetic choice. The MDS algorithms defines only a relative space, where the positions of all elements with respect to each are important, but not on absolute axes. But within the data, some interesting axes seem to emerge nevertheless: top-to-bottom seems to be correspond quite well to the traditional left-to-right spectrum. The left-to-right axis to interpret is a bit trickier but definitely seems related to social status or income. Also interesting to see how the blue AfD party — a newly founded euro-sceptic protest party, sort of a wild card — seems to be all over the map in the vertical center. A bit shocking also to see how there still seems to be a gap in Germany (the island on the left in pretty much exclusively ex-east Germany), with only Leipzig and Postdam (yay) bridging the gap. A note on the huge orange triangles for the Pirate party – actually, their results were not that great, but the enabled them to be very much above average in some districts.

A few words on workflow: For the frontend, I used my new favorite development combo of d3, coffeescript and SASS. In addition, I used the jQuery plugins select2 for the dropdowns and qTip2 for the tooltips.

The labels of the parties and the districts were actually hand-arranged in Adobe Illustrator. I first exported a rough version of the graphic generated with d3 using the very handy SVG crowbar bookmarklet. I hand then hand-tweaked the placements in Illustrator, and saved the resulting graphic as an SVG, which I then dynamically load into page using a combination of this technique with this one (to make it IE9 compatible). Because the layer names actually translate to group IDs in SVG, I was also able to identify the graphics elements from d3, and assign them individual click actions, etc. A very promising approach which I will surely explore further in the future.

You might wonder how I achieved the blurry contour line look in the background – the answer is simply (and a bit embarassingly) Photoshop :) Again, I used a rough version of the graphic, which was then blurred, levelled and edge-detected.

And, yes, it would definitely be interesting to compare 2009 and 2013, and see which districts moved around how much :) but this is tricky due to both the districts structure as well as the parties for vote not being exactly the same. Happy to share my data though, in case anyone is interested in that type of analysis :)

11 Responses to 'Mapping Electionland'

Subscribe to comments with RSS

  1. […] Wahlland 2009 & 2013 – Ähnlichkeiten im Wahlverhalten – Zeit Online (making-of) […]

  2. Visualisierungen & Daten zur Bundestagswahl 2013
    September 24th, 2013 at 11:36 am

    […] Wahlland 2009 & 2013 – Ähnlichkeiten im Wahlverhalten – Zeit Online (making-of) […]

  3. Digital Cartography [22] | Visual Loop
    September 25th, 2013 at 1:40 pm

    […] featured the ‘Electioland‘ Moritz Stefaner created for ZEIT Online (Moritz published a detailed post on his blog about this […]

  4. Digital Cartography [22] › Soci-all
    September 25th, 2013 at 2:37 pm

    […] featured the ‘Electioland‘ Moritz Stefaner created for ZEIT Online (Moritz published a detailed post on his blog about this […]

  5. Ale
    September 26th, 2013 at 9:56 am

    Hi Moritz, excellent and deep explanation for a very solid work. Thanks for sharing.

  6. francesco
    September 26th, 2013 at 10:38 pm

    Hi, thank you for this post, i had a lot of curiosity about how you implemented this!

    I was wondering about the blurred colours, the idea of using Photoshop is quite clever.

    Multidimensional scaling is still a black box for me. What do you think about radviz visualisations? Maybe they could be more transparent to understand as a concept, and maybe it could also be possible to implement them with a force layout using d3. Imagine this kind of maps, showing evolution over time with animation.

    Your note about the big orange triangles makes me think. This is the only thing in the map that i can imagine improved. If the sizes of triangles could reflect somehow the actual votes quantity, both the triangles and the blurred colours would give a better quantitative feeling of the final election outcome. But this is just a superficial consideration, since i ignore how vote relevance should be computed according to the German system. To summarise, i really love the positioning, while the triangle sizes leave me some doubts.

    Thanks for sharing this!

  7. Data Viz News [26] | Visual Loop
    September 28th, 2013 at 10:20 am

    […] Mapping Electionland | Well-formed Data […]

  8. Data Viz News [26] - Blue-Orange
    September 29th, 2013 at 8:28 am

    […] Mapping Electionland | Well-formed Data […]

  9. […] Map­ping Elec­tion­land: I crea­ted a whole new kind of elec­tion map for the Ger­man Bun­des­tag elec­tions 2013 for ZEIT Online. — Tags: btw13, visua­liza­tion, wp2013-09 — […]

  10. Till
    October 31st, 2013 at 6:37 pm

    Nothing embarrassing about it. Using Photoshop for the blurry contour line is an established and well known technique. I refer to [Woodruff2009] who called it “blurring the crap out of [it] in Photoshop”. :)

    Woodruff, A. 2009.

  11. […] with Zeit Online, and Where the wild bees are, for Scientific American, both explained in detail here and here. Are you experiencing a rise in this type of demand from news and scientific […]