Schlagwort-Archiv: Tutorial

Bundestagswahl 2013 – Wie wir unsere Online-Formate umsetzen

Vor und nach der Bundestagswahl 2013 hat die Berliner Morgenpost einige reine Online-Formate veröffentlicht. Wir haben dabei wieder mit Tools und Web-Techniken experimentiert. Wir wollen das, was wir dabei gelernt haben, teilen – und veröffentlichten daher an dieser Stelle Werkstattberichte und Tutorials.

23.09.2013: Berlinwahlkarte 2013 – Alle Ergebnisse der 1709 Berliner Wahllokale

Nach unserer interaktiven Karte zur Berliner Abgeordnetenhauswahl 2011 haben wir (André Pätzold und Julius Tröger) zur Bundestagswahl 2013 eine Neuauflage unter berlinwahlkarte2013.morgenpost.de erstellt. Wir haben aus unserer ersten Berlinwahlkarte gelernt und unsere 2013-Version rundumerneuert. Das wurde unter anderem möglich, weil Web-Entwickler Moritz Klack unser kleines Team verstärkte und maßgeblich am Erfolg der Karte beteiligt war.

Gewinner, Verlierer, Statistiken: Unsere Karte mit allen Wahllokal-Ergebnissen

Gewinner, Verlierer, Statistiken: Unsere Karte mit allen Wahllokal-Ergebnissen

Zwei Tage nach der Wahl dürfen wir uns über mehr als 14.000 Facebook-Likes, unzählige Tweets und überwältigende Zugriffe freuen. Vor allem die immer noch vorhandene Teilung Berlins beim Wahlverhalten war für viele neu und ein großes Thema in Tweets aus den unterschiedlichsten Ländern.

Die neue Karte zeigt wieder jede in den Berliner Wahllokalen abgegebenen Erst- und Zweitstimme. Und das in der im deutschen Wahlrecht kleinstmöglichen und somit detailliertesten Einheit, der Stimmbezirksebene. Sie zeigt tatsächlich nur, wie in den 1709  Berliner Wahllokalen am Sonntag abgestimmt wurde. Die Daten dazu kamen gegen 3 Uhr in der Wahlnacht. Vor allem bei der Wahlbeteiligung ergeben sich so sehr niedrige Werte. Wir haben uns für diese Darstellung entschieden, da wir so die Ergebnisse sehr detailliert auf Kiezebene zeigen können. Briefwahlbezirke (568) sind deutlich gröber gefasst, die Briefwahlstimmen lassen sich nicht einfach auf die Wahllokale verteilen. Wir arbeiten jedoch an einer Darstellung, bei der die Briefwähler zum endgültigen Ergebnis zusätzlich berücksichtigt werden. (Werden wir in dieser Wahlkarte doch nicht mehr umsetzen.)

Responsiv-Konzept: Nur das nötigste

Responsiv-Konzept: Nur das nötigste

Darüber hinaus zeigen wir die Hochburgen der Parteien und statistische Auswertungen aus eigenen Abfragen („Wo die Wechselwähler leben“) und Wahlstrukturdaten („Wo die ältesten leben“).
Außerdem ermöglichen wir mit Deep-Links jeden Zustand der Karte zu teilen und somit etwa in den Texten unserer Wahl-Nachberichterstattung direkt auf einzelne Aspekte der Karte einzugehen.
Des Weiteren ist die Karte diesmal nicht in unser Standard-Layout gepresst, sondern für eine Vollbild-Ansicht optimiert. Sie passt sich responsiv an alle Bildschirmgrößen an. So kann sie sowohl auf Tablets optimal betrachtet werden, als auch auf großen Monitoren, wo die Karte voll zur Geltung kommt.

Weniger Google – mehr QGIS und GDAL

Die 2011er-Version haben wir noch vorwiegend mit Google-Tools wie Fusion Tables und Charts umgesetzt. Das lag vor allem am mangelnden Programmier-Verständnis. Dieses Jahr nutzen wir zwar noch die Google-Karte und den –Geocoder (der kostenlos ist, aber nur für Google-Karten). Fusion Tables setzen wir aber nur noch an einer Stelle ein: Mit der SQL-Api und der Methode ST_INTERSECTS kann man nämlich herausfinden, ob ein Punkt in einem Polygon liegt. So steuern wir etwa die Stimmbezirk-Zuordnung, nachdem Nutzer ihre Adresse eingeben.

Shape-Umwandlung mit QGIS

Shape-Umwandlung mit QGIS

Im Gegensatz zu 2011 konnten wir dieses Jahr unter ganz anderen Voraussetzungen arbeiten. Nicht nur war Web-Entwickler Moritz Klack an Bord. Die Berliner Landeswahlleiterin stellte uns diesmal auch ein Shapefile bereit, das Polygone für jeden der 1709 Stimmbezirke enthält – 2011 mussten wir die Wahlkreise noch von Hand nachzeichnen. Das Shapefile enthält neben den Stimmbezirken auch die Wahlbezirke. Um diese daraus zu extrahieren, haben wir die hervorragende Software Quantum GIS (QGIS) eingesetzt. QGIS ist gerade in der Version 2.0 erschienen.

Shape-Vereinfachung: Hinten: Original. Vorne: Punkte halbiert

Shape-Vereinfachung: Hinten: Original. Vorne: Punkte halbiert

Die von uns gewählte, detaillierte Darstellung bereitete uns aber auch Probleme, da das Original-Shapefile aus beinahe 100.000 Geo-Koordinaten besteht. Zwar waren die Stimmbezirke so auf den Meter genau, die Performance der Karte litt aber deutlich. Deshalb mussten wir die Polygone vereinfachen. Um Geoformate umzuwandeln kann GDAL (für Mac am besten GDAL_Complete bei KyngChaos downloaden) etwa mit dem ogr2ogr-Befehl im Terminal eingesetzt werden. In unserem Fall nutzten wir den Befehl „ogr2ogr output.shp input.shp -simplify 7“. So konnten wir die Punkte in unserem Shapefile nach einigem hin- und herprobieren ohne wirklich sichtbare Qualitätseinbußen mehr als halbieren und die Geschwindigkeit der Karte deutlich steigern. (Siehe Update weiter unten!)

Probleme hatten wir auch mit Apple-Produkten: Kurz vor der Veröffentlichung der Karte launchte Apple iOS 7. Nach ersten Tests unserer Karte mit dem neuen Betriebssystem wurde schnell klar, dass die neuste Safari Version offensichtlich starke Probleme mit intensiven Javascript-Applikationen hat. Die Erstellung der 1709 Polygone der Stimmbezirke brachte den neuen Browser zum abstürzen. Auf alten iOS-Versionen funktioniert das hingegen problemlos. Der neue Safari hat tatsächlich noch einige Bugs, die das Nutzen vieler aktueller Technologien unmöglich machen. Wir mussten für iOS-7-Nutzer also eine Fallback-Variante erstellen, die die Nutzung etwas einschränkt.

Tools für die Arbeit mit (Geo-)Daten

Neben QGIS und GDAL kamen für die Berlinwahlkarte weitere Tools wie Shape Escape (Import von Shapefiles zu Fusion Tables), CartoDB (Export in verschiedene Datenformate), GeoJSON.io (Einfache Bearbeitung von Geodaten) sowie Mr. Data Converter und Open Refine (Umwandlung von Tabellen in JSON-Format) zum Einsatz. Viele Daten, etwa die jeweiligen Partei-Hochburgen, haben wir direkt in den Quellcode geschrieben werden in kleinen Datenhappen nachgeladen um Ladezeiten zu vermeiden. Kartentools wie LeafletMapboxTilemillStamen und TopoJSON kamen diesmal nicht zum Einsatz, wollen wir uns aber für künftige Projekte genauer ansehen.

Excel zu JSON: Tool: Mr. Data Converter

Excel zu JSON: Tool: Mr. Data Converter

Weil wir viel mit Geodaten hantierten, bekamen wir auch ein Grundverständnis von Karten-Projektionen. Geodaten bestehen grundsätzlich aus einer Menge von Koordinatenpaaren. Da die Erde eine Kugel ist, wir aber mit flachen Karten arbeiten, muss jeder Punkt auf der Erde daher umgerechnet werden. Dafür gibt es etliche Bezugssysteme. Der Quasi-Standard, den etwa Open Street Maps oder Google nutzen, ist die Web-Mercator-Projektion (EPSG: 3857, WGS84). Wenn man also ein Shapefile bekommt, sollte als erstes die richtige Projektion sichergestellt werden. Hatten wir Fragen, wurde uns immer unter gis.stackexchange.com sehr schnell weitergeholfen.

Mischung aus Abstrakt- und Detaildarstellung

Beispiel SVG-Karte ohne Details

Beispiel SVG-Karte ohne Details

Immer wieder wird darüber debattiert, ob man detaillierte Karten mit Straßenverläufen, Flüssen etc. oder eher abstrakte Darstellungen wie etwa lediglich mit Umrissen der Ortsgrenzen (z.B. SVG-Darstellung bei ) verwenden soll. Wir sind der Meinung, und das hat sich nach zahlreichen Tests unserer Berlinwahlkarte bestätigt, dass sich Nutzer sehr wohl an Straßen, Flüssen, Parks orientieren, um ihr Haus zu finden. Aber nur in einer nahen Zoomstufe. Als Übersicht sind Straße und Co. tatsächlich eher störend. Wir haben uns also entschieden, den Kartenstil je nach Zoomstufe anzupassen. Allgemein haben wir in Sachen Usability immer die Heuristiken von Molich und Nielsen im Blick gehabt, und versucht, möglichst viel davon umzusetzen (Konsistenz, sofortiges Feedback auf Nutzereingaben, „Less is more“) .

Update/Ergänzung 16.10.2013:

Wir haben ein Update der Karte eingespielt. Einerseits haben wir nun die endgültigen Wahlergebnisse eingepflegt und kleine Bugs behoben (z.B. „.“ statt „,“ bei manchen Dezimalzahlen). Andererseits haben wir aber die Hinweise von Jeremy Stucki und Ralph Straumann aufgegriffen und die Polygone der Stimmbezirke neu umgerechnet und hochgeladen.

Fehlerhafte Topologie nach GDAL Simplify

Fehlerhafte Topologie nach GDAL Simplify

Wie im Blogpost oben beschrieben, mussten wir die 1709 Polygone der Stimmbezirke vereinfachen, da es bei den vielen Tausend Punkten zu Performance-Problemen kam. Wir haben die Anzahl der Punkte also mit einem GDAL-Befehl halbiert. Das funktionierte soweit auch super. Allerdings wurde so die Topologie zerstört, in großen Zoomstufen konnte man Lücken oder Überlappungen zwischen den Stimmbezirken erkennen. Für uns war das ein notwendiges Übel und beschlossen daher, das so umzusetzen.

Die beiden Geo-Experten Jeremy Stucki und Ralph Straumann hatten uns allerdings direkt nach der Veröffentlichung des Blogbeitrags darauf hingewiesen, dass das viel besser geht. Vielen Dank an dieser Stelle noch einmal für die Hilfe – das zeigt einmal mehr, wie sich die Datenjournalismus-Community gegenseitig hilft. Nach Rücksprache möchte ich natürlich auch hier teilen, was Jeremy per Mail schrieb:

Da du ja GDAL schon installiert hast, ist das einzige, was du noch brauchst Node.js. Am einfachsten installierst du TopoJSON dann übers Terminal:

npm install -g topojson

Und dann wandelst du ein Shapefile so um:

topojson -p –simplify 2e-9 — in.shp > out-topo.json

Der -p Parameter stellt sicher, dass die Attribute (Name, Nummer etc.) mitkopiert werden, –simplify gibt an wie stark du vereinfachen willst, d.h. die Flächengenauigkeit in Steradianten. 2e-9 ist der Wert, den ich für die Schweiz verwende, das kannst du also eher ein bisschen grösser wählen, da musst du etwas experimentieren. Als Alternative kannst du auch –simplify-proportion angeben, damit bestimmst du einfach, wie viele Punkte du schliesslich haben willst. 50% der Ausgangspunkte ist also –simplify-proportion 0.5.

Es gibt noch viel mehr Optionen, nachzulesen unter https://github.com/mbostock/topojson/wiki/Command-Line-Reference

Um dann wieder ein GeoJSON zu kriegen:

geojson –precision 3 -o out-verzeichnis — in-topo.json

Beispiel mit precision 3: Für Berlin-Details zu gering

Beispiel mit precision 3: Für Berlin-Details zu gering

in-topo.json ist dabei die TopoJSON-Datei, die du vorher erstellt hast. –precision gibt dabei an, wie viele Nachkommastellen du in deinen GeoJSON-Koordinaten haben willst. Je weniger, desto ungenauer, aber kleiner die Datei. -o gibt das Verzeichnis an, wo das GeoJSON erstellt wird (oder werden, weil eine TopoJSON-Datei auch mehrere Layer beinhalten kann).“

Nach einigem hin- und herprobieren rechneten wir die 1709 Stimmbezirks-Polygone als TopoJSON mit simplify-proportion 0.5 und als GeoJSON wiederum mit precision 4 heraus. Vor allem bei letzterem sind drei Koordinaten-Nachkommastellen für die detaillierten, kleinen Polygone zu grob. Das Endergebnis kann sich nun wirklich sehen lassen. Für eine GeoJSON-Datei, die gerade einmal 644KB groß ist, ist der Detailgrad immer noch ausreichend hoch und die Topologie bleibt erhalten.

13.09.2013: Scrollbare Infografik – die Berliner Parteien in Zahlen

In der Printausgabe der Berliner Morgenpost haben wir (Christian Schlippes, Karin Sturm, Joachim Fahrun und Julius Tröger) zwischen dem 9. und 14. September sechs ganzseitige Infografiken veröffentlicht. Sie zeigen für Berlin relevante Zahlen der sechs Parteien, die derzeit im Deutschen Bundestag oder im Berliner Abgeordnetenhaus sitzen, CDU, Linke, SPD, Grüne, Piraten und FDP. Welche Partei verliert am meisten Mitglieder – welche gewinnt wie viele hinzu? Wer wählt die Parteien? Wie viel steht zu den wichtigen Berliner Themen in den Wahlprogrammen? Wie hoch sind die Wahlkampfbudgets? Die Grafiken geben Antworten auf diese und weitere Fragen.

Scroll-Infografik - Die Berliner Parteien in Zahlen

Scroll-Infografik – Die Berliner Parteien in Zahlen

Am letzten Tag der Serie veröffentlichten wir diese Grafiken auch online. Allerdings nicht 1:1. Wir stellen sie in einer aufwendigen, scrollbaren, animierten Infografik dar. Wir entschieden uns dafür, weil die komplexe Datenvisualisierung dadurch in kleinere Aufmerksamkeits-Abschnitte unterteilt werden kann. Im Gegensatz zur Zeitungsversion ist es dabei auch möglich, die Parteien untereinander zu verglichen.

Technisch kamen dabei keine Scroll-Bibliotheken wie SkrollrSupercrollorama oder Stellar.js zum Einsatz. Deren Schnittstellen waren für unseren speziellen Fall nicht ausreichend. Interaction-Designer und Programmierer Markus Kison ließ sich per Javascript einfach die Stelle ausgeben, bis zu der der Nutzer jeweils scrollte. Aufgrund dieses Wertes wurden dann zwischen bestimmten Fixpunkten Animationen abgespielt. Da die Grafiken bereits in Form von Illustrator-Dateien vorlagen, wurden sie auch nicht komplett in SVG-Vektorgrafiken umgebaut, sondern teils als fertig GIF-Datei in den Hintergrund gelegt. An sinnvollen Stellen wurden dann SVG-Animationen mit Hilfe von D3 eingesetzt.

Einen Großteil der Zeit verbrachten wir am Ende mit dem Finetuning des Grafik-Verlaufs. Es stellte sich als größte Herausforderung heraus, einerseits den Spannungsbogen aufrecht zu erhalten, die Aufmerksamkeit immer auf das wichtigste Element zu lenken und allgemein einen stimmigen Scroll-Ablauf zu schaffen. Man sollte sich bei dieser Art von Infografik frühstmöglich ein Storyboard zurechtlegen.

Interessante Scroll-Grafiken kommen auch immer wieder vom Interactive-Team des Guardian US. Besonders eindrucksvoll ist ihr Jahresrückblick „2012 in America“, durch den man sich nur mit dem Mausrad/Touchpad bewegen kann.

02.09.2013: Interaktiver Stimmzettel – Welche 150 Kandidaten in Berlin zur Wahl stehen

Bei der Bundestagswahl 2013 stehen 150 Direktkandidaten in zwölf Berliner Wahlkreisen zur Wahl. Dabei können alle Berliner zwar denselben 17 Parteien ihre Zweitstimme geben. Die Kandidaten für die Erststimmen sind aber in jedem Wahlkreis unterschiedlich.

Vorab-Stimmzettel für Berlin

Vorab-Stimmzettel für Berlin

Jede Wahl, ob per Brief oder an der Wahlurne, wird mit zwei Kreuzen auf einem vorgegebenen Stimmzettel durchgeführt. Wir (André Pätzold, Anett Seidler, Moritz Klack und Julius Tröger) haben unseren Berliner Nutzern jeweils ihre persönlichen Zettel vorab originalgetreu nachgebaut und mit Zusatzinformationen (Fotos, Kontaktdaten, Themencheck) zu den Kandidaten und Parteien versehen.

Dabei erläutern wir auch Hintergründe wie etwa die Partei-Reihenfolge auf dem Stimmzettel. Die Linke steht nämlich nur deshalb vor der SPD, weil sie bei der Bundestagswahl 2009 exakt 579 Zweitstimmen mehr hatte. Darüber hinaus zeigen wir weitere Details wie die Vorjahresergebnisse in den jeweiligen Wahlkreisen und soziodemographische Daten der Kandidaten. Interessant ist dabei zum Beispiel, dass im Wahlkreis 76 (Pankow) keine einzige Frau als Direktkandidatin antritt. Da es bei der Wahl schließlich nicht nur um die Personen, sondern vor allem auch um Themen geht, haben wir den Kandidaten-Check von Abgeordnetenwatch integriert.

Die Kandidaten-Fotos erhielten wir auf Anfrage direkt bei den Pressestellen der Parteien. Der Stimmzettel wurde mit HTML, Javascript und CSS umgesetzt. Die Navigationskarte wurde als SVG integriert, die Karte mit den Kandidaten-Geburtsorten per Google-Maps-API. Der Stimmzettel ist auf der Startseite der Berliner Morgenpost prominent platziert. Der Artikel-Teaser soll dort bis 18 Uhr am Wahlabend stehen bleiben. Alle Stimmzettel sind per Deeplink teilbar. Eine Auswahl:

30.08.2013: Animated Gifs – die Gesten der Kanzlerkandidaten analysiert

Den Auftakt zu unseren Online-Only-Wahl-Geschichten machte die Analyse zu den Gesten von Angela Merkel und Peer Steinbrück im Vorfeld des TV-Duells. In Form von animierten Gifs haben wir je fünf Gesten der beiden Politiker gegenübergestellt und von Peter Ditko, dem Chef der Deutschen Rednerschule, analysieren lassen. Kollege Max Boenke und ich haben uns sehr über die überaus positive Resonanz gefreut.

Die Gesten von Angela Merkel und Peer Steinbrück - als animierte GIFs

Die Gesten von Angela Merkel und Peer Steinbrück – als animierte Gifs

Das Rohmaterial der Reden von Merkel und Steinbrück haben wir aus der Mediathek des Parlamentsfernsehens des Deutschen Bundestages heruntergeladen. Es darf mit Quellenverweis genutzt werden.

Die jeweils rund 20 bis 30 Minuten lange Reden haben wir in Final Cut Pro X auf entsprechende Gesten gesichtet, geschnitten und als MP4-Dateien exportiert. Diese kurzen Clips haben wir dann mit Gif Brewery (z.B. 4,49 Euro im Apple App Store) in animierte Gifs umgewandelt. Mit einem kleinen HTML– und CSS-Grundgerüst haben wir die Gifs und Texte dann in unser CMS integriert.

Im ersten Schritt werden Start- und Endpunkt des Clips ausgewählt (das Zuschneiden vorab erleichtert diesen Schritt – zudem überfordert man Gif Brewery nicht mit einer zu großen Ausgangsdatei). Unter „Properties“ wird der „frame count“, also die Bilder pro Sekunde, und der „frame delay“ eingestellt. Damit die Gifs flüssig abspielen, haben wir uns für die vollen 25 Frames pro Sekunde entschieden. Viele animierten Gifs im Netz laufen aber auch schon mit rund 15 fps halbwegs flüssig. Den „frame delay“ haben wir mit 100 ms festgelegt.

Gifs erstellen mit Gif Brewery

Gifs erstellen mit Gif Brewery

Für die weitere Bildbearbeitung sind zwei Schritte nötig: croppen (beschneiden) und re-sizen (Größe anpassen). Zuerst wird ein Bildausschnitt gewählt und gecropt, dann wird das Bild durch eine manuelle Eingabe von Höhe und Breite in Pixel heruntergerechnet. In unserem Fall sind so Gifs mit einer Breite von 210 Pixeln und einer Größe von etwa 500 Kilobyte entstanden.

Genau darin liegt aber auch das Problem von Animated Gifs. Sie werden zwar in jedem Browser ohne Plugin nativ dargestellt (im Gegensatz etwa zu Flash-Videos). Sind benötigen aber viel zu viel Speicherplatz. Das so genannte Graphics Interchange Format ist nämlich lediglich ein Bildformat mit verlustfreier Kompression. Die Dateien sind also viel größer als etwa JPEG-Bild-Dateien oder H.264-Video-Dateien, die mit verlustbehafteter Kompression arbeiten.

Die New York Times etwa hat auch schon einige Male mit kurzen, geloopten Videosequenzen in Artikeln experimentiert. Sie zeigen statt Animated Gifs aber einfach normale Videos, die sie per HTML5-Videotag mit autoplay und abgeschalteten controls abspielen. Diese Videos sind deutlich kleiner und laden schneller. Allerdings müssen HTML5-Videos in mehreren Dateiformaten exportiert werden, da nicht alle Browser alle Videoformate abspielen. Dieser Aufwand war uns zu groß, da wir nur drei Tage Zeit hatten. Außerdem hält sich die Größe bei den rund zweisekündigen Clips noch in Grenzen. Wir haben uns daher für „richtige“ animierte Gifs entschieden.

 

Wir bauen uns eine Nachrichtenquelle – Werkstattbericht zum Flugrouten-Radar

Wenn wir Informationen zu Nachtflügen, Flugrouten oder Fluglärm brauchen, müssen wir jetzt nicht mehr immer tagelang auf Antworten von Behördensprechern warten. Wir interviewen einfach unsere eigene Datenbank. Mit dem Flugrouten-Radar haben wir uns also eine eigene, täglich aktualisierte Nachrichtenquelle geschaffen.

Mehr als eine halbe Million Flüge und viele Millionen Flugspuren befinden sich hinter unserer neuen News App. Mit den richtigen Datenbank-Queries kommen wir dadurch an Zahlen, die in keiner anderen Statistik auftauchen. Und obwohl das Thema von Redaktionen in Berlin wie kaum ein anderes bearbeitet wird, finden wir so neue Geschichten, wie etwa die über Hunderte Leerflüge zwischen den Berliner Flughäfen.

Flugrouten, Fluglärm, Nachtflüge

Nach der mehrfach geplatzten Eröffnung des Hauptstadtflughafens BER ist es in Berlin zu einer besonderen Situation gekommen: Über den Flughafen Tegel, der eigentlich bereits seit Juni 2012 geschlossen sein sollte, müssen die eigentlich für den BER geplanten Flüge zusätzlich abgewickelt werden. 

3-D-Ansicht der Flüge über Berlin und Brandenburg

3-D-Ansicht der Flüge über Berlin und Brandenburg

Statt leiser wurde es für die Anwohner in den Einflugschneisen also lauter. Beschwerden über steigenden Fluglärm, Routenabweichungen und Nachtflüge nehmen zu. Debatten über diese Themen waren dabei häufig von Vermutungen geprägt. Genaue Zahlen zu Randzeit- und Nachtflügen sind schwer zu bekommen. Offiziell heißt es etwa: „Nachfragen nach belastenden Störungen [bei Flügen nach 23 Uhr] sind bei der Luftfahrtbehörde grundsätzlich möglich, erfordern dort aber einen erheblichen Recherche-Aufwand.“

Mit dem Flugrouten-Radar wollen wir Betroffenen und Interessierten in der emotional aufgeladenen Debatte ihre ganz persönliche Faktenbasis bieten – täglich aktualisiert und mit automatisierter Analysefunktion. Und wir wollen Daten so verständlich, transparent und personalisiert wie möglich darstellen.

Statistik-Ansicht: Nachtflüge, Airlines, Ortsteile

Statistik-Ansicht: Nachtflüge, Airlines, Ortsteile

Einerseits zeigt die interaktive Anwendung erstmals Flughöhen, -zeiten und Flugzeugtypen mit Lärmberechnungen für alle Flüge über einem individuellen Standort in einer dreidimensionalen Ansicht. Andererseits gibt es exklusive Statistiken auf Basis von mehr als einer halben Million Flügen seit Januar 2011, wie sich die Fluglast auf die einzelnen Ortsteile bzw. Gemeinden der Hauptstadtregion über die Zeit verteilt.

Von der ersten Idee bis zur Veröffentlichung des Flugrouten-Radars verging ungefähr ein halbes Jahr. Die Redaktion der Berliner Morgenpost hat dabei mit dem Deutschen Fluglärmdienst (DFLD), dem Datenjournalismus-Team der US-Investigativredaktion ProPublica und der Agentur Kreuzwerker GmbH zusammengearbeitet.

Recherche der Daten

Einen Großteil der Zeit benötigten wir, Julius Tröger und André Pätzold, für die Recherche der Flugspur-Rohdaten. Die gibt es in Deutschland nämlich nicht öffentlich – im Gegensatz zu den USA und Kanada etwa. Dort werden Radardaten aller Flüge per Feed angeboten. Die Deutsche Flugsicherung (DFS) gibt ihre Rohdaten dagegen nicht frei. Entsprechende Anfragen unsererseits wurden abgelehnt. Die DFS veröffentlicht die Daten zwar in ihrer Online-Anwendung „Stanly-Track“ – allerdings nur 14 Tage rückwirkend. Zu wenig für uns, da wir für Vergleiche die Zahlen aus den entsprechenden Vorjahreszeiträumen benötigten.

Unser Testgerät: AirNav RadarBox 3D

Unser Testgerät: AirNav RadarBox 3D

Ein anderer Weg an Flugspur-Daten zu gelangen sind so genannte ADS-B-Transponder in Flugzeugen. Die kann man in Deutschland legal mit entsprechenden Receivern wie Mode-S Beast, Transponder-Mouse oder Airnav Radarbox (ab rund 200 Euro bei eBay) empfangen. Live-Flugkarten wie Flightradar24 oder Metafly nutzen diese Technik. Nach einigen Tests entschieden wir uns allerdings gegen diese Variante. Es sind erst rund 70 Prozent der Flugzeuge mit ADS-B-Transpondern ausgestattet. Für detaillierte Analysen wäre das zu wenig.

Auch konnten wir die gewünschten Daten nicht über kostenpflichtige APIs wie Flightstats oder Flightaware bekommen.

Kooperation mit Deutschem Fluglärmdienst

Der DFLD archiviert Flugspuren in der Nähe großer Flughäfen in Deutschland. Diese können auf deren Webseite zudem mehrere Jahre rückwirkend angezeigt werden – mit einer Erfassung von mehr als 96 Prozent. Routen können auf einer statischen Karte oder auf Google Maps bzw. Earth angesehen werden. Die Daten kann man dort auch im Keyhole Markup Language (KML)-Format herunterladen.

Daten eines Air-Berlin-Flugs

Lat, Lng, dB(A): Flugspur-Daten eines Air-Berlin-Flugs

Nach mehreren E-Mails, Telefonaten und Teamviewer-Sitzungen mit Technik und Vorstand des Vereins einigten wir uns auf eine Zusammenarbeit. Wir bekamen die Flugspur-Daten mit Lärmberechnungen nach dem offiziellen AzB-Standard kostenlos im deutlich schlankeren CSV-Format geliefert – rückwirkend und täglich aktuell. Im Gegenzug verweisen wir in unserer Anwendung an mehreren Stellen auf das entsprechende Angebot des DFLD.

Die Datenqualität war von Anfang an sehr hoch. Sie wurde uns auch in Gesprächen mit Experten des Deutschen Luft- und Raumfahrtzentrums sowie Piloten und Flughafen- bzw. DFS-Angestellten, Abgleichen mit offiziellen Daten, ungezählten Stichproben und statistischen Auswertungen bestätigt. Hilfreich hierbei war auch der Data-Bulletproofing-Guide von ProPublica.

Umsetzung mit ProPublica-Datenjournalisten

Nun mussten wir einen Weg finden, eine Datenbank aufzubauen, die Daten visuell umzusetzen und Geschichten aus den Zahlen zu  gewinnen. Dafür bewarb ich mich in dem Datenjournalismus-Team von ProPublica in New York für das von der Knight Foundation unterstützte P5-Stipendium. In mehreren Telefonkonferenzen präsentierte ich das Projekt. Scott Klein und seine Kollegen fanden es spannend. Und einen Monat später, im November 2012, saß ich schon im Flieger nach New York.

Hier entstand der Flugroutenradar

Hier entstand der Prototyp des Flugrouten-Radars

Dort baute ich gemeinsam mit Jeff Larson und Al Shaw ein Grundgerüst mit dem Framework Ruby on Rails. Weil wir uns mit den Flugspuren im dreidimensionalen Raum befanden, wählten wir als Datenbank PostGIS, eine Erweiterung von PostgreSQL, die mit komplizierten Geoberechnungen umgehen kann. Damit kann etwa ganz leicht festgestellt werden, ob eine Polyline (Flugspur) in einem Polygon (Ortsteil) liegt.

Nach zwei Wochen hatten wir eine Anwendung programmiert, die genau das tat, was wir ursprünglich wollten: Überflüge über Ortsteilen und Gemeinden automatisch zählen sowie Ranglisten erstellen. Außerdem konnten Nutzer nach der Adresseingabe Flüge in einem gewissen Radius über ihrem Standort sehen. Erst noch in 2-D von oben.

3-D-Visualisierung im Browser ohne Plugins

Jeff experimentierte aber an einer 3-D-Darstellung der Flugrouten, da diese so auch bei größerem Flugaufkommen durch die horizontale Fächerung übersichtlicher und realistischer dargestellt werden können.

Programmiert von Jeff Larsson

Erster Prototyp der 3-D-Karte von Jeff Larson

Zwar gibt es 3-D-Karten wie etwa die von Nokia Maps, wie die von Apple oder Google auf Smartphones, Experimente auf Basis von Open Street Maps und natürlich Google Earth. Allerdings benötigt man für viele von ihnen Plugins wie etwa WebGL (Web Graphics Library), die nicht von allen Endgeräten unterstützt werden.

Da wir eine plattformübergreifende Anwendung veröffentlichten wollten, bedienten wir uns einer eigenen Lösung, einer Mischung aus CSS-3-D-Transforms, SVG-Vektoren und statischen Karten. Dabei wird der entsprechende Kartenausschnitt per CSS geneigt und die Flugspuren mit raphael.js als Vektoren auf Basis der Flughöhe projiziert.

Mapbox, Leaflet und Yahoo statt Google

Google stellt mit seinen Maps– und Geocoding-Diensten mitunter die besten auf dem Markt. Bei der Berliner Morgenpost kamen die Tools häufig zum Einsatz. Diesmal haben wir uns aber dagegen entschieden. Das hat zwei Gründe: Google verlangt viel Geld bei kommerzieller Nutzung über ein gewisses Kontingent (z.B. bei mehr als 2500 Geocoder-Abfragen) hinaus. Außerdem verbietet Google in seinen AGB die 3-D-Darstellung seiner Karten.

Google, OSM, Mapbox, Nokia hier vergleichen: http://bit.ly/16liEFI

Google, OSM, Mapbox, Nokia hier vergleichen: http://bit.ly/16liEFI

Nach einigen Tests und Vergleichen entschieden wir uns für die Karten von Mapbox. Die basieren auf den Daten der offenen Kartensoftware Open Street Maps. Die Straßen der Hauptstadtregion (Berlin und angrenzende Brandenburg-Gemeinden) sind dort nahezu 100% exakt erfasst. Mapbox bietet darüber hinaus eine Static-API für statische Tiles, die wir für die 3D-Darstellung benötigen. Außerdem lassen sich die Karten mit dem Tool Tilemill sehr einfach stylen. Mapbox bietet in der Bezahlvariante sogar mehr oder weniger brauchbare Satelliten-Bilder. Die 2-D-Karten wurden mit dem Framework Leaflet umgesetzt.

In der Anwendung kam ursprünglich Nominatim, der kostenlose (Reverse-)Geocoder von Open Street Maps, zum Einsatz. Der Dienst funktioniert zwar relativ gut und schnell, allerdings sind vor allem in Brandenburg und Berliner Randbezirken nicht alle Hausnummern indexiert. Da unsere Anwendung aber auf dem Geocoder als zentrales Element basiert, waren uns exakte Treffer bis auf Hausnummern wichtig. Wir entschieden uns also für den kostenpflichtigen Placefinder von Yahoo. In seiner Treffergenauigkeit kommt er dem Google-Geocoder schon sehr nahe.

D3, Responsive, Permalinks

„If it doesn’t work on mobile, it doesn’t work!“ Wir haben die Anwendung nicht nur mobiloptimiert, da immer mehr Nutzer die Berliner Morgenpost per  Smartphones und Tablets besuchen. Mit der Standortsuche bieten wir auch ein Feature, das den Flugverkehr direkt über dem aktuellen Standort zeigt. Ohne Adresseingabe, sondern mit der HTML5 Geolocation API. Die Ansicht passt sich aufgrund des Responsive Designs der Größe des Gerätes automatisch an.

Responsive Design passt sich an Endgeräte an

Responsive Design passt sich an Endgeräte an

Dieses Vorhaben stellte sich als sehr kompliziert heraus, weil die Hauptseite der Berliner Morgenpost nicht responsive ist. Wir wollten die Anwendung aber nahtlos in unser Angebot integrieren. Außerdem konnten wir den Flugrouten-Radar nicht wie unsere bisherigen interaktiven Anwendungen bei der Berliner Morgenpost einfach als iframe einbinden. Ein Nachteil unserer früheren interaktiven Anwendungen war nämlich, dass sie eine URL haben, die einen bestimmten Anfangszustand zeigt. Wir wollten aber jeden Zustand und damit Einzelerkenntnisse der Anwendung bookmarkbar und teilbar machen. Die Adresse passt sich also jedem Zustand an und kann dann etwa bei Twitter, Facebook und Google+ geteilt werden. Die Lösung war eine hauseigene API, mit der Seitenteile dynamisch zugeschaltet werden können.

Für die Darstellung der Balkendiagramme kam DC.js, eine Erweiterung von Crossfilter basierend auf D3 (Data-Driven Documents) zum Einsatz. Für Balken- und Liniendiagrammen in unseren Artikeln nutzen wir Datawrapper.

Ausbau, weitere Ideen, Lehren

Wir wollen die historischen und täglich aktuellen Daten mit weiteren Daten verknüpfen. Auch wollen wir noch mehr den Fokus auf Prognosen für die künftigen BER-Routen mit dem Hintergrund der Einzelfreigaben-Praxis legen. Außerdem planen wir Twitter-Accounts, die automatisiert entsprechende Daten twittern. Darüber hinaus denken wir auch über eine Foursquare-Lösung nach, wie sie etwa ProPublica für eine Datengeschichte umgesetzt hat. Auch wollen wir Ideen in Richtung Crowdsourcing umsetzen.

Das Benutzerinterface entsteht

Das Benutzerinterface entsteht

Als besonders trickreich hat sich die 3-D-Karte als zentrales Element der Anwendung herausgestellt. Sie basiert auf nicht standardisierten Features und ist daher sehr experimentell. Besonders Chrome und iOS hatten Probleme, dass wir auf diesen Systemen die Anzahl der angezeigten Flugspuren begrenzen mussten. Auch funktioniert die 3-D-Karte nicht mit dem Internet Explorer, der das dafür nötige „preserve-3d“ nicht unterstützt.

Außerdem hatten wir viele Erkenntnisse erst während der Arbeit mit den Daten und der Anwendung. Da es uns aber aufgrund unserer knappen Deadline nicht möglich war, den Flugrouten-Radar und dessen Logik dahinter immer wieder umzuwerfen, fehlen einige Features, die wir zum Start eigentlich gerne noch gehabt hätten.

Da wir den Flugrouten-Radar aber nicht als für immer abgeschlossene Anwendung, sondern eher als Prozess sehen, wollen wir die Funktionalität weiter verbessern und immer den aktuellen Möglichkeiten des Web anpassen. Währenddessen wird die Datenbank ein täglich umfangreicheres Recherchetool, das die Redaktion mit dem Tool pgAdmin befragen kann.

Der Flugrouten-Radar ist unsere LP. Es wird davon noch viele Single-Auskopplungen geben. Und bis zur BER-Eröffnung sind ja vermutlich noch ein paar Jahre Zeit für neue Features und Geschichten.

Über Kritik, Hinweise, Anregungen freue ich mich hier in den Kommentaren, bei Twitter, Facebook und Google+

Programmier-Crashkurs für Journalisten

Online-Journalismus ist so viel mehr als nur Text, Bild, Foto, Audio oder Video. Erst wenn Medien kombiniert werden, ergeben sich Geschichten, wie sie nur im Web gezeigt und nicht in der Zeitung, im Fernsehen oder im Radio dargestellt werden können. Mit Content Management Systemen und Tools, die in Redaktionen eingesetzt werden, stößt man allerdings schnell an seine Grenzen, wenn man einzigartige, auf bestimmte Geschichten zugeschnittene Darstellungsformen haben will.

Journalisten müssen nicht zwingend selbst programmieren können. Allerdings sollten vor allem Online-Journalisten die Arbeit eines Programmierers so gut kennen wie der Fernsehredakteur die Arbeit eines Cutters kennt: Kurze Nachrichtenstücke können Fernsehredakteure selbst schneiden. Bei großen Reportagen sollte lieber der Cutter ans Werk.
Sprich: Bei größeren Datenjournalismus- und Multimedia-Projekten sollte man nicht auf Programmierer verzichten. Es ist aber hilfreich, schnell einen Datensatz selbst zu scrapen, eine API auszulesen oder eine interaktive Karte erstellen zu können. Oder zumindest zu wissen, was technisch möglich ist, um den Aufwand für eigene Format-Ideen realistisch einschätzen zu können.

Dieser Beitrag erklärt erst die Grundlagen und die Grundausstattung der Web-Entwicklung und bietet dann einen Überblick über aktuelle Web-Techniken und Frameworks, die man als Journalist zumindest einmal gehört haben sollte.

Grundlagen

Als erstes benötigt man Grundkenntnisse in der Auszeichnungssprache HTML, der Layoutsprache CSS und der clientseitigen Skriptsprache Javascript. Ob Datenvisualisierung, Multimedia-Reportage oder webbasierte Smartphone-App: Grundsätzlich basiert fast alles auf diesen drei Web-Techniken.

HTML(5)

HTML5-Logo

HTML5-Logo

Die Auszeichnungssprache Hypertext Markup Language (HTML) ist die Grundlage prinzipiell aller Webseiten im Netz. Man erstellt eine .html-Datei, schreibt etwas Code, lädt die Datei per FTP auf einen Webserver hoch und kann sie dann von dort von jedem Browser aus aufrufen.

Zwar kann man HTML einfach in jedem x-beliebigen Text-Editor schreiben. Komfortabler ist aber eine Entwicklungsumgebung. Zu empfehlen sind die einfachen, kostenlosen HTML-Editoren wie Phase oder Smultron (kostenlos). Häufig genutzt werden auch Sublime TextCoda und Espresso. Größere IDE (Integrierte Entwicklungsumgebungen) wie Komodo Edit oder Aptana (kostenlos) helfen unter anderem bei der Kontrolle und dem schnelleren Schreiben der Syntax, also der „Code-Grammatik“. Zusätzlich sollte man sich Tools wie Firebug oder Chrome Developer Tools und Code-Hosting-Dienste wie Github einrichten. Als eigene CMS können Drupal oder WordPress eingesetzt und individuell angepasst werden.

Erst 2014 will das World Wide Web Consortium (W3C), das sich für einheitliche Standards im Web einsetzt, HTML5 offiziell empfehlen. Faktisch kann man es aber schon jetzt benutzen. Ältere Browser haben aber Probleme damit. Für die muss man dann eigene Versionen oder abgespeckte Fallback-Varianten erstellen. Oder man fordert den Nutzer gleich zu Beginn auf, die neueste Version eines bestimmten Browsers zu installieren.

In HTML werden nur die Inhalte mit ihrer entsprechenden Auszeichnung geschrieben. Mit Tags wie <h1>, <p> oder <div> gibt man an, welcher Abschnitt Überschrift, welcher Fließtext und welcher eine Box sein soll. Das Layout wird später mit Cascading Stylesheets (CSS) festgelegt. Inhalt und Layout sollten immer voneinander unabhängig erstellt werden.

Einstieg und Tutorials:

CSS

CSS-Beispiel

CSS-Beispiel

Mit der Formatierungssprache Cascading Stylesheets (CSS) werden Layouts von HTML-Seiten unabhängig von der Funktionalität festgelegt. Derzeit wird CSS in der Version 2.1 vom W3C empfohlen. CSS3 kann aber noch einiges mehr – befindet sich aber derzeit noch in der Entwicklung. Teile der neuen Spezifikation werden aber schon von aktuellen Browsern unterstützt.

Die größten Neuerungen von CSS3 sind Elemente wie Animationen und Übergänge. Damit können Effekte mit Texten und anderen Objekten im Browser dargestellt werden, wie sie bisher nur etwa mit Flash möglich waren. Ein weiterer wichtiger Aspekt dabei ist Responsive Webdesign, einer Technik, Webseiten so zu gestalten, dass sie sich verschiedenen Endgeräten und deren Bildschirmgrößen anpassen.

Will man also einem HTML-Element wie einer <div id=“box“>-Box nun eine Layout-Eigenschaft wie einen roten Hintergrund zuweisen, so kann man das mittels Name-Wert-Zuweisung in einer eigenen .css-Datei, direkt an dem entsprechenden HTML-Element oder im HTML-Vorspann definieren. Also konkret: #box {  background-color: #cc0000; }

Einstieg und Tutorials:

Javascript

Javascript-Beispielcode

Javascript-Beispielcode

HTML-Seiten sind statisch. Um aber dynamische Webseiten zu erstellen – z.B. wenn sich ein Inhalt bei Klick auf einen Button ändern soll, benötigt man eine Skriptsprache. Es gibt serverseitige Skriptsprachen wie PHP, Python oder Ruby und clientseitige Skriptsprachen wie Javascript (Javascript wiederum ist auch serverseitig einsetzbar).

Javascript hat den Vorteil, dass es direkt vom Browser gelesen und ausgegeben werden kann. Auch ist Javascript recht einfach und es existieren dafür unzählige Javascript-Bibliotheken, also bereits programmierte Module, die im eigenen Code geladen und eingesetzt werden können. Diese bindet man im <head>- oder <body>-Bereich des HTML etwa so ein: <script src="processing-1.3.6.min.js"></script>.
Außerdem gibt es  Javascript-Frameworks wie jQueryPrototype, Backbone, Underscore oder Angular, die Programmierarbeit abnehmen. Nicht nur deswegen hat die Popularität und Relevanz von Javascript in letzter Zeit enorm zugenommen, da auch aufwendigste Anwendungen damit umgesetzt werden können.

Einstieg und Tutorials:

Text und Daten

Weltweit öffnen Unternehmen und Verwaltungen nach und nach ihre Datenbanken für die Öffentlichkeit. Dadurch entstehen immer größere Datenmengen, die in unterschiedlichen Formen zugänglich gemacht werden.

Im schlechtesten Fall werden die Daten im geschlossenen Portable Document Format (PDF) bereitgestellt. Beispiel: Fahrradunfälle in Berlin nach Straßen. Diese Dateien müssen umständlich mit entsprechender Software wie dem kostenpflichtigen Abby Finereader oder dem kostenlosen Tool Documentcloud umgewandelt werden. Besser ist es, wenn die Daten im Sinne des Open Data in maschinenlesbarer Form als Comma-Separated Values (CSV), Extensible Markup Language (XML), Javascript Object Notation (JSON), als Ressource Description Framework (RDF) oder zumindest als Excel-Tabelle zum Download bereitgestellt werden. Im besten Fall werden die Daten per Schnittstelle (API) veröffentlicht.

Web APIs

Ein Weg, dynamisch und in Echtzeit an Daten zu gelangen, ist der über eine Schnittstelle, einem Application Programming Interface (API). Über sie können Daten von Maschine zu Maschine ausgelesen und dann weiterverarbeitet werden. Es existieren mehrere Tausend solcher Web APIs im Netz. Es gibt APIs von sozialen Netzwerken wie Twitter oder Facebook über APIs von Städten wie Leipzig mit Verwaltungsdaten oder Verkehrsdaten von Verkehrsbetrieben wie dem VBB bis hin zu Nachrichten APIs, die so ihre Artikel nach außen hin öffnen wie die New York Times oder der Guardian.

JSON-Ausgabe der API-Anfrage https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name=digitalerwandel

JSON-Ausgabe der API-Anfrage aller Follower-IDs von @digitalerwandel http://bit.ly/JaZhR8

Prinzipiell funktionieren Web-APIs so, dass man durch die bestimmte Eingabe einer URL ein entsprechendes Ergebnis geliefert bekommt. Ein Beispiel: Die Eingabe der URL http://search.twitter.com/search.json?q=Stromausfall gibt sämtliche Tweets aus, die den Suchbegriff „Stromausfall“ enthalten (Update 08.10.2013: Twitter hat auf eine neue API-Version umgestellt. Ein ähnliches Beispiel wäre die API von Wikipedia). Die Ausgabe erfolgt in diesem (und in den meisten Fällen) als eine lange Zeichenkette im Format JSON. Diese müssen dann im Programmcode verarbeitet werden.

Diese Tweets können auch automatisiert in eine Datenbank geschrieben werden. So können sich Journalisten eigene Recherchedatenbanken zu verschiedenen Themen aufbauen. Für Mashups können verschiedene APIs miteinander kombiniert werden, was zu völlig neuen Erkenntnissen führen kann. Auch ist es für Journalisten sinnvoll, APIs zu eigenen Projekten anzubieten – etwa unter einer nichtkommerziellen Creative-Commons-Lizenz. So können Nutzer selbst eigene oder neue Erkenntnisse aus den Datensätzen ziehen.

Einstieg und Tutorials:

Web Scraping

Werden im Netz verfügbare Daten nicht in einem der oben genannten Formate oder eine API bereitgestellt, bleibt neben der händischen Auswertung nur, die Informationen auf Webseiten mit einem Programm auszulesen und – unter Beachtung der rechtlichen Hintergründe – weiterzuverarbeiten beziehungsweise in einer eigenen Datenbank abzuspeichern. Außerdem sind große Teile des Web überhaupt nicht indexiert, weil die Inhalte etwa hinter dynamischen Formularen oder Anmeldeschranken versteckt sind. Auch diese Daten können automatisiert ausgelesen und gespeichert werden. Dieser Vorgang wird als Web Scraping bezeichnet.

Mit einem Ruby-Skript wurden in diesem Beispiel alle Daten der abgehenden Flüge am 25. April um 9:45 vom Flughafen Schönefeld gescraped und in eine CSV-Datei gespeichert.

Mit einem Ruby-Skript wurden in diesem Beispiel Flugdaten gescrapt und in eine CSV-Datei gespeichert.

Es gibt viele Möglichkeiten, mithilfe freier Web-Technologien so an Daten von Webseiten zu gelangen. Grundsätzlich wird eine serverseitigen Skriptsprache wie PHP, Python, Perl oder Ruby benötigt, um einen eigenen Parser zu schreiben, der diese Arbeit entweder manuell oder per Cronjob in bestimmten Zeitfenstern verrichtet. Allerdings kann man auch clientseitig mit der Unterstützung von Node.js scrapen. Frameworks hierfür wären etwa Scrapy oder Node.io.

Die einfachste Vorgehensweise ist, die Inhalte der entsprechenden HTML- beziehungsweise XML- oder auch CSS beziehungsweise X-Path-Markup auszulesen. Dafür gibt es zahlreiche Bibliotheken für die oben genannten Skriptsprachen wie Nokogiri für Ruby. Sollen Daten hinter Formularen oder Suchfeldern gescrapt werden, so muss etwa die Ruby-Bibliothek Mechanize zusätzlich eingesetzt werden.

Die Aufbereitung der Daten – das so genannte Data Wrangling – erfolgt dann meist über Tools wie Data Wrangler, Google Refine oder Mr. Data Converter.

Einstieg und Tutorials:

Datenbanken

Da mit lokal abgespeicherten Daten wie im oberen Beispiel nicht viel angefangen werden kann, müssen sie online in Datenbanken gespeichert werden.

Die phpMyAdmin-Ansicht der MySQL-Datenbank dieses Blogs

Die phpMyAdmin-Ansicht der MySQL-Datenbank dieses Blogs

Dafür kommen zurzeit häufig proprietäre Tools wie etwa Spreadsheets oder Fusion Tables von Google zum Einsatz. Zugriff auf die Tabellen in Form einer relationalen Datenbank erhält man bei ersterem entweder über die eigene API oder zusätzliche Javascript-Bilbiotheken wie Tabletop.js.

Allerdings gibt es auch eine große Anzahl an Open-Source-Datenbanken. Die seit längerer Zeit am meisten genutzten sind die relationalen Datenbanken MySQL und Postgres. Der Grundaufbau bei der SQL-Datenbankabfragesprache SQL-Syntax. ist: SELECT spalte FROM tabelle WHERE bedingung. Ähnlich funktioniert das auch bei Google Fusion Tables.
Derzeit setzen sich auch vermehrt nicht-relationale Datenbanken durch. Der Grund: Im Gegensatz zu relationalen Datenbanken verfügen „NoSQL“ (Not only SQL)-Datenbanken über eine schemafreie Struktur, sind horizontal skalierbar und damit besser für große Datenmengen wie etwa in sozialen Netzwerken einsetzbar. Es existieren mehr als hundert solcher Datenbanken. Zu den bekanntesten Vertretern zählen MongoDB und CouchDB.

Einstieg und Tutorials:

Grafik und Animation

Während Elemente wie interaktive Grafiken und Animationen im Web lange Zeit vorwiegend mit Adobe Flash umgesetzt wurden, können gleichwertige Multimedia-Applikationen heute direkt im Browser mit freien Web-Technologien, Tools und Frameworks auf Basis von HTML5 umgesetzt werden. Sie sind so auf prinzipiell allen Endgeräten – auch iPhone und iPad – darstellbar.
Dabei haben sich zwei grundsätzliche Herangehensweisen durchgesetzt. Einerseits die Arbeit mit dem Grafikformat Scalable Vector Graphics (SVG) und andererseits mit dem HTML5-Canvas-Element.
Für beide Herangehensweisen existieren zahlreiche Bibliotheken und Frameworks, die einfach in den HTML-Code eingebunden werden und von dort aus angesteuert werden können. Eine für Journalisten relevante Auswahl wird im Folgenden vorgestellt.

SVG  / D3.js und Raphael.js

SVG ist kein neues Grafikformat. Da es aber erst seit kurzer Zeit von beinahe allen gängigen Browsern unterstützt wird, kommt es immer häufiger zum Einsatz. Mit SVG lassen sich zweidimensionale Vektorgrafiken direkt im Browser darstellen. Es wird also keine Grafik-Datei wie Portable Network Graphics (PNG) lediglich statisch eingebettet, sondern man schreibt SVG direkt in den Quellcode. Dieses DOM kann dann direkt per Javascript – etwa mit Event Handlern – manipuliert, also dynamisiert werden.

Die New York Times visualisiert mit d3.js Daten

SVG-Dateien bekommt man an vielen Stellen im Netz, wie etwa die Wahlkreise von Berlin auf einer Karte. Man kann die Elemente aber auch mit kostenlosen Tools wie Inkscape und SVG Edit selbst zeichnen und den Code davon direkt in den Programmcode übertragen.

Um aus diesen reinen Vektorgrafiken interaktive Infografiken zu erstellen, gibt es dann Frameworks wie d3.js oder Raphael.js.

D3 ist das Kürzel von Data-Driven Documents und ist ein Framework für Datenvisualisierung. Es bietet spezielle Funktionen für die Manipulation von DOM-Objekten auf Basis von Daten. D3 stammt von Protovis ab.

Raphael.js erleichtert vor allem das Zeichnen und Animieren von Vektorgrafiken. Mit gRaphael gibt es auch ein Framework speziell für die Erstellung von Diagrammen.

Einstieg und Tutorials:

Praxisbeispiele:

HTML5-Canvas / Processing.js

Das Canvas-Element in HTML5 erlaubt es, direkt im Code dynamisch zweidimensionale Bitmap-Grafiken zu erzeugen und diese pixelgenau zu manipulieren. Es ist nicht besonders komfortabel zu nutzen. Daher gibt es auch hierfür Frameworks wie Paper.js, die die Arbeit sehr vereinfachen. Hervorgehoben soll hier aber Processing.js.

Visualisierung mit Processing.js

Visualisierung mit Processing.js

Processing.js stammt von Processing, einer Open-Source-Programmiersprache und -entwicklungsumgebung für Visualisierungen und Animationen, ab. Die Javascript-Bibliothek erweitert das Canvas-Element um weitere Funktionen, wie die Möglichkeit, Formen und Animationen zu erstellen – und das direkt im HTML/Javascript-Code ohne den Einsatz von Plugins wie Flash oder Java. Auch kann hier mit SVG gearbeitet werden.

Einstieg und Tutorials:

Praxisbeispiele:

Web GL

Die Spezifikation Web Graphics Library (WebGL) ist kein offizieller Teil von HTML5, wird aber dennoch von den meisten aktuellen Browsern unterstützt. Der Internet Explorer unterstützt den Standard allerdings derzeit ebenso wenig wie das mobile Betriebssystem iOS. Allerdings soll die Unterstützung weiter ausgebaut werden.

Die Web-Doku „One Millionth Tower“ wurde auch mit WebGL umgesetzt

WebGL erweitert das Canvas-Element um die Möglichkeit, 3D-Grafiken direkt im Browser darzustellen. Eine weitere Besonderheit an WebGL ist, dass es hardwareunterstützt,  also direkt von deiner Grafikkarte läuft. Das ermöglicht etwa 3D-Spiele oder menschliche Modelle. Und etwas journalistischer ist die Darstellung von Achsen auf einer dreidimensionalen Weltkugel.
Infografiken kann so etwa eine dritte Achse hinzugefügt werden. So lassen sich aber auch Graphen und ihre Verbindungen in einem dreidimensionalen Raum darstellen. Realisiert wurde dieses Beispiel mit der Javascript-Bibliothek three.js. (Zweidimensionale Graphen lassen sich mit der Javascript-Bibliothek sigma.js darstellen.) Auch die Library C3DL bietet zusätzliche Funktionen für die Entwicklung mit WebGL.

Tutorials:

Praxisbeispiele:

Interaktive Karten

Karten lassen sich sehr leicht mit Tools wie Google Maps oder Google Fusion Tables erstellen. Dabei ist allerdings problematisch, dass, wie bei allen externen Tools, eigene Daten fremden Unternehmen übergeben werden. Wer diese aber bei sich behalten will, muss eine eigene Kartenlösung aufsetzen.

Interaktive Karten mit Kartograph.js erstellen

Interaktive Karten mit Kartograph.js erstellen

Das lässt sich etwa mit Openlayers, Modest Maps oder Mapstraction umsetzen. Dazu benötigt man noch einen Tilecache-Server und einen Map-Server wie Mapnik, Geoserver oder Mapserver. Außerdem müssen die Geodaten in Datenbanken abgespeichert werden. Dafür eignen sich besonders gut PostGIS zusammen mit PostgreSQL als Abfragesprache. Und dann benötigt man für seine Karte noch einen Straßenlayer. Den gibt es etwa bei Openstreetmap. Ein weiteres wichtiges Programm für die Verarbeitung von Daten auf Karten ist das Programm QGis.

Geodaten werden häufg als Keyhole Markup Language (KML) oder Shapefile bereitgestellt. So bietet das Land Nordrhein-Westfalen seine Wahlkreise als Shapefile an. Die Berliner Ortsteile werden als KML angeboten.

Darüber hinaus existieren zahlreiche Frameworks wie Kartograph.js, mit denen interaktive Karten erstellt werden können, oder OSM Buildings, mit dem sich Gebäude auf einer Karte dreidimensional darstellen lassen.

Einstieg und Tutorials:

Praxisbeispiele:

Timelines

Es gibt im Netz viele interaktive Zeitleisten-Tools wie Tiki-Toki oder Dipity. Allerdings stößt man mit denen schnell an seine gestalterischen Grenzen. Es existieren Frameworks, mit denen man Timelines leicht selbst erstellen kann.

LA Times nutzt Timesetter

Die LA Times nutzt das Tool Timeline Setter

Ein solches offenes Framework ist der Timeline-Setter des NewsApps-Teams von Propublica. Damit lassen sich schlanke Zeitleisten auf HTML-Basis erstellen. Unter anderem kann die Quelle ein Spreadsheet sein.
Auch Timeline.js erleichtert die Implementierung von verschienen Quellen wie Twitter, Youtube oder Facebook in eigene Zeitleisten.
Sehr interessant ist auch Timeflow, das die Darstellung von großen Datenmengen in unterschiedlichen Formaten erlaubt.
Anstatt der üblichen horizontalen Zeitleisten bietet das Timeline-Framework von WNYC eine vertikale Anordnung. Es zieht sich die Daten aus einer Spreadsheet-Vorlage.

Einstieg und Tutorials:

Praxisbeispiele:

Audio und Video

Das World Wide Web als Teil des Internet ist ein interaktives System, in dem Dokumente untereinander per Hyperlink verbunden sind. Es verändert sich derzeit vor allem dahingehend, dass Multimedia-Elemente wie Animation, Video oder Audio nativ eingebunden und vollständig in das Web integriert werden können – Stichwort: Hypervideo, Hyperaudio. Was früher nur etwa mit Plugins ging, kann heute direkt im HTML/Javascript-Code gemacht werden.

HTML5 Video- und Audio-Tag

Viele Nachrichtenseiten veröffentlichen auch 2012 noch multimediale Anwendungen mit Flash-, Silverlight- oder Java-Plugins beziehungsweise verzichten gänzlich auf den Einsatz von HTML5. Dabei bieten neben dem bereits beschriebenen <canvas>-Tag auch der <video>- und der <audio>-Tag großes Potenzial für multimediale Darstellungsformen.

Die nativen Kontrollbalken

Die nativen Kontrollbalken

Die native Einbindung von Medienelementen wie Audios und Videos bringt vor allem den Vorteil, dass sie mit HTML5-Befehlen per Javascript interaktiv gesteuert werden können. Es werden kontinuierlich Events geworfen, wie etwa „progress“ – bzw. der Eventhandler „onprogress“, das einen Wert für den Ladezustand ausgibt, oder „seeked“ – und der entsprechende Eventhandler „onseeked“, das ausgibt, wie oft im Video gespult wurde. Außerdem können noch Properties wie „currentTime“, das die aktuelle Zeit aus dem Audio oder Video ausgibt oder etwa „volume“ der das den Wert für die Lautstärkeeinstellung bereitstellt, genutzt werden. Das ermöglicht etwa direkte Verlinkungen in stetigen Multimedia-Elementen und die Interaktion mit anderen Medien.
Auch bieten Player wie Youtube oder Vimeo auf ihren Developers-Seiten eine solche Interaktions- und Individualisierungsmöglichkeit, wenn auch eingeschränkt, an.

Einstieg und Tutorials:

Praxisbeispiele:

Popcorn.js

Popcorn.js ist eine Javascript-Bibliothek, die Audio- und Videodateien zeitgesteuert mit Kontext aus dem Web anreichern kann. Sie bietet die Möglichkeit, Webinhalte vom reinen Text über Links bis hin zu Karten, Twitter-Feeds oder Text zeitgesteuert in und um Audio- oder Videoelemente herum darzustellen. So können sich Nutzer etwa durch die Zusatzinformationen tiefer mit dem Thema im Video befassen zu können. Popcorn.js „befreit“ also Multimedia-Elemente im Web – weg von etwa im Video durch die Schnittsoftware unwiederbringbar “eingebrannten” Elementen wie statische Bauchbinden.

Spart viel Programmcode: der Popcorn Maker

Spart viel Programmcode: der Popcorn Maker

Es stehen zahlreiche vorgefertigte Plugins zur Verfügung, die auch kombiniert werden können. Die Web-Technik wurde etwa bei dem Multimedia-Feature DDR-Flüsterwitze – Protest hinter vorgehaltener Hand vom Autor dieses Blogs, Julius Tröger, eingesetzt. In dem Beitrag Webinhalte in Webvideos darstellen – Popcorn.js für Journalisten auf diesem Blog gibt es dazu einen praxisnahen Erfahrungsbericht. Mit dem Popcorn Maker wird ein Tool angeboten, das wie ein Online-Schnittprogramm funktioniert und zum Video passenden Quellcode ausgibt.

Einstieg und Tutorials:

Praxisbeispiele:

Hyperaudio

Audio kann besser dargestellt werden, als in einem Embed-Player. Mit Hyperaudio wird Audio Teil des Netzes und im Sinne des Hypermedia vollständig ins Web integriert.

Hyperaudio - Ton mit interaktivem Transkript

Hyperaudio – Ton mit interaktivem Transkript

Es existieren bereits Projekte, bei denen etwa durch die Synchronisation von Audio und Transkripten Interviews völlig neu dargestellt werden. Dabei läuft neben dem Audio live ein Transkript mit, das auf Wunsch sogar angeklickt und an die entsprechende Stelle gesprungen werden kann. Weitere interessante Beispiele sind der Einsatz des Audiodienstes Soundcloud für Flash-freie Audio-Slideshows oder eine interaktive Radiosendung. Umgesetzt wird das unter anderem auch mit dem Framework Popcorn.js beziehungsweise dem offenen Player jPlayer. So können etwa in Kombination mit APIs wie der des Audiodienstes Soundcloud völlig neue Web-Formate erstellt werden.

Einstieg und Tutorials:

Praxisbeispiele:

SMIL Timesheet.js

Neben HTML5 – in der Kombination mit Frameworks wie Popcorn.js – gibt es eine weitere Möglichkeit, Multimedia-Elemente interaktiv, aufeinander abgestimmt, zeitbasiert und direkt im Web integriert darzustellen.

Timesheet.js

Mit HTML5, CSS3 und SMIL wurde eine klassische Radiosendung als Web-Audio-Dokumentation umgesetzt.

Die Synchronized Multimedia Integration Language gibt es bereits seit 1998. SMIL ist ein Web-Standard für die zeitsynchrone Einbindung, Steuerung und Integration multimedialer Inhalte. Allerdings wird es von keinem gängigen Browser unterstützt. Es gibts aber die Möglichkeit, SMIL-Elemente mit Javascript-Bibliotheken wie Timesheet.jsin HTML einzusetzen und wird daher auch für den journalistischen Einsatz interessant.

Denn: Nachrichten bauen sich eigentlich immer aus aus mehreren Medienelementen zusammen. Eigenen oder fremden. Mit Techniken wie SMIL können Roh-Audio- und Videomaterial, Grafiken, Animationen und Text sowie weitere Medienelemente wie Tweets oder Youtube-Videos im Quellcode zu einem Beitrag geschnitten werden. Durch die Beibehaltung der Original-Medien im Gegensatz zum in sich geschlossenen Multimedia-Element kann eine völlig neue journalistische Transparenz, Nutzerintegration, Wiederverwendbarkeit und Medienkombination geschaffen werden.

Einstieg und Tutorials:

Praxisbeispiele:

Fazit:

Web-Techniken ersetzen nicht das klassische journalistische Handwerk, sie ergänzen es.

„Wir brauchen mehr Entwickler im Newsroom und mehr Journalisten, die programmieren können.“ Die Interaktiv-Chefin der AP, Shazna Nessa, geht sogar noch einen Schritt weiter und sagt, man trenne ja auch nicht zwischen Journalismus und der Fähigkeit auf Computern schreiben zu können. Andere sind der Meinung, dass Programmieren Programmierern überlassen werden sollte.

Fest steht: Es sind interessante Zeiten, in denen viel experimentiert werden kann. Deutsche Verlage betreiben kaum Forschungseinrichtungen, wie sie etwa aus der Industrie bekannt sind. Experimente müssen also aus der Redaktion kommen. Mit einem konkreten, kleinen Projekt im Kopf sollte man einfach loslegen und dabei seine Fähigkeiten erweitern. Wer an seine Grenzen stößt, der kann sich für kleine Programmieraufgaben über Freelancer-Portale Spezialisten suchen.
Bei größeren Projekten sollte die Arbeit Programmierern überlassen werden. Die in diesem Beitrag gezeigten Web-Techniken und Frameworks sind nur ein subjektiver Ausschnitt von dem, was bei der Web-Entwicklung möglich ist. Einen tieferen Einblick in „Journo-Hacking“ findet man vor allem im Datadesk-Blog der LA Times, dem Entwickler-Blog der New York Times, dem News-Apps-Teams der Chicago Tribune und den  Propublica-Nerds.

Über Hinweise, Links, Korrekturen, Praxisbeispiele und Kritik würde ich mich in den Kommentaren, auf Facebook, Google Plus und Twitter sehr freuen.

Update (2. August 2012)

Die Drehscheibe, Fachmagazin für Lokaljournalismus, hat mich zu diesem Blogbeitrag interviewt. Ich habe ihnen den Beitrag als Online-Workshop zur Verfügung gestellt.

Weiterführende Links: