Animierte Datenvisualisierung

Animierte Datenvisualisierung ist die Darstellung von Daten durch bewegte Grafiken, die zeitliche Veränderungen, Übergänge zwischen Zuständen oder narrative Sequenzen visualisieren und damit Dimensionen der Daten erfahrbar machen, die statische Charts nicht abbilden können.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger Synonyme / Auch bekannt als: Motion Graphics (Daten), Data Animation, Scrollytelling, animierte Infografik, Bar Chart Race

Was ist animierte Datenvisualisierung?

Animierte Datenvisualisierungen gibt es seit den frühen Computergrafiken der 1970er Jahre, aber erst durch Web-Technologien (D3.js, CSS-Animationen) und Plattformen wie Flourish sind sie für alle zugänglich geworden. Animationen in der Datenvisualisierung dienen einem von drei Zwecken: (1) Zeitliche Entwicklung zeigen – wie verändert sich eine Variable über Zeit? (2) Übergänge verdeutlichen – wie wechselt ein Datensatz von einem Zustand in einen anderen? (3) Narrative lenken – Aufmerksamkeit schrittweise auf verschiedene Aspekte eines Datensatzes lenken.

Erklärung

Wann Animation hilft – und wann nicht: Animation ist kein Selbstzweck. Sie ist gerechtfertigt, wenn die Bewegung selbst Information trägt: wenn sich Länder in einer Gapminder-Grafik über vier Jahrzehnte bewegen, zeigt die Trajektorie den Entwicklungspfad. Wenn ein Bar Chart Race zeigt, wie Streaming-Abonnenten verschiedener Dienste über die Jahre wachsen, macht die Bewegung die Dynamik greifbar. Wenn dagegen ein statisches Balkendiagramm nur mit einer Einblende-Animation verziert wird, die keine Information trägt, ist das Chartjunk in Bewegungsform.

Die drei Hauptformen animierter Datenvisualisierung:

1. Zeitreihen-Animationen: Eine Visualisierung wird über Zeit abgespielt – jeder Frame zeigt einen Zeitpunkt. Der Play-Button startet die Animation, ein Schieberegler erlaubt die manuelle Kontrolle. Beispiele: Gapminder-Bubble-Chart, animierte Choropleth-Karte der Temperaturentwicklung, Bar Chart Race.

2. Übergansanimationen (Transitions): Wenn ein Chart von einem Zustand in einen anderen wechselt (z. B. neue Daten laden, Filterauswahl ändern), helfen Animationen dem Auge, die Veränderung zu verfolgen. D3.js-Transitions sind hierfür das Standardwerkzeug. Regel: Animationsgeschwindigkeit sollte zur Informationsdichte passen (200–800 ms für Übergänge).

3. Scrollytelling: Der Nutzer scrollt durch einen Artikel, und bei bestimmten Scroll-Positionen (Triggers) verändert sich die Visualisierung: Neue Datenpunkte erscheinen, Farben wechseln, Kameraausschnitt ändert sich. Diese Form wird intensiv von New York Times, Spiegel und Guardian für Longform-Datenjournalismus genutzt. Technisch umgesetzt mit Scrollama.js, GSAP oder Flourish Stories.

Bar Chart Race – das virale Format: Das animierte Balkendiagramm-Rennen wurde um 2017 durch YouTube-Videos viral. Es zeigt, wie sich Rangfolgen über Zeit verändern. Bekannte Beispiele: BIP der größten Volkswirtschaften 1800–2020, meistgestreamte Musikgruppen auf Spotify, größte Städte der Welt. Flourish hat das Format popularisiert.

Kognitive Überlegungen: Animation beansprucht kognitive Ressourcen. Zu schnelle Animationen können wichtige Zwischenzustände überspringen. Mehrere gleichzeitige Animationen überfordern das visuelle System. Die Forschung zeigt: Animationen sind effektiv für das Zeigen von Veränderungen, aber schlechter für den präzisen Vergleich von Werten – hierfür sind statische Charts besser (Heer & Robertson, 2007).

Barrierefreiheit: Animationen können für Menschen mit vestibulären Erkrankungen (Schwindel bei Bewegungsreizen) problematisch sein. Die CSS-Medienabfrage prefers-reduced-motion sollte immer implementiert werden, damit Animationen auf Wunsch deaktiviert werden (vgl. Barrierefreiheit in Datenvisualisierungen).

Beispiele

1. Hans Rosling – Gapminder (2006): Die TED-Präsentation mit dem animierten Bubble-Chart wurde zu einem Wendepunkt der öffentlichen Datenkommunikation – Hunderte Millionen Aufrufe.
2. Bar Chart Race – Spotify (Flourish): Animierter Wettbewerb der meistgestreamten Künstler von 2006–2023, täglich auf Social Media geteilt.
3. New York Times – „How the Virus Got Out" (2020): Scrollytelling-Artikel mit animierter Weltkarte der COVID-19-Ausbreitung von Wuhan aus.
4. Spiegel – Klimastreifen-Animation: Die bekannten „Warming Stripes" von Ed Hawkins wurden in animierter Form als Zeitachse mit Jahreszahlen aufgeklappt.
5. Reuters Graphics – Wählerströme: Animiertes Alluvial-Diagramm der Wählerbewegungen zwischen Bundestagswahlen.

In der Praxis

Tools:

• Flourish: Bar Chart Race, Gapminder-Template, animierte Karten – ohne Programmierkenntnisse
• D3.js + Scrollama.js: Vollständig individuelle Scrollytelling-Grafiken
• GSAP (GreenSock): JavaScript-Animations-Bibliothek für Webentwickler
• Adobe After Effects + Lottie: Für aufwändigere Motion Graphics, die als JSON exportiert und im Web eingebettet werden
• Datawrapper: Begrenzte Animationsoptionen (Übergänge bei Live-Updates)

Workflow-Tipp: Animationen immer auch als statisches Bild testen – wenn die statische Version die Botschaft nicht transportiert, ist die Animation oft eine Krücke. Die Botschaft muss zuerst im statischen Chart stimmen; die Animation verstärkt sie dann.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann sollte man animierte Datenvisualisierungen verwenden? Wenn die zeitliche Dimension oder die Bewegung selbst Information trägt, wenn ein interaktives Web-Format vorliegt (keine Print-Ausgabe), und wenn die Animation die Aufmerksamkeit des Publikums auf die Kerndaten lenkt statt davon abzulenken. Für Print, PDF und statische Berichte sind Animationen ungeeignet.

Welche häufigen Fehler gibt es bei animierten Datenvisualisierungen? Zu schnelle Animationsgeschwindigkeit (wichtige Zustände werden übersprungen), fehlende Pause/Play-Kontrolle für Nutzer, keine prefers-reduced-motion-Implementierung, Animationen als reines Stilmittel ohne Informationsgehalt (Chartjunk in Bewegung), und fehlende statische Alternative für nicht-interaktive Kontexte.

Verwandte Einträge

• Flourish – Guide für Journalisten und Designer
• D3.js Grundlagen
• Liniendiagramm
• Bubble Chart
• Storytelling mit Daten

Weiterführend

• Heer, Jeffrey / Robertson, George (2007): Animated Transitions in Statistical Data Graphics. In: IEEE Transactions on Visualization and Computer Graphics, 13 (6), S. 1240–1247.
• Segel, Edward / Heer, Jeffrey (2010): Narrative Visualization. Telling Stories with Data. In: IEEE Transactions on Visualization and Computer Graphics, 16 (6), S. 1139–1148.
• Cairo, Alberto (2019): How Charts Lie. New York: Norton.