Zehn Zeilen, ein Bild, ein PDF: Eine Deutschlandkarte der Bundeszentrale für politische Bildung (bpb) ahmt Papiermedien im Internet nach, um deutsche Lokalzeitungen aufzulisten. Nehmen wir an, ein Nutzer will von der Karte aus die Webseite einer Zeitung aufrufen, muss er drei Mal klicken. Denn die Karte ist statisch und es sind nur die Namen der Bundesländer eingezeichnet: Dekoration ohne Informationswert. Die Navigation erfolgt über eine herkömmliche Liste der Bundesländer.

• Aus Usability-Sicht ist die Karte der Drehscheibe nicht gut umgesetzt.
• Ein Selbstversuch: Statt Zeitungen Lokalblogs mit Hilfe der Java-Script-Library D3 visualieren.
• URL selbst eintippen: Auch die Karte mit den Lokalblogs ist nicht ideal.

Auf der Karte der Drehscheibe, dem Portal für Lokaljournalisten der bpb, sind die einzelnen Zeitungen erst auf der Ebene der Bundesländer eingezeichnet, auch diese zweite Karte ist statisch. Ein Beispiel: 53 Zeitungen gibt es in Bayern, von A wie Abendzeitung bis W wie Windsheimer Zeitung. Ein Klick auf die Mittelbayerische Zeitung löst einen abrupten Wechsel der Ladegeschwindigkeit aus. Ein pdf mit einer schräg gelegenen Titelseite vom 3. Oktober 2011 erscheint in schlechter Qualität. Darunter eine Infotabelle: Erscheinungsort (Regensburg), Auflage (116.000), Erstausgabe (1945), Facebook. Darunter in dicken, kleingeschriebenen, roten, unterstrichenen Lettern die Internetadresse.

Ich gehe wohlwollend davon aus, dass es diese Auflistung auch gedruckt gibt und diese Dateien einfach exportiert und online gestellt wurden: Für Faulheit habe ich Verständnis.

Als ich mich darüber echauffierte und auch ein bisschen amüsierte, brachte es mich auf eine Idee: Eine Deutschlandkarte mit Lokalblogs. Dazu verwende ich D3, der im Moment heißeste Scheiß im Bereich der Datenvisualisierung. D3 steht für „Data-Driven Documents“, als Erfinder der Java-Script-Library gilt Mike Bostock, der sie an der Standford-Universität entwickelt hat.

Das Besondere an D3: Es werden Vektorgrafiken erzeugt. Das lädt schnell und funktioniert seit HTML5 in allen modernen Browsern ohne zusätzliche Plugins. Die „New York Times“ hat das Potenzial von Bostocks D3 erkannt und ihn als „Graphics Editor“ eingestellt. In vielen innovativen Geschichten der New York Times, bei denen sich irgendwelche Elemente auf der Webseite bewegen, kann man Bostocks Namen entdecken.

Der Nachteil von D3 ist die steile Lernkurve. Ich brauchte Wochen regelmäßigen Bastelns, bis sich aus Geodaten und Java-Script endlich Deutschland und seine Bundesländer darstellen ließen. Für die Blogger-Karte habe ich diesen Code aus einem Unterordner geholt und ihn mit einer Liste von Lokalblogs kombiniert.

In einer separaten CSV-Datei habe ich Name, Bundesland, URL und Koordinaten der Seiten gesammelt, die Lokalblogger.de auf seiner Seite auflistet. Die ersten Werte sind leicht aus dem Quellcode von Lokalblogger.de zu bekommen. Ein bisschen „Suchen und ersetzen“ und die Datei ist fix vom Quellcode gereinigt. Ein bisschen mehr Aufwand waren die Längen- und Breitengrade. Erst musste ich aus dem Impressum den Standort suchen und dann mit einem Tool die Koordinaten ausliefern lassen.

Problematisch war es bei Blogs in der gleichen Stadt, zum Beispiel Hamburg oder Berlin. Ich habe zuerst allen die gleichen Längen- und Breitengrade zugewiesen – wenig überraschend lagen nach dem Upload alle Punkte übereinander. Ich habe dann die Koordinaten ein bisschen verschoben: Der Altona-Blog liegt zwar jetzt streng genommen nicht mehr in Altona, dafür ist er sichtbar. Ähnlich bin ich in Berlin oder Nordrhein-Westfalen verfahren. Es gibt eine Möglichkeit, dass D3 solche Punkte nicht überlappen lässt. Aber ich erwähnte die Lernkurve: Ein bisschen Handarbeit geht schneller – zumindest wenn man nicht an zukünftige Projekte denkt.

Meinen Ansprüchen bin ich nicht gerecht geworden, denn auch bei der Karte mit den Lokalblogs kann man nicht mit einem Klick auf den jeweiligen Blog gelangen – man muss sich die URL merken und selbst eintippen. Denn erstens konnte ich keine Links in die Popups einfügen. Der Standard-Befehl, um aus der CSV-Datei die URL auszulesen und ihn in einen Hyperlink-Tag zu versehen, liefert nur Fehler. Zudem wäre das völlig sinnlos, denn das Popup erscheint, wenn man mit der Maus auf einen Punkt geht. Um einen Link anzuklicken, müsste man den Punkt verlassen und das Popup schließt sich. Ein Teufelskreis. Ich hab’s dann einfach so gelassen. Für Faulheit habe ich Verständnis.