Kurzanleitung für die Verwendung des Datawrapper

1. DataWrapper
Tutorial
Version 0.9

2. Deutsche Welle - Tutorial DataWrapper 2
Allgemeine Einführung
• Was ist der DataWrapper?
DataWrapper ist ein frei verfügbares Open Source Werkzeug, das die schnelle, einfache
und korrekte Erstellung von Daten-Diagrammen für jedermann ermöglicht.
• Wozu dient der DataWrapper?
DataWrapper hilft Ihnen, Ihren Daten Leben einzuhauchen. In kürzester Zeit lassen sich
ansprechende und leicht verständliche Diagramme erstellen. Visualisieren Sie Ihre
Rechercheergebnisse und machen Sie Zusammenhänge sichtbar.
• Was kann der DataWrapper?
DataWrapper verknüpft journalistische Expertise mit den neuesten Javascript Bibliotheken
zur Visualisierung. Durch ein einfaches und übersichtliches Interface wird der Zeitaufwand
zur Erstellung Ihrer Diagramme minimiert. Und das alles ohne Programmierkenntnisse.
• Was kann der DataWrapper nicht?
Aktuell verfügt der DataWrapper über eine handvoll einfacher Diagrammtypen, wie z.B.
Linien- oder Balken-Diagramme. Die Umwandlung durch DataWrapper kann dabei immer
nur so sinnvoll sein, wie die eingegebenen Daten hinsichtlich Menge, Validität, Korrektheit
und Struktur.
• Beispiel-Diagramme
Balkendiagramm Liniendiagramm Kreisdiagramm

3. Deutsche Welle - Tutorial DataWrapper 3
Funktionsweise
 Einfache Nutzung
In vier einfachen Schritten erzeugen Sie Ihre Diagramme:
1. Geben Sie Ihre Rohdaten in das System ein
2. Helfen Sie DataWrapper die Struktur der Daten zu verstehen
3. Wählen Sie den passenden Diagrammtyp aus und heben Sie wichtige Daten hervor
4. Ergänzen Sie Metadaten und veröffentlichen Sie Ihr Diagramm
 Einfaches Navigieren
DataWrapper bietet Ihnen zwei verschieden Arten der Navigation an:
1. Über die Navigationsleiste am unteren Rand der Seite
2. Über das Fortschrittsmenü am oberen Seitenrand (sobald Sie entsprechenden
Arbeitsschritte ausgeführt haben)
 Einfaches Handling
Ihre Arbeit wird automatisch mit dem ersten Schritt zur Erstellung eines neuen Diagramms
gespeichert. Änderungen werden beim Navigieren durch den Erstellungsprozess
automatisch übernommen.
Die gespeicherten Diagramme finden Sie unter:

4. Deutsche Welle - Tutorial DataWrapper 4
Schritt 1: Daten hochladen
Zur Erstellung eines Diagramms auf Basis Ihrer Daten, müssen diese in das System
übertragen werden. DataWrapper bietet dafür zwei bequeme Wege an – zum einen über „Copy
& Paste“ oder indem Sie eine Datei von Ihrem Rechner hochladen.
 Copy & Paste: Markieren Sie alle Daten ihrer ursprünglichen Tabelle (z.B. Excel
oder Google Spreadsheets), inklusive Zeilen- und Spaltenüber-
schriften, kopieren Sie sie und fügen Sie sie in das Textfeld des
DataWrapper ein.
 Hochladen: Klicken Sie auf den -button unterhalb des Textfeldes.
Sie öffnen damit das Windows-Auswahlfenster. Suchen Sie die
entsprechende Datei auf Ihrem Computer und bestätigen Sie Ihre
Auswahl. Folgende Dateiformate werden akzeptiert:
Das Textfeld erlaubt auch die manuelle Eingabe von Daten. Dabei ist darauf zu achten, dass
alle Datensätze durch [,] oder [;] getrennt werden. Leerzellen müssen ebenfalls eingetragen
werden (z.B. erste Spalte).
Zum Upload bzw. zur Speicherung der Daten klicken Sie auf den - button, der sie
automatisch zum nächsten Schritt weiterleitet.

5. Deutsche Welle - Tutorial DataWrapper 5
Schritt 2: Prüfen & Beschreiben
Im zweiten Schritt werden die hochgeladenen bzw. eingegebenen Daten vom DataWrapper
automatisch interpretiert und als Tabelle formatiert.
Das Format dieser Tabelle entscheidet über die spätere Darstellung der Daten. Eine Über-
prüfung und ggf. eine Anpassung der Darstellung ist daher notwendig, um später eine korrekte
Visualisierung sicherzustellen.
In der rechten Spalte finden sich die Optionen, die zur Anpassungen zur Verfügung stehen:
 Beschreibung der Daten: Ermöglicht die Festlegung von Labeln und
Datenreihen (Details siehe Seite 7)
 Ausgabeformat für Zahlen: Ermöglicht die Auswahl von Zahlenformaten und
Einheiten. (Details siehe Seite 8)
 Quellenangabe: Dient der Angabe der ursprünglichen Quellen mit
Name (Pflichtfeld) und URL (optional)
Die URL wird als Link auf dem Namen hinterlegt.

6. Deutsche Welle - Tutorial DataWrapper 6
Schritt 2: Prüfen & Beschreiben
Formatierung
Zur Beschreibung der Daten stehen Ihnen drei Optionen zur Auswahl:
 Datenreihen in Zeilen/ Wählen Sie die Ausrichtung der Datenreihen aus. Eine
Datenreihen in Spalten Datenreihe ist dabei die Folge von Werten, die
zusammenhängend einen Sinn ergeben (z.B.
Temperaturen im Juni über mehrere Jahre).
 Erste Zeile als Handelt es sich bei der ersten Zeile Ihrer Daten um
Beschriftung die Bezeichnung der Spaltendaten, wählen Sie diese
als Label aus.
 Erste Spalte Handelt es sich bei der ersten Spalte Ihrer Daten um
als Beschriftung die Bezeichnung der Zeilendaten, wählen Sie diese
als Label aus.
In allen drei Fällen werden die Änderungen in der Übersicht entsprechend markiert und
hervorgehoben.

7. Deutsche Welle - Tutorial DataWrapper 7
Schritt 2: Prüfen & Beschreiben
Formatierung
Zur Formatierung von Zahlenwerten bietet DataWrapper folgende Optionen:
 Original beibehalten Verwendet die Eingaben ohne Formatänderungen.
Eine Eingabe von Einheiten ist nicht möglich.
 Nummern Wählen Sie die Anzahl der darzustellenden Komma-
stellen aus (keine, eine oder zwei). Tausender-Trenn-
zeichen werden immer dargestellt. Im Feld Unit
können manuell Einheiten ergänzt werden (z.B. [°C]).
 Prozente Wählen Sie die Anzahl der darzustellenden Komma-
stellen aus (keine, eine oder zwei). Die
Prozentzeichen werden automatisch ergänzt.
Währung Wählen Sie die Anzahl der darzustellenden Komma-
stellen aus (keine oder zwei). Das Währungskürzel
ist frei wählbar (EUR, GBP, USD,YEN).
Bei Änderung der Kommastellen werden Werte automatisch gerundet. Die Verwendung von [,]
und [.] erfolgt entsprechend dem Gebrauch des gewählten Sprachraums. Große Zahlen lassen
sich durch Tsd., Mio. und Mrd. abkürzen.
Die Optionen dienen nur der visuellen Formatierung der Daten. Für eine korrekte Verarbeitung
der Daten ist eine vorherige Aufbereitung der Daten unbedingt notwendig!

8. Deutsche Welle - Tutorial DataWrapper 8
Schritt 3: Visualisieren
Im dritten Schritt können Sie darüber entscheiden, wie Ihre Daten visualisiert werden sollen.
DataWrapper bietet Ihnen fünf verschiedene Diagrammtypen an. Entscheiden Sie in
Abhängigkeit von der Menge und Art Ihrer Daten, welcher Typ Ihre Aussagen am besten
transportiert. Beachten Sie dabei auch die unterschiedlichen Optionen zur Verfeinerung.
Details zu den Diagrammtypen und Optionen finden Sie auf den Seiten 10-15.
Das Layout gibt vor, welche Farben zur Darstellung verwendet werden und orientiert sich an
den Standards der Deutsche Welle.
Weiterhin können Sie Detailangaben zu Ihrem Diagramm anlegen:
 Titel: Geben Sie Ihrem Diagramm einen sprechenden Titel
(Pflichtfeld; maximal 85 Zeichen)
 Einführungstext: Ergänzen Sie Ihr Diagramm mit einer Beschreibung
(Optional; maximal drei Zeilen)
 Datenreihen hervorheben: Wählen Sie eine oder mehrere Datenreihen aus um
diese farblich hervorzuheben

9. Deutsche Welle - Tutorial DataWrapper 9
Schritt 3: Visualisieren
Diagramm Typen - Balken
Balkendiagramme dienen der Darstellung kategorisierter Daten. D.h. die Daten sind in
einzelne Gruppen unterteilt (z.B. nach Jahreszahlen). Sie können sowohl vertikal als auch
horizontal dargestellt werden.
Meistens werden die Kategorien horizontal aufgetragen (x-Achse), während die Höhe der
Balken (Werte der y-Achse) den Werten der einzelnen Kategorien entsprechen. So ergibt sich
eine gute Vergleichbarkeit der Werte.
DataWrapper bietet drei Optionen zur Verfeinerung von Balkendiagrammen an:
 Auswahl der Datenreihe Wählen Sie darzustellende Datenreihe aus, die für
Ihre Zwecke am sinnvollsten ist.
 Ausrichtung Balken Balken können horizontal oder vertikal abgebildet
werden (horizontal bietet mehr Platz für viele Werte).
 Automatische Sortierung Ordnet die Balken automatisch absteigend nach Wert
(vom größten zum kleinsten) an.

10. Deutsche Welle - Tutorial DataWrapper 10
Schritt 3: Visualisieren
Diagramm Typen – Linien
Liniendiagramme werden meistens dafür verwendet, um Veränderungen von Daten über
einen bestimmten Zeitraum zu visualisieren (z.B. Monatliche Temperaturveränderungen).
Die horizontale (x-) Achse dient meist zur Darstellung von Zeitverläufen. Auf der vertikalen (y-)
Achse werden die sich ändernden Daten abgebildet (z.B. Aktienkurse).
Veränderungen werden so leicht sichtbar und machen es möglich Trends zu erkennen und ggf.
vorherzusagen.
DataWrapper stellt Liniendiagramme immer optimal in Relation zum Umfang der Werte dar. Zur
Verfeinerung der Darstellung werden zwei Optionen angeboten:
 Baseline zero Darstellung der Grafik mit Nullpunkt. Alle Graphen
werden Im Verhältnis dazu dargestellt.
 Force Banking to 45° Richtet die Darstellung der Graphen bzw. Graphen-
abschnitte im Mittel auf eine 45°-Achse hin aus.
Beide Optionen wirken sich auf das Darstellungsverhältnis der x- zur y-Achse aus. Ihre Ver-
wendung ist abhängig davon, welche Aspekte in der Visualisierung betont werden sollen. Sie
sollten daher mit Bedacht verwendet werden. (Beispiel siehe S.11)

11. Deutsche Welle - Tutorial DataWrapper 11
Schritt 3: Visualisieren
Diagramm Typen – Linien (Beispiel)
Datenquelle: http://processtrends.com/pg_data_vis_bank_to_45.htm
Darstellung einer umfangreichen Datenreihe durch DataWrapper ohne Verfeinerung.
Der steile Anstieg des Graphen ist klar zu erkennen.
Darstellung derselben Datenreihe mit der Option „Force Banking to 45°“.
Durch das veränderte Seitenverhältnis ist der Anstieg des Graphen stark
abgeschwächt. Es zeigt sich aber auch, dass die einzelnen Anstiege
und Gefälle ein anderes Verhältnis zueinander haben als zuvor.
Beide Graphen sind korrekt dargestellt, geben aber eine unterschiedliche
Sicht auf die Werte und lassen damit eine andere Aussage zu.

12. Deutsche Welle - Tutorial DataWrapper 12
Schritt 3: Visualisieren
Diagramm Typen - Datentabelle
Die Datentabelle dient der Aufbereitung der Daten in eine interaktive Tabelle, die leicht auf
Webseiten integriert werden kann.
Auf diese Weise können Daten schnell und einfach in das eigene Layout übertragen und
einheitlich auf der eigenen Webseite eingebunden werden.
DataWrapper bietet darüber hinaus vier Optionen zur Verfeinerung von Datentabellen an:
 Sortierbar Fügt eine Sortierfunktion auf Spaltenbasis ein.
Führende Spalte und Sortierreihenfolge können
per Klick auf den jeweiligen Spaltenkopf geändert
werden.
 Responsive Optimiert die Darstellung der Tabelle für verschiedene
Bildschirmgrößen auf HTML5-Basis (z.B.
Smartphones)
 Pagination Fügt Seitenzahlen, eine Seiten-Navigation und eine
Auswahl der pro Seite darzustellenden Datensätze
ein.
 Filter Fügt oben rechts ein Textsuchfeld ein, dass die Suche
über alle Tabellenfelder (ohne Header)

13. Deutsche Welle - Tutorial DataWrapper 13
Schritt 3: Visualisieren
Diagramm Typen - Kreis
Kreisdiagramme eignen sich sehr gut dazu, Anteile einer absoluten Menge zu visualisieren
(z.B. Marktanteile an einem Produkt). Die Stärke des Kreisdiagramms liegt dabei im Vergleich
eines einzelnen Teils im Verhältnis zur Gesamtmenge.
Da sich Kreisdiagramme nur schwer miteinander vergleichen lassen, ist die Darstellung in
DataWrapper auf eine Datenreihe beschränkt. Welche Datenreihe dargestellt wird, lässt sich
unter den Optionen zur Verfeinerung auswählen, sofern mehrere vorhanden sind:
 Auswahl der Datenreihe Wählen Sie die Datenreihe aus ihrem Datensatz aus,
die als Kreisdiagramm visualisiert werden soll. Die
Auswahl richtet sich nach den in Schritt 2: Prüfen &
Beschreiben definierten Datenreihen.

14. Deutsche Welle - Tutorial DataWrapper 14
Schritt 3: Visualisieren
Diagramm Typen – Ring
Ring-Diagramme eignen sich in analoger Form zu den Kreisdiagrammen dazu, die Anteile
einer Menge zu visualisieren (z.B. Kostenanteile/Abteilung in Bezug auf Gesamtkosten).
Dabei werden die Anteile einer Datenreihe als Abschnitte des Rings (in absoluten Zahlen)
dargestellt. Der Mittelpunkt bleibt frei.
Analog zu den Kreisdiagrammen lässt sich eine Datenreihe zur Visualisierung auswählen.
DataWrapper bietet so zwei Optionen zur Verfeinerung an:
 Auswahl der Datenreihe Wählen Sie die Datenreihe aus ihrem Datensatz aus,
die als Ring-Diagramm visualisiert werden soll. Die
Auswahl richtet sich nach den in Schritt 2: Prüfen &
Beschreiben definierten Datenreihen.
 Gesamtwert anzeigen Schreibt die absolute Summe der Einzelwerte der
Abschnitte in den Mittelpunkt des Rings. Die
Abschnitte werden prozentual angezeigt.

15. Deutsche Welle - Tutorial DataWrapper 15
Schritt 4: Veröffentlichen
PLATZHALTERPLATZHALTER
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim nulla, condimentum ut
dignissim at, iaculis eu mauris. Proin ultrices, ipsum id mattis adipiscing, nunc mi vulputate
risus, a egestas quam sapien sit amet odio. Vivamus condimentum molestie augue eget
sodales. Proin quis blandit nisi. Integer facilisis pretium eros, quis euismod risus scelerisque
eu. Morbi non velit a ligula euismod vehicula non sit amet velit. Etiam augue purus, tempor non
mollis nec, iaculis ut purus. Fusce et ligula nisl. Vestibulum non justo eget orci dictum aliquet.
Sed vel tortor augue. Maecenas in lacus vel sapien ultricies vehicula. Morbi tempus justo nibh.
In hac habitasse platea dictumst. Maecenas convallis arcu sapien, a fermentum quam.
Vivamus egestas, risus et eleifend laoreet, nunc elit tempus neque, a rutrum justo libero ut
odio. Proin accumsan bibendum tempus. Praesent commodo magna quis urna consequat
porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Integer viverra, nunc in consectetur imperdiet, tortor enim pellentesque justo, in
tincidunt lorem ante sed mi. Etiam eget mollis lectus. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nullam ullamcorper odio at est blandit eget
adipiscing urna aliquam. Pellentesque massa erat, vulputate sit amet pulvinar consectetur,
ultrices quis est. Mauris a tellus felis. Quisque facilisis, lorem ac blandit sagittis, sapien nisi
tristique metus, sit amet posuere quam odio eu erat. Curabitur sodales varius sem sit amet
placerat.

16. Deutsche Welle - Tutorial DataWrapper 16
Meine Visualisierungen
Unter Meine Visualisierungen finden Sie einen Überblick über alle von Ihnen erstellten
Diagramme. Die Diagramme werden mit Miniaturbild und Titel dargestellt.
Die rechte Spalte bietet eine Filterung der Liste an. Die Filterung erleichtert das Auffinden
von Diagrammen und hilft Ihnen, schnell den Überblick zu gewinnen. Drei Optionen stehen zur
Verfügung, die Filterung erfolgt auf klick der Auswahl:
 Nach Monat Filtert die Liste nach dem Erstellungsmonat
 Nach Diagrammtyp Filtert die Liste nach dem ausgewählten Diagrammtyp
 Nach Layout Filtert die Liste nach dem ausgewählten Layout
Eine Mausbewegung über die Miniaturbilder bietet Bearbeitungsoptionen pro Diagramm an:
 Duplizieren Erstellt eine exakte Kopie des Diagramms.
 Als PDF speichern Bietet eine PDF Version zum Download an.
 Löschen Löscht das Diagramm und alle zugehörigen Daten.
Ein Klick auf die Diagramme führt in den Bearbeitungsprozess. Das Diagramm öffnet sich im
zuletzt verwendeten Bearbeitungsschritt. Dort kann auch eine Umbenennung erfolgen.