Workshop

Online-Workshop mit Julius Tröger, Teil 3

von

Der dritte Teil des Online-Workshops der drehscheibe befasst sich mit Grafiken und Animationen. Wie lassen sich komplizierte Zusammenhänge, Zahlen, räumliche und zeitliche Einordnungen am besten darstellen? Die Texte stammen von dem Journalisten Julius Tröger. Er hat sie zunächst auf seinem Blog www.digitalerwandel.de veröffentlicht und stellt sie nun der drehscheibe zur Verfügung.

Teil 3: 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.

SVG-Dateien bekommt man überall, 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:

http://alignedleft.com/tutorials/d3
http://www.schockwellenreiter.de/blog/2012/02/10/data-driven-documents-d3
http://bost.ocks.org/mike
http://vis4.net/blog/
http://selection.datavisualization.ch
http://raphaeljs.com/reference.html
http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library
http://www.html5rocks.com/en/tutorials/raphael/intro
http://misoproject.com/dataset

Praxisbeispiele:

http://www.uefa.com/uefaeuro/season=2012/matches/
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
http://static.apps.morgenpost.de/redaktion/svg/svg.html

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 ein Framework, das die Arbeit sehr vereinfacht. Es heißt 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:

http://www.aosabook.org/en/pjs.html
http://lethain.com/getting-started-with-processing-js
http://processingjs.org/learning
http://blog.blprnt.com/blog/blprnt/tutorial-processing-javascript-and-data-visualization
http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js
https://github.com/processing-js/processing-js

Praxisbeispiele:

http://dl.dropbox.com/u/466610/nevada_map/index.html
http://mattmckeon.com/facebook-privacy

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.

WebGL erweitert das Canvas-Element um die Möglichkeit, 3D-Grafiken direkt im Browser darzustellen. 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 beziehungsweise Datenvisualisierungen 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:

http://www.aerotwist.com/tutorials/getting-started-with-three-js
http://learningwebgl.com/blog/?p=28

Praxisbeispiele:

http://highrise.nfb.ca/tag/one-millionth-tower

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.

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:

http://www.alistapart.com/articles/takecontrolofyourmaps
http://multimedia.journalism.berkeley.edu/tutorials/qgis-basics-journalists
http://www.poynter.org/how-tos/digital-strategies/146263/introduction-to-open-source-gis-tools-for-journalists
http://hub.qgis.org/projects/quantum-gis/wiki/How_do_I_do_that_in_QGIS

Praxisbeispiele:

http://www.kartograph.org/showcase

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.

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:

http://propublica.github.com/timeline-setter/doc/twitter-demo.html
https://github.com/FlowingMedia/TimeFlow/wiki
http://www.tobiaskut.de/2011/04/14/timelinesetter-tiki-toki-zeitleisten-tools-fur-entwickler-und-journalisten
http://hint.fm/blog/2010/07/29/a-timeline-takes-its-first-steps

Praxisbeispiele:

http://timelines.latimes.com/syria
http://www.lemonde.fr/election-presidentielle-2012/visuel/2012/04/21/chronologie-une-si-longue-campagne-presidentielle_1681661_1471069.html
http://www.wnyc.org/blogs/empire/2012/may/07/timeline-pedro-espadas-long-dance-law
http://www.einsteins-magazin.de/?p=1800

Der Text stammt ursprünglich von der Seite www.digitalerwandel.de. Der Blog wird betrieben von Julius Tröger (Jahrgang 1983). Er befasst sich schwerpunktmäßig mit Multimedia- und Datenjournalismus. Im Jahr 1998 gründete ein regionales Online-Jugendmagazin. Seit 2008 arbeitet er als Redakteur bei der Berliner Morgenpost, wo er sich vor allem um den Ausbau multimedialer, mobiler bzw. datengetriebener Formate kümmert. Im Jahr 2012 wurde er mit dem ersten Platz beim Axel-Springer-Preis in der Kategorie Internet ausgezeichnet. Er wurde für den internationalen Datenjournalismus-Award nominiert und gewann den zweiten Preis beim bundesweiten Open-Data-Wettbewerb Apps für Deutschland. 2011 bekam er den Publikumspreis beim Deutschen Webvideopreis. Er bloggt er auf digitalerwandel.de. Dort schreibt er zum einen über Tools und Web-Techniken, die im (Online)-Redaktionsalltag hilfreich sein können. Zum anderen veröffentlicht er dort auch Tutorials zu seinen eigenen Projekten. Wir danken ihm recht herzlich für die Zusammenarbeit.

Die Redaktion empfiehlt:
Hier finden Sie die vier Online-Workshops von Julius Tröger

Grundlagen

Text und Daten

Grafik und Animation

Audio und Video

Die Redaktion empfiehlt:

Wie viel sollte ein Online-Redakteur von den Techniken, die es im Online-Journalismus gibt, verstehen? Mindestens soviel wie ein Fernsehredakteur von der Arbeit des Cutters, meint Julius Tröger, Redakteur bei der Berliner Morgenpost. Lesen Sie hier das Interview mit dem Autor unserer Workshops.

Veröffentlicht am

Zurück

Kommentare

Einen Kommentar schreiben

Kommentieren

Bei den mit Sternchen (*) markierten Feldern handelt es sich um Pflichtfelder.