Skip to content

DeEgge Teststudio

Das Teststudio ist der Spielplatz für web- und non-webbasierte Mapping- und Visualisierungsbibliotheken. Hier probiere ich verschiedene Sachen aus, z.B. mit Leaflet.js, MapBox.js oder D3.js.

Dabei orientiere ich mich zum Teil an Tutorials aus dem Netz, probiere mich an den APIs der verschiedenen Bibliotheken oder versuche ein bestehendes Beispiel nachzubauen und mit eigenen Daten zu füllen.

Ich bitte unbedingt zu beachten, dass einige der Ergebnisse nicht als final und endgültig zu erachten sind. Ich würde sogar soweit gehen und ein paar der Visualisierungen als hässlich bezeichnen.

Shape-Files in Leaflet

Eine sehr einfache Darstellung aller Seen im Land Brandenburg inklusive der dazugehörigen, offiziellen Badestellen. Verwendet wird dazu die Mapping-Bibliothek Leaflet.js, mit einem Plug-In zum Laden von Shape-Files.

Die Daten werden weder gefiltert, noch in irgendeiner Form klassifiziert und entsprechend visualisiert. Die Darstellung entspricht den Standardeinstellungen von Leaflet für Polygone und Marker. Damit wird das Ergebnis äußerst unübersichtlich. Pop-Ups für die einzelnen Features enthalten alle Attribute der Shape-Files.

Als Quelle für die Daten dient das Portal des Brandenburger Landesamt für Umwelt, Verbraucherschutz und Gesundheit (LUGV).

Badestellen in Brandenburg

Mask-Canvas mit Leaflet

Eine Visualisierung der ÖPNV-Abdeckung durch Haltestellen im Betriebsgebiet des Verkehrsverbunds Berlin-Brandenburg (VBB). Über eine einfache Leaflet-Webmap wird eine graue Maske gelegt, aus der an den Positionen der Haltestellen Löcher „ausgestanzt“ werden. Der Radius kann dafür beliebig verändert werden.

Die Daten stammen direkt vom VBB und werden über das Datenportal der Stadt Berlin frei zur Verfügung gestellt. Es handelt sich bei dem Datensatz um ein spezielles Format zur Speicherung von ÖPNV-Daten, genannt General Transit Feed Specification (GTFS). Darin enthalten sind u.a. Haltestellenstandorte, Routen, Abfahrtzeiten etc.

Die Visualisierung orientiert sich an einem Projekt von Dominik Moritz, basiert aber auf aktuelleren Daten. Verwendet wird dafür das Plug-In Leaflet Mask Canvas.

Abdeckung durch Haltestellen in Brandenburg

Multitemporale Choroplethen

Choroplethenkarten stellen einen bestimmten Sachverhalt farblich visualisiert dar, bezogen auf einen Raumausschnitt. Ergebnis ist ein thematisches Kartogramm, bei dem sich Unterschiede zwischen geographischen Einheiten schnell erkennen lassen.

Die Visualisierung versucht nicht nur einen räumlichen, sondern auch einen zeitlichen Unterschied aufzuzeigen. Mit Hilfe eines Sliders kann der Nutzer chronologisch durch verschiedene Zeitabschnitte springen.

Dargestellt sind die Anzahl der polizeilich registrierten Unfälle in den Berliner Stadtbezirken. Die Daten stammen vom Gesundheits- und Sozialinformationssystem Berlins (GSI). Die Umsetzung erfolgt mit Leaflet und basiert auf einem Tutorial von Richard Donohue, Carl Sack und Robert Roth aus dem Journal Carographic Perspectives. Allerdings stecken noch ein paaar Bugs in der Anwendung.

Unfälle in Berliner Bezirken

Flüssige Darstellung umfangreicher Vektordaten

Diese Visualisierung ist ein Experiment mit Vektor-basierten Mapping-Bibliotheken. Zwei relativ zeitgleich gesendete Tweets inspirierten mich dazu. Zum Einen erläutert Vladimir Agafonkin, der Erfinder von Leaflet, wie sein Algorithmus es ermöglicht, große GeoJSON-Daten mit komplexen Geometrien flüssig via Web-GL darzustellen.


Zum Anderen veröffentlichten die Gestalter des Spiegel-Online-Projekts Betongold zum Thema Eigenheim als Altersvorsorge die Geometrien aller Postleitzahl-Gebiete Deutschlands als GeoJSON.


Verwendet wird hier die Mapping-Bibliothek Mapbox GL JS. Nach einer kurzen Ladezeit ist eine flüssige Interaktion mit der ca. 35MB großen GeoJSON-Datei der PLZ-Gebiete mit 8200 Polygonen und 1,45 Millionen Stützpunkten möglich.

PLZ-Gebiete in Deutschland mit Mapbox GL

Interessehalber habe ich eine Variante mit Leaflet umgesetzt, basierend auf Sumberas block. Hier wird über das Kartenelement ein Canvas gelegt, auf dem die Polygone der GeoJSON-Datei gezeichnet werden.

PLZ-Gebiete in Deutschland mit Leaflet-Canvas

Wetter Radial

Durch eine Tweet von @BriceDev bin ich auf die wunderschöne Visualisierung von ortsbezogenen Wetterdaten gestoßen. Wetter Radiale stellen in einem kreisrunden Diagramm die Tiefst- und Höchsttemperatur sowie den Niederschlag für einen Ort für alle 365 Tage des Jahres dar.

Die Variante von BriceDev wurde in D3.js umgesetzt. Die Daten stammen WeatherUnderground.

Wetter in Potsdam 2014

One thought on “DeEgge Teststudio

  1. Pingback: Das DeEgge Teststudio | De Egge

Kommentar verfassen

QR Code Business Card