Sprechende Datenvisualisierung: Wie unser „Talkie“ entstanden ist

Vor ziemlich genau einem Jahr haben wir den Flugrouten-Radar (tägliche Updates zurzeit vorübergehend deaktiviert) für Berlin und Brandenburg veröffentlicht. Eine interaktive Anwendung, die Flüge und deren Lärm für jeden individuellen Standort visualisiert und eine Langzeitauswertung des Flugverkehrs ermöglicht. Wie bereits angekündigt, handelt es sich dabei nicht um ein abgeschlossenes Projekt, sondern vielmehr um eine fortlaufende Beobachtung. Und wie immer teilen wir auch mit  diesem Werkstattbericht unsere Erfahrungen.

Screenshot des Flugrouten-Talkies

Screenshot des Talkies

Nach einer Story über die steigende Zahl von Flügen nach Mitternacht am Flughafen Tegel Ende März, haben wir Anfang April auch noch eine weitere Geschichte auf Basis der Flugrouten-Radar-Daten veröffentlicht. Dabei handelt es sich um ein so genanntes „Talkie“, ein interaktives Format, durch das ein/e Sprecher/in führt.

Die Web-Entwickler von Kiln haben das Format durch das jüngste Projekt für den Guardian „See the planes in the sky right now“ geprägt, von dem wir uns auch haben inspirieren lassen. Kiln selbst bezeichnet ein „Talkie“ als ein Format, „that combine[s] the accessibility and story-telling strength of a video with the depth and explorability of a data-rich interactive visualisation.“

Aufwendige Datenrecherche

Dass Flugrouten in Berlin nicht immer eingehalten werden und Flugzeuge ab einer bestimmten Höhe von festgelegten Strecken abweichen dürfen, hatten wir bereits berichtet. Dass diese Höhe aber nicht selten – vorwiegend wegen schlechten Wetters – teils deutlich unterschritten wird und damit für Verwirrung bei Anwohnern von Gebieten sorgt, wo es solche Tiefflüge eigentlich gar nicht geben sollte, ist neu.

Auf diese Erkenntnisse stießen wir durch aufwendige Recherchen in unserer eigenen Datenbank. Vereinfacht gesagt überprüften wir jeden der rund 20 Millionen Flugkoordinaten von startenden Maschinen, ob der jeweils nächste Punkt mindestens 25 Grad nach links oder rechts abweicht. Lag ein solcher Punkt unterhalb von 3000 Fuß (rund 900 Meter, Propellermaschinen) bzw. 5000 Fuß (etwa 1500 Meter, Strahlflugzeuge), konnten wir die Abweichung feststellen.

Laut der Flugsicherung komme es zu diesen Flügen vor allem aus Sicherheitsgründen, etwa wenn Piloten Gewitterzellen umfliegen müssten. Auch Rettungsflüge, eilige Organ-Transporte oder auch durchstartende Maschinen dürften von der DFS-internen Vorgabe abweichen.

Die Daten wurden mittels einer internen Schnittstelle (API) als JSON ausgegeben, in CSV umgewandelt, in QGIS importiert und dort händisch nachkontrolliert.

Keine Karte von der Stange

Die Ergebnisse werden auf einer interaktiven Karte präsentiert, die individuell nur für diese eine Anwendung zugeschnitten wurde. Es handelt sich also nicht um eine gewöhnliche Karte, wie man sie so oft etwa von Google Maps (was wir früher häufig verwendeten) sieht. Der Vorteil: Wir zeigen nur Elemente, die für die jeweilige Visualisierung von Bedeutung sind. Die Karte wirkt dadurch nicht überladen. Auch Nachrichtenseiten wie Zeit Online setzen auf eine ähnliche Lösung.

Mit Tilemill kann man Karten stylen

Karten stylen mit Tilemill

Um Karten nutzen zu können, die nur die wichtigen Informationen abbilden und zum Stil der Anwendung passen, nutzen wir die auf Open Street Map basierende Kartensoftware Mapbox und deren Tool Tilemill. Dafür müssen als erstes Open Street Map Daten heruntergeladen und in eine eigene PostgreSQL-Datenbank geladen werden. Ein guter Ausgangspunkt dafür ist OSM Bright. Dort wird Schritt für Schritt erklärt, wie man ein solches Tilemill Projekt einrichtet. Dann können einzelne Elemente wie Gebäude, Straßen, etc. per CartoCSS einzeln zu- und abgeschaltet und mit einem individuellen Stil versehen werden. CartoCSS basiert auf gewöhnlichen Cascading Style Sheets (CSS). Zum Schluss muss das Tilemill-Projekt dann im Format MBTiles abgespeichert und bei Mapbox hochgeladen werden, um es im Web verwenden zu können.

Den Browser sprechen lassen

Zentrales Element des Talkies ist eine Sprecherin, die durch die Daten-Anwendung führt. Die Audio-Spur direkt im Browser abzuspielen und darin interaktiv und präzise an jede Stelle springen können ist aufwendig. Einerseits wird Audio von jedem Browser etwas anders gehandhabt und andererseits hat die native HTML5 Audio API eher begrenzte Funktionen. Daher haben wir uns mit Howler.js für eine Javascript-Bibliothek entschieden, die die Arbeit mit Audio im Browser sehr vereinfacht.

Audio-Schnitt in Final Cut

Audio-Schnitt in Final Cut

Zunächst hatten wir den Text selbst eingesprochen, bis wir den Feinschliff im Ablauf der Anwendung hatten. Für die finale Version engagierten wir Sprecherin Ulrike Kapfer. Die Audio-Datei wurde dann in Final Cut geschnitten, mit Hintergrundmusik (von Justin Falcone unter der Creative-Commons-Lizenz bereitgestellt, gehört beim ProPublica-/PBS-Interactive „Hazardous Hospitals“) und Sound-Effekten gemischt.

Die fertige Datei haben wir dann komprimiert und mit dem Tool Miro Converter als MP3 und als OGG umgewandelt.

Flugrouten auf den Bildschirm zeichnen

Da wir zu jedem einzelnen Flugpunkt auch über Datum und Uhrzeit, also zeitbasierte Daten verfügen, haben wir uns entschieden, die Flugrouten zu animieren. Die Darstellung wird so deutlich realistischer. Für das Zeichnen der Routen wurde die native HTML5 Canvas API genutzt, mit der sich beliebige Formen im Browserfenster zeichnen lassen. Dafür werden die jeweiligen Flugkoordinaten (z.B. 52.583547, 13.478403) in Pixelpositionen (z.B. top: 251px / left: 688px) des entsprechenden Bildschirms umgerechnet. Dank requestAnimationFrame können die Flüge dann auch sauber animiert werden.

Mobile Version mit Animated Gifs

Die Anwendung funktioniert mit allen modernen Browsern und auf Tablets. Dabei passt sich die Visualisierung der jeweiligen Bildschirmgröße an (Responsive).

Eigentlich verbotene Abkürzungen in Berlin

Darstellung auf Smartphones

Zwar funktioniert das Talkie auch auf Smartphones. Allerdings war die auf den kleinen Bildschirmen viel zu kleinteilig und kaum bedienbar. Aus diesem Grund haben wir uns für diese Geräte für eine andere, stark vereinfachte Darstellung entschieden.

Da Apple Autostart von Audio und Video verbietet, haben wir animierte Gifs (siehe Tutorial hier) von den wichtigsten Szenen der Anwendung erstellt und zeigen die zusammen mit dem Text, der in der interaktiven Version gesprochen wird.

Alle Geschichten aus der Datenbank des Flugrouten-Radars können auf der entsprechenden Themenseite nachgelesen werden.

Ein Beitrag von Julius Tröger und Moritz Klack