Gerade habe ich etwas mit D3.js und DataMaps herumgespielt. Dabei ist eine kleine Unterseite dieser Domain entstanden. Auf einer Karte wollte ich alle Länder anzeigen, die ich schon besucht habe. Das sollte einigermassen dynamisch sein und nicht hässlich aussehen.
Diese Seite wird mit Middleman fabriziert. Ich arbeite also nur mit statischen Seiten. Trotzdem ist es mit Middleman recht einfach, etwas dynamisch zu sein. Die besuchten Länder werden in einer YML Datei gespeichert und dann beim Rendern der Seite in ein Data Attribut des Karten Tags geschrieben.
/data/countries.yml:
visited:
- USA
- DEU
Und das zugehörige HTML Template:
<div class="map" data-countries="<%= data.countries.visited.join(',') %>"></div>
Diese Daten lese ich dann beim Erzeugen der Karte ein und stelle die Länder auf der Karte farbig dar. So muss ich trotz statischer Seite kein Javascript anfassen, wenn ein neues Land dazu kommt.
Das Javascript (hier Coffeescript) zum Erzeugen der Karte entspricht dann mehr oder weniger einem Beispiel von DataMaps.
element = $('.map')
data = {}
for country in element.data('countries').split(',')
data[country] = { fillKey: "authorHasTraveledTo" }
new Datamap
element: element[0]
projection: 'mercator'
data: data
fills:
defaultFill: "#999999"
authorHasTraveledTo: "#ff6666"
Das Ergebnis kann nun hier bestaunt werden.