Datawrapper – Vollständiger Guide

Datawrapper ist ein browserbasiertes Datenvisualisierungstool, das ohne Programmierkenntnisse responsiv eingebettete Charts, Karten und Tabellen erzeugt und sich als Industriestandard im Datenjournalismus etabliert hat.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger Synonyme / Auch bekannt als: Datawrapper.de, DW (interne Abkürzung)

Was ist Datawrapper?

Datawrapper wurde 2012 von Mirko Lorenz, Gregor Aisch und anderen Datenjournalisten in Deutschland entwickelt und ist heute das meistgenutzte Chart-Tool in europäischen Nachrichtenredaktionen. Es wird von Spiegel, Zeit, FAZ, NZZ, BBC, New York Times, The Guardian und Hunderten weiteren Medien eingesetzt. Das Besondere: Charts werden als einbettbare iframes exportiert, die sich automatisch dem Bildschirm anpassen (responsiv), barrierefrei sind (Screenreader-kompatibel) und direkt im Browser ohne Installation erstellt werden.

Erklärung

Der viergeteilte Workflow: Datawrapper strukturiert den Erstellungsprozess in vier klar getrennte Schritt:

1. Daten hochladen: Daten können direkt eingetippt, als CSV-Datei hochgeladen, aus Google Sheets verknüpft oder per URL importiert werden. Datawrapper erkennt automatisch Datentypen (Zahlen, Datum, Text) und zeigt eine Vorschau. Wichtig: Die erste Zeile sollte Spaltenüberschriften enthalten. Lange, schmale Tabellenformate (tidy data) sind oft besser als breite Pivot-Tabellen.

2. Diagrammtyp wählen: Datawrapper bietet alle gängigen Chart-Typen: Balken-, Säulen-, Linien-, Flächen-, Streudiagramme, Dot Plots, Arrow Charts, Tortendiagramme, Choropleth-Karten (mit eingebetteten Geodatensätzen für Deutschland, Europa und die Welt), Symbol-Karten, Lokator-Karten, Tabellen und Heatmaps. Das Tool empfiehlt den passenden Typ basierend auf der Datenstruktur.

3. Gestalten und verfeinern: Dieser Schritt ist der umfangreichste. Möglichkeiten:

• Farben: Vordefinierte Farbpaletten oder eigene Hex-Codes; barrierefreie Paletten sind voreingestellt
• Beschriftungen: Direkte Beschriftung von Linien, Balken, Datenpunkten; individuelle Formatierung
• Annotationen: Markierungen, Pfeile, Textboxen direkt im Chart
• Achsen: Manuelle Grenzen, Logarithmisch, Beschriftungsintervalle, Einheiten
• Tooltips: Eigene Tooltip-Templates mit Markdown und Variablen
• Hervorhebungen: Einzelne Datenpunkte oder Zeiträume betonen

4. Veröffentlichen und einbetten: Charts werden als iframe-Code für Web-Einbettung exportiert, als SVG oder PNG für Print, oder als PNG-Sequenz für Social Media. Datawrapper hostet die Charts auf eigenen Servern; Updates am Datensatz propagieren automatisch (Live-Link zu Google Sheets).

Datawrapper Academy: Die offizielle Dokumentation und Tutorial-Seite (academy.datawrapper.de) ist eine der besten Ressourcen für Chart-Design überhaupt – unabhängig vom Tool. Die Tutorials erklären nicht nur die Bedienung, sondern auch die Visualisierungsprinzipien dahinter.

Beispiele

1. Wahlnacht-Grafiken: Deutsche Redaktionen nutzen Datawrapper für Live-Balkencharts, die sich mit eingehenden Ergebnissen automatisch aktualisieren (Google-Sheets-Verknüpfung).
2. Pandemie-Karten: Landkreis-Karten mit 7-Tage-Inzidenz, täglich aktualisiert und in Artikel eingebettet.
3. Datentabellen: Interaktive sortierbare Tabellen mit eingebetteten Mini-Charts (Sparklines) für Finanz- und Wirtschaftsdaten.
4. Dot Plot / Range Plot: Vergleich von Werten mit Spannweiten – ideal für Umfrageergebnisse mit Konfidenzintervallen.
5. Lokator-Karte: Schnelle geografische Einordnung eines Nachrichtenorts auf einer stilisierten Karte.

In der Praxis

Kostenmodell: Datawrapper hat einen kostenlosen Plan (begrenzte Veröffentlichungen, Datawrapper-Branding), einen Redaktionsplan (ca. 149 €/Monat für Teams) und Enterprise-Optionen. Für Bildungseinrichtungen gibt es Sonderpreise. Viele Journalismus-Schulen und Universitäten haben Lizenzen.

Workflow-Tipps:

• Google Sheets als Live-Datenquelle verknüpfen → Chart aktualisiert sich automatisch bei Datenänderungen
• Farben und Schriften der eigenen Corporate Identity in den Team-Einstellungen hinterlegen (Basislayout)
• Annotations-Feature für den narrativen Kommentar direkt im Chart nutzen
• Tooltips mit {{ Spaltenname }} formatieren; Markdown ist erlaubt
• Mehrsprachige Charts: Datawrapper unterstützt Lokalisierung von Achsenbeschriftungen und Tooltips

Grenzen von Datawrapper: Keine benutzerdefinierten Layouts (Chart ist immer im Datawrapper-Design), begrenzte Interaktivität (kein Drill-Down, kein User-Filter), keine komplexen Netzwerkgraphen oder Sankey-Diagramme. Für diese Anforderungen ist Flourish – Guide für Journalisten und Designer oder D3.js Grundlagen die bessere Wahl.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann sollte man Datawrapper verwenden? Für den schnellen, professionellen Einsatz in Nachrichtenredaktionen und Bildungseinrichtungen, wenn responsiv eingebettete Charts in kürzester Zeit erstellt werden sollen. Datawrapper ist ideal für Standard-Chart-Typen und Choropleth-Karten. Es ist die richtige Wahl, wenn keine Programmierkenntnisse vorhanden sind oder die Zeit für komplexere Tools fehlt.

Welche häufigen Fehler gibt es bei Datawrapper? Vergessen, die Datenquelle anzugeben (Pflichtfeld im Schritt „Gestalten"), unpassende Standardfarben verwenden statt eigene CI-Farben einzustellen, Choropleth-Karten mit absoluten statt normierten Werten befüllen, und vergessen, die iframe-Einbettung für mobile Endgeräte zu testen.

Verwandte Einträge

• Flourish – Guide für Journalisten und Designer
• D3.js Grundlagen
• Tableau Grundlagen
• Barrierefreiheit in Datenvisualisierungen
• Choropleth-Karte

Weiterführend

• Datawrapper Academy: academy.datawrapper.de
• Lorenz, Mirko (2013): Datawrapper. An Open Source Tool for Easier Web Charts. In: Online Journalism Blog.
• Aisch, Gregor / Cairo, Alberto (2017): Conversations about Data Visualization. Nieman Lab, niemanlab.org.