Deutschlandkarte von Lokalblogs mit D3.js

Die Drehschreibe, ein Portal der Bundeszentrale für politische Bildung für Lokaljournalismus, hat eine Deutschland-Karte mit allen Lokalzeitungen veröffentlich. Standesgemäß mit statischen Karten und weiterführenden Informationen als pdf – den Sinn davon werde ich wohl nicht verstehen. 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 aufregte und mich auch ein bisschen amüsierte, brachte es mich auf eine Idee. Vor ein paar Wochen habe ich gelernt, in D3.js mit Geodaten Deutschland zu erzeugen. Ein Tutorial dazu liegt halbfertig unter Entwürfe und den „Veröffentlichen“-Button werde ich wohl nie betätigen.

Diesen Code habe ich mich einer Liste von Lokalblogs kombiniert. In einer separaten Datei habe ich Name, Bundesland, URL und Längen- und Breitengrad aufgelistet. 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 da die Längen- und Breitengrade, die ich händisch gesucht habe. Für diesen Arbeitsschritt sollte ich mir mal ein Tool suchen.

Zur Farbgebung: Ich hab versucht sie „schön“ zu gestalten. Herausgekommen ist eine Deutschlandkarte, falls es zu Neuwahlen kommt. Könnte man natürlich ändern, aber ich habe ja Verständnis für Faulheit.

Drei Sachen sind nicht optimal gelaufen:

1) Zuerst dachte ich mir: Geil, so viele Blogs aus Hamburg, da muss ich nicht viel machen und habe allen die gleichen geografischen Werte zugewiesen. Datei uploaden und refresh: Natürlich liegen die Punkte alle übereinander. Ich weiß, dass man mit D3.js steuern kann, dass die Punkte sich nicht überlappen. Bis ich das allerdings implementiert hätte, wäre „Bauer sucht Frau“ wahrscheinlich schon in der nächsten Staffel. Ich habe dann die Längen- und Breitengrade ein bisschen verschoben. Der Altona-Blog liegt zwar jetzt streng genommen nicht mehr in Altona, dafür ist er sichtbar. Analog zu Hamburg auch in Berlin und Nordrhein-Westfalen.

2) Ich konnte keine Links in die Popups einfügen. Ein ganz normales vor „+d.URL“ hat mir immer Fehler geliefert und die Seite blieb weiß. Da ich dann bemerke, dass mir das gar nichts bringen würde, weil man, um den Link zu klicken, die Punkte mit der Maus verlassen müsste. Das wiederrum hätte zur Folge, dass sich das Popup schließt. Ein Teufelskreis. Ich hab’s dann einfach so gelassen.

3) Java-Script in WordPress einbinden ist nicht ganz einfach: Man muss immer einen Umweg über die functions.php gehen. Allerdings gibt es das Plugin wp d3, das das übernimmt. Jedoch konnte ich dann die Geodaten im .geojson-Format nicht importieren, weshalb die Grafik jetzt oldschool über einen iframe einbinde.