Das Blog der Visualisierung

Datenvisualisierung für Web und Print

Die Diagramm-Werkzeuge von Illustrator oder Excel haben sich im Vergleich zum Rest der Programme erstaunlich wenig weiterentwickelt. Auch im Jahre 2013 ist es mit Excel nicht ohne weiteres möglich, einen Scatterplot mit Labeln zu versehen. Die offizielle Hilfeseite sagt dazu:

In Microsoft Excel gibt es keinen integrierten Befehl, der in einem XY-Punktdiagramm oder einem Blasendiagramm automatisch Datenpunkte mit Beschriftungen versieht. Sie können jedoch ein VBA-Makro für diese Funktion erstellen.

Dies fällt umso stärker auf wenn man sieht, wie vielfältig Datenvisualisierung im Web heutzutage daherkommt. Es wäre ein Leichtes, dies den Herstellern anzulasten, aber bei genauerer Betrachtung zeigt sich, dass Visualisiserungen jenseits von Balken- und Tortendiagrammen zu vielfältig sind, als dass man sie mit einer einfachen graphischen Oberfläche konfigurieren oder erstellen könnte.

Wahlatlas.net in der gedruckten F.A.Z.

Auch in Excel steht man oft vor dem Problem, dass das Programm eine große Hife ist, wenn man das will, wass vom Programm vorgesehen ist, dass es aber haarig wird, wenn man vom vorgegebenen Pfad abweichen möchte. Das fängt schon bei der Bevölkerungspyramide an und hört bei thematischen Karten noch lange nicht auf. Vor diesem Zwiespalt standen Programme schon immer, weshalb die mächtigeren unter ihnen über eine eigene Makro-Sprache verfügen, die dort weiterhelfen soll, wo die Standardfunktionen aufhören (s.o.).

Wenn man dies weiterdenkt, dann ergeben sich natürlich die größten Freiheiten, wenn man gleich zu einer Programmiersprache greift.

Und das ist auch genau der Ansatz der JavaScript Bibliothek D3, die einem all jene Funktionen zur Verfügung stellt, die datenbasierte Graphiken benötigen: Nämlich Zahlenwerte in graphische Attribute (Länge, Breite, Position, Farbe …) umsetzen und dazu viele Hilfestellungen bietet wie z.B. für die Beschriftung von Achsen, die oft mühsamer sind als das eigentliche Diagramm. Als Einstieg hier ein Scatterplot mit Labeln, realisiert mit D3.

Wenn man der These folgt, dass es einfacher ist, eine ausgefeilte Datenvisualisierung mit D3 im Webbrowser zu entwickeln als in Illustrator, dann stellt sich die Frage, wie man dann die gedruckten Medien bedienen kann.

In der Frühzeit des Webs wurden die Inhalte zunächst für Print gedacht und entwickelt und dann nach und nach so gut es ging an das Web angepasst. Jetzt ist es durchaus möglich und sogar empfehlenswert, im Web zu beginnen und die dort programmatisch erzeugten Datengraphiken in den Print-Workflow zu übernehmen.

Hier soll kurz gezeigt werden, wie das am besten geht. Bereits in meinem SVGopen Papier SVG Strengths for Web Mapping (pdf, 8.1MB) hatte ich 2009 als ersten Vorteil das Ausdrucken angeführt. Safari und Firefox waren zum damaligen Zeitpunkt bereits in der Lage, beim Ausdrucken von Webseiten mit SVG Inhalten in eine PDF-Datei die Vektorinformation beizubehalten, was eine Weiterberbeitung für Print-Workflows erlaubte, jedoch unter Verlust der semantischen Information (beispielsweise der Wahlkreisnummer eines Polygons in einer thematischen Karte).

In den letzten Jahren gab es weitere große Fortschritte auf Seite der Browser: War der Durchbruch des Webs und das gegenseitige Lernen durch die „View Source“ Möglichkeit bedingt, kam diese lange Zeit an die Grenzen bei dynamischen Inhalten. Die Funktion „Quelltext anzeigen“ erlaubte lediglich die Untersuchung der statischen Inhalte einer Webseite. Dagegen erlauben die Developer Tools moderner Browser heute die Analyse jedes beliebigen Zustands einer Webseite; das sogenannte live DOM wird zugänglich.

Am Beispiel der Karten auf wahlatlas.net soll das Vorgehen hier kurz erläutert werden. Dazu verwendet man entweder den Browser Google Chrome oder Apple’s Safari, wobei man bei letzterem zunächst in den Einstellungen unter „Erweitert“ das Entwickler-Menü aktivieren muss. Dann klickt man im Bereich der Karte, jedoch nicht in einen Wahlkreis, weil man die Element-Information für die gesamte Karte haben möchte.

Kontextmenü: Element Untersuchen

In diesem Kontext-Menü (Rechts- bzw. ctrl-Klick) gibt es den Eintrag Element untersuchen was einer erweiterten Anzeige des aktuellen „Quelltextes“ entspricht bzw. genauer gesagt den aktuellen Zustand des DOM zugänglich macht. Nachfolgende Abbildung zeigt vereinfacht, wie das aussieht. Der Clou liegt darin, dass man in diesem Quelltext – auch bei eingeklappten Elementen – Teile der Baumstruktur einfach markieren, kopieren und weiterverwenden kann:


Developer Tools: Live DOM
Developer Tools: Live DOM

In einen Texteditor eingefügt und mit der Dateiendung .svg abgespeichert, lässt sich dies dann in Illustrator, Inkscape o.ä. verarbeiten. Ggf. kann es bei manchen Grafiken Probleme mit den Dimensionen geben. Im Wahlatlas etwa sieht das Viewbox-Attribut so aus:

<svg xmlns="http://www.w3.org/2000/svg" 
width="100%" height="100%" id="root"
viewBox="-305335 -6849488 672667 910596">

D.h. die SVG-Grafik soll immer das sie umgebende DIV vollständig ausfüllen, weshalb die Abmessungen jeweils als 100% angegeben sind. Es empfiehlt sich hier gleich vor dem Abspeichern die Dimensionen eines A4 Blattes einzugeben:

width="21cm" height="29cm"

In vielen Fällen kann dieser Vorgang mit dem Bookmarklet SVG Crowbar noch weiter vereinfacht werden. Bislang lediglich für Google's Chrome besteht so die Möglichkeit, die Grafik direkt als weiterverarbeitbare SVG Datei herunterzuladen.

Für die Karte der Wahlkreise bleibt auf diese Weise die Metainformation der Wahlkreisnummer und ihres Namens im SVG Quellcode erhalten:

<path id="w48" d="M515 … -207z" style="fill: #ffa500;">
<title>Hildesheim</title></path>

Dass eine Zeitung, deren Motto All the News That's Fit to Print ist, heute auf dem webbasierten Versionsverwaltungs-System GitHub zu finden ist und eben dort ein Bookmarklet zur Extraktion von SVG Graphiken aus Webanwendungen anbietet, zeigt einmal mehr, dass das Universalwerkzeug Browser heute sogar Teil der Druckvorstufe ist.

Labels: d3js, dataviz, de, illustrator, inkscape, print

Archives