Wo die wilden Karten herkommen: Wie können wir ohne Programmier-Kenntnisse Daten visualisieren?

Sind Ihnen auch schon mal diese hübschen, interaktiven Karten aufgefallen, die seit einiger Zeit in den Online-Medien aufploppen? Und haben Sie sich vielleicht gefragt, wie diese Karten entstehen? Und ob man die auch selber machen kann? Der Journalist Julius Tröger hat sich mit einem Kollegen auf das Abenteuer Daten- visualisierung eingelassen, obwohl beide keine Programmierer sind. Am Beispiel der Berlin-Wahl berichtet er davon, wie er eine digitale Karte erstellt hat – all das vollkommen verständlich. Auch für Technik-Laien.

 *

Berlin hat ein neues Abgeordnetenhaus gewählt. 1.486.616 Millionen Menschen haben in 1736 Wahllokalen und per Briefwahl ihre Stimme in 78 Wahlkreisen der Hauptstadt abgegeben. 22 Parteien waren zur Wahl zugelassen.

Gegen ein Uhr in der Nacht nach der Wahl veröffentlichte die Landeswahlleiterin von Berlin das vorläufige amtliche Endergebnis. Rund eine Stunde später wurde auf wahlen-berlin.de eine rund fünf Megabyte große Excel-Tabelle mit allen abgegebenen Stimmen zum Download angeboten. Einige Nachtschichtstunden später, gegen acht Uhr, veröffentlichten mein Kollege André Pätzold und ich unsere interaktive Berlin-Wahlkarte, auf der alle zur Abgeordnetenhauswahl abgegebenen Stimmen dargestellt werden können.

Bereits lange im Vorfeld der Wahl am 18. September hatten wir uns überlegt, welche Darstellungsformen wir online einsetzen wollen, um den erwarteten Zahlenberg darzustellen. Wir hatten uns dafür entschieden, eine Karte mit allen Bezirken, Wahlkreisen und Wahllokalen zu bauen, auf der alle abgegebenen Stimmen bis auf Kiez- bzw. Straßenebene zurückverfolgt werden können. Diese sollte mit Online-Tools abseits von Flash umgesetzt werden und auf möglichst allen Endgeräten darstellbar sein.

Zum Einsatz kamen ausschließlich Tools von Google. Die Wahlkarte wurde mit Google Fusion Tables, Google Maps, Google Chart Tools und Google Spreadsheet sowie den jeweiligen APIs umgesetzt. Geschrieben ist die Webseite in XHTML, Javascript und CSS. Außerdem haben wir mit dem Tabellenverarbeitungsprogramm Microsoft Excel und den freien HTML-Editoren Komodo Edit, Aptana Studio und Smultron gearbeitet.

Da wir beide gelernte Journalisten und keine Programmierer sind, haben uns die Dokumentationen und Beispiele der APIs sehr geholfen. Ein fundiertes Grundlagenwissen der o.g. Techniken brachten wir beide allerdings bereits mit. Bei detaillierten Fragen wurden wir immer in den entsprechenden Foren unterstützt. Hier erklären wir die Entstehung der Wahlkarte in vier Schritten:

1. Daten besorgen, in Excel-Tabellen speichern, bereinigen und aufeinander abstimmen

Die Daten zur Berlin-Wahl wurden von der Landeswahlleiterin bereitgestellt. Neben den detaillierten Wahlergebnissen konnten im Vorfeld zudem Wählerstrukturdaten wie z.B. Migrationshintergrund der Wahlberechtigten in den Wahlkreisen heruntergeladen werden.

Darüberhinaus stellte die Landeswahlleiterin die Adressen der 1736 Berliner Wahllokale und die Beschreibung der 78 Wahlkreise zur Verfügung.

Im nächsten Schritt mussten die benötigten Daten in einzelnen Tabellen so aufgearbeitet werden, dass sie ausschließlich die benötigten Daten in einer sinnvollen Reihenfolge und möglichst keine Umlaute mehr enthalten. Dafür kam vorwiegend Microsoft Excel und vor allem die entsprechenden Formel-Befehle “Verketten” und “MAX” sowie eine ausgiebige Zellenformatierung zum Einsatz.

Für Fusion Tables ist es außerdem wichtig, dass die Excel-Tabellen nicht größer als ein Megabyte sind. Das wurde bei den Wahllokal-Stimmen teilweise sehr knapp.

Außerdem mussten die unterschiedlichen Tabellen aufeinander abgestimmt werden. Dafür wurden eindeutige IDs für die zwölf Bezirke, 78 Wahlkreise und 1736 Wahllokale vergeben. Diese atomare Datenhaltung ermöglichte später eine beliebige Kombination aller Tabellen und Daten,

2. Excel-Tabellen in Google Fusion Tables importieren und verbinden

 

Um die Tabellen ins Netz zu bringen, wurde das Datenmanagement-Tool Google Fusion Tables eingesetzt. Die Besonderheit bei Fusion Tables ist, dass Geodaten in den Tabellen (Adressen oder KML-Polygone) dynamisch auf einer Google Map dargestellt werden.

Nachdem ein Google-Account erstellt wurde, konnten die vorbereiteten Excel-Tabellen mit einem Klick in Fusion Tables importiert werden. Im nächsten Schritt wurde bestimmt, welche Spalten Geodaten für die Visualisierung, wo Texte und wo Zahlen stehen. Dann mussten die Tabellen nur noch sinnvoll (z.B. Wahllokal-Adressen-Tabelle und Stimmen-in-den-einzelnen-Wahllokalen-Tabelle) miteinander verknüpft (merge) und unter neuem Namen abgespeichert werden und die Sichtbarkeit von “private” auf “unlisted” bzw. “public” gestellt werden.

3. Geodaten visualisieren, Polygone zeichnen und Infofenster bearbeiten

Fusion Tables erstellt automatisch für jede Adresse einen Punkt auf einer Google-Karte. Die Symbole dafür können aus einer kleinen Liste gewählt werden oder dynamisch anhand von Werten einer Tabelle (z.B. über 50 Prozent = rote Punkte, unter 50 Prozent = grüne Punkte) dargestellt werden.

Für die Wahlkarte sollten darüberhinaus aber auch die Berliner Bezirke und Wahlkreise mit ihrem exakten Grenzverlauf auf der Karte zu sehen sein, und die Bereiche dynamisch anhand von Tabellenwerten eingefärbt werden. Da diese Geodaten – im Gegensatz zu den 96 Berliner Ortsteilen – nirgends als KML-Daten zur Verfügung standen, mussten sie manuell eingezeichnet werden.

Die Bezirke und Wahlkreise wurden mit einem freien Tool Punkt für Punkt eingezeichnet und die Daten aus dem Polygon-Tag im KML kopiert und in die entsprechende Fusion Table als “Location” eingefügt.

Fusion Tables bietet umfangreiche Tools zur Erstellung so genannter Heatmaps, also Karten auf denen bestimmte Teile anhand von Tabellenwetten mit Farbverläufen (z.B. viele Arbeitslose = dunkel, wenig Arbeitslose = hell) dargestellt werden können.

Ein weiterer grundlegender Bestandteil der Wahldaten-Visualisierung war die Darstellung aller abgegebenen Stimmen auf Wahllokal, Wahlkreis und Bezirksebene in detaillierten Infofenstern. Fusion Tables bietet hierfür die Möglichkeit, Tabellendaten in diesen Infofenstern dynamisch und per HTML und CSS anzuzeigen.

Um das dynamische Kuchendiagramm in den Infofenstern darzustellen, wurden zusätzlich die Google Image Chart Tools eingesetzt. Damit konnten dynamisch Kuchen- und Balkendigramme mit entsprechenden Wahlergebnissen angezeigt werden. Die Ergebnisse in Rohform wurden per einfachem HTML in die Infofenster eingebunden.

4. Layout und Steuerung um die Google-Karte erstellen

Der mit Abstand aufwändigste Part war die Präsentation und der Aufbau einer dynamischen Steuerung der Wahlkarte.

In einem ersten Schritt kam das sehr hilfreiche Tool Fusion Tables Builder zum Einsatz. Damit lassen sich die initialen Layer (z.B. Alle Wahllokale) aus einer Tabelle auf einer Google-Karte darstellen. Zudem können dort Größe, Style, Startpunkt etc. Festgelegt werden. Der daraus entstandene Quellcode diente als Ausgangspunkt für die Wahlkarte.

Das Gerüst der Karte wurde komplett mit CSS verwirklicht. Die Karte wurde mit DIV-Elementen in vier Teile gegliedert: Den Karten-Hauptbereich, den Karten-Steuerungsbereich oben, die Wahllokal-Parteien-Steuerung links sowie die Bezirke-/Wahlkreis-Steuerung im unteren Bereich.

Das Styling der Karte wurde vorwiegend mit dem Google Styling Wizard vorgenommen. Dieser erlaubt es, beinahe alle Karten-Elemente farblich anzupassen bzw. ein- und auszublenden.

Wie die weiteren Features entstanden soll im Folgenden kurz dargestellt werden:

Die Adressuche wurde mithilfe der Google-Maps-Geocoding-API realisiert. Vorteilhaft dabei: Die Google-Suche ist sehr stark und kennt eigentlich alle Orte in Berlin.

Für die Abfrage der 100 Wahllokale, in denen die jeweiligen Parteien gepunktet haben, kam die Fusion Tables SQL API zum Einsatz. Bei Klick auf die gewünschte Partei wird per Javascript ein String als Parameter übergeben. Anhand des Werts dieses Parameters (z.B. “SPD”) wird die Abfrage gestartet, die die Spalte “SPD” in der entsprechenden Tabelle mit den höchten Werten absteigend ausliest und dabei nur die ersten 100 Werte ausgibt -also “SELECT Location FROM Wahllokale ORDER BY ‘SPD’ DESC LIMIT 100″.

Die Rangliste aller Ergebnisse in Tabellenform wurde – ähnlich der Diagramme in den Infofenstern – mit den Google Chart Tools umgesetzt. Die Daten dafür kommen aus einer Tabelle, die in Google Spreadsheet abgelegt wurde. Auch das Diagramm mit den Ergebnisse der Berlin-Wahlen seit 1950 wurden damit erstellt.

Die Legenden auf der Karte wurden mit HTML und Javascript nach einem von Google bereit gestellten Beispiel erstellt.

Die gesamte Berlin-Wahlkarte wurde dann im letzten Schritt als Iframe in das Content Management System der Berliner Morgenpost eingebunden.

Auch Nicht-Programmier steigen durch

Auch wenn der Arbeitsaufwand für die Erstellung der Karte hoch war und viel Zeit und Nerven gekostet hat, waren wir immer wieder erstaunt darüber, wie wir als Nicht-Programmierer alle Skripting-Probleme irgendwie gelöst bekommen haben und Dank einer einwandfreien API-Dokumentation seitens Google und Hilfe in verschiedenen Foren immer zum Ziel gekommen sind.

Wer sich in die Grundlagen der Programmierung einlesen möchte, dem seien die W3Schools Tutorials, die Codeacademy und diese Linkliste ans Herz gelegt.

Anm. d. Red.: Weitere Beiträge über Datenvisualisierung finden sich in unserem Dossier Datenjournalismus. Alle Grafiken sind Screenshots und stammen von Julius Tröger.

22 Kommentare zu “Wo die wilden Karten herkommen: Wie können wir ohne Programmier-Kenntnisse Daten visualisieren?

  1. Such mal nach @datenschau, die machen darüber jetzt regelmäßig “Fernsehen”, mit Leuten, die das schon eine Weile machen.

  2. @#1: ich habe auf der letzten re:publica einen guten vortrag von christina elmer gehört, damals bei dpa infografik, jetzt beim stern in einer neu eingerichteten abteilung – sie sprach über datenjournalismus und datenvisualisierung einer praxis ohne programmier-kenntnisse. und sie sprach nicht nur, sondern zeigte, wie es geht. das ist ein interessanter ansatz, den auch julius tröger und co. verfolgen und der dem ansatz von lorenz matzat “entgegensteht”, der sich selber als “programming journalist” versteht und eben tiefeneinblick in technik und code zur grundlage seiner arbeit gemacht hat.

  3. Hallo, das sollte auch nicht heissen, dass etwas besser oder schlechter ist. dachte nur, das thema interessiert dich auch.

  4. @#3: “datenschau” ist in der tat interessant und ich hatte auch schon über das medienradio mitbekommen, dass sich philip banse mit dem thema beschäftigt, er hatte kürzlich mit lorenz matzat eine sendung dazu gemacht. was ich an “datenschau” schön finde ist nicht zuletzt der name, erinnert an “tagesschau”, soll es ja wahrscheinlich auch: gestern haben wir uns den tag angeschaut, um die welt zu begreifen. heute schauen wir uns daten an. oae.

  5. ich möchte an dieser Stelle auf ein Dossier der Berliner Gazette verweisen, dass sich mit dem Datenjournalismus und damit auch Fragen der Datenvisualisierung widmet, der älteste Text stammt von Lorenz Matzat, aber es gibt auch Beiträge, in denen es auch um eine neue Dimension des DDJ geht, vielleicht soetwas wie Grasswurzel-Datenjournalismus wie in dem Beitrag von Patrick Meier beschrieben. http://berlinergazette.de/tag/datenjournalismus/

  6. Hallo Julius, ich habe eine Frage: Ich beschäftige mich auch mit Datenjournalismus und würde gern so etwas auf die Beine stellen – geht das nur mit Google-Prdoukten oder habt ihr auch “freie” Software gefunden, die man benutzen kann?

Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.