Eine Deutschlandkarte mit Lokalblogs

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.

Klicken Sie auf den unteren Button, um den Inhalt von test.schafott.net zu laden.

Inhalt laden

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.

 


 

studiert Volkswirtschaftslehre in Regensburg und will Journalistin werden. Sie beschäftigt sich digitalem Journalismus, insbesondere der technischen Umsetzung. Ihr Blog heißt Schafott. Auf Twitter ist sie mit @cutterkom unter einem weniger martialischen Namen unterwegs. | Kontakt


Artikel per E-Mail verschicken
Schlagwörter: , , , , , , ,

7 comments

  1. Vielen Dank für den interessanten Beitrag. Die Erstellung einer interaktiven Karte fürs Web mithilfe von D3 hört sich wirklich sehr mühevoll und arbeitsinteniv an. Ich hab mal nach alternativen Lösungen gesucht und bin dabei auf eine interessante Seite gestoßen: http://www.maps4office.de/ Ich will hier keine Werbung machen, aber ich finde die Möglichkeit, Vektorkarten aus Excel-Daten zu generieren wirklich interessant (Rubrik CityMarker). Ich hab mal mit der kostenlosen Deutschlandkarte für PowerPoint, die man dort auch runterladen kann, ein bisschen experimentiert, verschiedenen Orten einen Hyperlink hinzugefügt und das ganze in PowerPoint als HTML / Webseite gespeichert. Es werden zwar viele Einzeldateien generiert, aber ich muss nichts manuell tun, die Links funktionieren wunderbar und ich habe insgesamt einen kompletten Quellcode, den ich so in meine Website einfügen kann. Vielleicht finde ich noch einen Weg, aus PowerPoint direkt oder über einen Umweg auch SVGs zu erzeugen, das wäre natürlich ideal.

    Mit diesem CityMarker braucht man nur Excel-Dateien pflegen und mithilfe eines Makros in PowerPoint importieren. Der Rest, also die Generierung der Karten mit oder ohne Beschriftung passiert automatisch. Ich überlege ernsthaft, ob ich in dieses Tool investiere, da bei mir demnächst gleich mehrere Projekte anstehen, für die ich solche Karten benötige. Das spart bestimmt eine Menge Arbeitszeit.

  2. Liebes Netzpilotenteam,

    Chapeau an Katharina Brunner für diese Karte. Wir stricken hier gerade an einem neuen responsiven Design für das Mittelhessenblog. Geht natürlich nicht nur um solche Sachen wie Design sondern auch noch mehr technische Funktionalität für endgültig vom klassischen Printjournalismus losgelöste Konzepte. Vielleicht finden wir ja hier einen Weg, auch die Internetadressen von den Blogs anzuzeigen. Sollte es gelingen, denken wir an Euch. Dann gibts Post.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert