In unserem ersten Blogpost zu der neuen Mapbox-Integration in Tableau haben wir vorgestellt, wie Sie Ihre eigenen Karten erstellen und einbinden. Für unsere Ringbahn-Visualisierung haben wir neben einer benutzerdefinierten Karte zusätzlich drei Layer eingebunden, um pro Haltestelle die Information zu geben, auf welche Bereiche Berlins sich die angezeigten Metriken beziehen. Diese Layer werden ebenfalls durch Mapbox ausgeliefert.

In diesem Blogpost möchten wir vorstellen, wie man dies realisiert. Hierfür benötigt man Shapefiles (spezifisches Format für Geodaten), optional eine GIS-Software (Geographic Information System) und einen kleinen Trick, den wir uns dankenswerterweise bei Datablick abgeschaut haben.

Schritt 1: Shapefiles finden & optional in GIS bearbeiten

Das Datenportal der Stadt Berlin bietet die Shapefiles der in unserer Visualisierung verwendeten Regionen: die sog. LORs (lebensweltlich orientierten Räume), die hierarchisch darüber liegenden Bezirksregionen sowie Postleitzahlengebiete. Da wir jedoch lediglich die Regionen benötigen, durch die die Ringbahn hindurch fährt, haben wir mithilfe eines GIS-Tools namens QGIS die überflüssigen Regionen entfernt. QGIS ist open source und kann hier herunter geladen werden.

Innerhalb von QGIS, wählt man im Menüpunkt “Layer” “Add vector layer” aus und fügt die Datei als gezippte Shapefile (so wie heruntergeladen) hinzu.

Screen_Shot_2016-03-30_at_15_13_20

Nun kann man per Rechtsmausklick auf den Layer, “Open Attribute Table” auswählen, wo Polygone bearbeitet, gelöscht oder aber auch hinzugefügt werden können.

Screen_Shot_2016-03-30_at_15_17_55

(Falls das Symbol für das Editieren ausgegraut ist, ist ein Zwischenschritt erforderlich: man speichert die Datei als ESRI Shapefile ab, womit das Editieren nach erneutem Hinzufügen unter “Add vector layer” möglich wird.)

Schritt 2: Layer als Data bei Mapbox hochladen

Nun speichert man diese Datei unter dem Menüpunkt “Layer” und dann auf “Save as…” als ESRI Shapefile. QGIS erstellt fünf Dateien, die alle notwendig sind für den Upload bei Mapbox. Diese werden nun noch gezippt und sind für den Upload bereit.

Auf mapbox.com wird die gezippte Datei unter Home und dann etwas weiter unten “Data” hochgeladen. Dies kann unter Umständen je nach Größe der Datei etwas Zeit in Anspruch nehmen.

Screen_Shot_2016-03-30_at_15_21_33

Nun benötigen wir wieder die Map ID für diesen neue Layer (der als Karte gehandhabt wird), um ihn in Studio Classic zu bearbeiten, sprich eigene Styles anzuwenden.

Screen_Shot_2016-03-30_at_15_24_06

Unter “Styles & Sources” wählen wir “New style or source” und fügen dann ganz unten die Map ID ein, womit wir ein neues Projekt anlegen, was keine Base Map beinhaltet.

Screen_Shot_2016-03-30_at_15_26_22

Falls in dem neuen Projekt nichts zu sehen ist, kann man über das Lupensymbol nach der Stadt/ Region suchen.

Auf der rechten Seite können wir nun wieder unsere eigenen Styles anwenden. In unserem Fall sind es die folgenden:
#bzr {
line-width: 3;
line-color: rgba(235,229,215,1);
polygon-fill: #0d51a0;
polygon-opacity: 0.5;
}

Wichtig ist hier, dass der Hintergrund transparent ist, damit die Polygone AUF der Base Map liegen und die Base Map auch sichtbar bleibt. Hierfür löscht man einfach den gesamten Map Style. Nun speichert man dies lokal ab und lädt es auf den Mapbox Server hoch.

Screen_Shot_2016-03-30_at_15_39_13

Für weitere Layer verfährt man wieder wie in Schritt 1 und 2 beschrieben.

Schritt 3: Layer in Tableau einbinden

Nun können wir die neu erhaltene Map ID des Layers (siehe oberes Screenshot) in Tableau entweder zu einer bestehenden Karte hinzufügen oder eine neue Background Map erstellen, die eine Base Map (z.B. eine aus den preset styles) sowie den Layer oder ggf. noch weitere Layer enthält. Wichtig zu beachten ist die Reihenfolge der Map IDs: als erstes wird die Base Map eingetragen und danach die Layer in einer aufeinander stapelnden Reihenfolge.

Screen_Shot_2016-03-30_at_17_39_55

Nachdem alle gewünschten Map IDs eingetragen sind, können wir unter “Map Layers“ (im Menüpunkt “Map“) pro Kartensheet festlegen, welche Layer angezeigt werden sollen. Dies ist jedoch nur in dem Sheet, das die Karte enthält möglich, also nicht ohne Weiteres auf dem Dashboard. Möchten wir den Nutzern aber den Switch zwischen Layern innerhalb eines Dashboards ermöglichen, benötigen wir einen Parameter. Das Team von Datablick hat hierfür einen hervorragenden Trick veröffentlicht, den wir für unsere Visualisierung adaptiert haben. Den können Sie hier nachlesen, wenn Sie den Nutzern ermöglichen wollen selbst aus verschiedenen Szenarien mit Layer-Kombinationen auszuwählen.

In unserer Ringbahn-Viz haben wir allerdings ein etwas anderes Szenario gewählt. Wir wollten je nachdem welche Metrik ausgewählt ist, einen spezifischen Layer anzeigen. Zusätzlich sollte es möglich sein, alle Layer auszuschalten und nur die Base Map zu sehen.

Schritt 4: Layer pro Metrik anzeigen

Hierfür ist es zunächst notwendig ein Calculated Field namens “Map Layers” zu erstellen, das lediglich den Auswahl-Parameter für die Metriken enthält, also folgenden Code:
[Parameter Ringbahn]

Nun benötigt man pro Layer eine Karte. Hierfür dupliziert man am besten den Karten-Sheet. Im Endeffekt wird also eine andere Karte angezeigt (mit einem voreingestellten Layer), je nachdem welche Metrik ausgewählt ist. In diesen Karten legen wir nun unter “Map Layers” fest, was angezeigt werden soll.

Screen_Shot_2016-03-30_at_17_56_59

Als nächstes ziehen wir in der ersten Karte (“LOR”) “Map Layers” in den Filter und wählen “Custom value list”. Hier tragen wir nun die Namen der Metriken ein (so wie sie auch im Auswahlparameter verwendet werden), bei denen dieser Layer angezeigt werden soll.

Screen_Shot_2016-03-30_at_18_00_53

Genauso verfährt man nun, um die weiteren Karten zu erstellen.

Schritt 5: Dashboard aufbauen

Nun ziehen wir alle Karte untereinander ins Dashboard. Wenn man nun den Titel ausblendet, verschwinden auf magische Weise all diejenigen Karten, die gerade nicht relevant, sprich nicht per Parameter ausgewählt sind und es bleibt nur diejenige stehen, die für die ausgewählte Metrik gilt.

Schritt 6: Karte ein-/ausblenden Switch integrieren

Schlussendlich wollen wir dem User noch ermöglichen alle Layer auszublenden, was also lediglich die Base Map anzeigt.

Hierfür erstellen wir wieder ein Duplikat der Karte, bei der wir alle Layer unter Layer Options ausschalten. Als nächstes erstellen wir einen Parameter mit den Werten “ein” und “aus”. Diesen ziehen wir in den Filter und legen “aus” fest. Diese Karte wird nun auch ins Dashboard gezogen und der Titel ausgeblendet.

Schritt 7: Bedingung festlegen

Blenden wir nun diesen Parameter im Dashboard ein, erscheinen zwei Karten. Wir müssen also eine Bedingung bei den Karten mit Layern festlegen, die diese nur anzeigen lässt, wenn der Parameter auf “ein” gestellt ist.

Hierfür fügen wir den folgenden Code in dem Condition Tab bei allen “Map layers“ im Filter ein.
IIF ([Layers]="ein",1,0)=1

Et voilà, eine Visualisierung mit benutzerdefinierten Mapbox-Karten inklusive Layern ist nun fertig und bereit die nächste Viz of the Day zu werden. 😮 (Unsere Visualisierung ist sogar Viz of the Week geworden! 🙂 )

Mit_der_Ringbahn_durch_Berlin_-_M2____Tableau_Public 2

Wir hoffen, wir konnten ihnen die Möglichkeiten mit Custom Maps gut und verständlich aufzeigen. Falls Sie Fragen haben oder Hilfe benötigen bei Ihren Projekten mit Custom Maps, kontaktieren Sie uns gerne!