A dot matrix as an animated data chart

Data Visualization

Dot-matrix displays have a nice retro-futuristic look to them. Here is an animated data chart I made based on this look. The chart shows the result of the federal parliament election in the German federal state of Hessen on the 28.10.2018 and compares them to the previous results of 2013.


(Note: the animation may take a moment to load)

It can clearly be seen that the two parties currently governing in Berlin, CDU and SPD, lost a lot of votes. Large gains can be seen for the Grünen (GRU), an ecological party, and the AfD, a right-wing populist party. After this election chancelor Merkel from the CDU announced that she will not be candidating for another mandate.

Obviously this data chart is more about experimenting with an interesting visual style than about legibility and precision. Party names had to be abbreviated (AND stands for „Andere“ meaning „others“) and values had to be rounded.

I made this animated chart with the open source graphic programs Inkscape and Gimp. First, I constructed the individual frames as vectorgraphics in Inkscape, reusing as many elements as possible. Then I exported them as PNG files. These I loaded as layers into Gimp. I optimized the layers for gif using the animation filter (Filter → Animation → Optimize for gif). This leaves only the differences between individual frames as layers, which makes the final file considerably smaller. Then I tweaked the frame durations to result in a fluid motion. I opted for a linear acceleration and deceleration for the buildup and teardown of bars. This results in a slight „trampoline“ effect with slower motion at the start and end. The appropriate frame durations for this I calculated in a spreadsheet. Finally I exported the animation as a gif from Gimp.

Data sources:

2018 election results for Hessen, preliminary: https://statistik-hessen.de/l_2018/html/BVII2_3_5j18.pdf?0.6230891933869832

2013 election results for Hessen: https://statistik-hessen.de/l_2013/SLand2.pdf

Seating order (left to right) in the Hessen parliament before 2018: https://hessischer-landtag.de/sites/default/files/scald/files/25Sitzverteilung_Stand_August_2018.pdf