Ein Ausflug ins Grüne
Finales Dashboard - GDV - SoSe24

Jannic Geiß, Philipp Blei, Carsten Michel, Caner Aliji, Mohammad Hawrami

Ein Ausflug ins Grüne

Gibt es einen Zusammenhang zwischen der Temperatur und Luftfeuchtigkeit?

Die Stadt Mannheim befindet sich in einer der Regionen Deutschlands, in denen die Hitze am stärksten empfunden wird. Es besteht Konsens darüber, dass die Hitze zunehmend als unerträglich wahrgenommen wird. In diesem Zusammenhang stellt sich die Frage, auf welche Weise die Lebensqualität in unserer Stadt auch bei hohen Temperaturen gewährleistet werden kann. Es lässt sich beobachten, dass sich die Temperatur in Grünanlagen weniger stark erhöht als in stark bebauten Gebieten. Es ist bekannt, dass Grünanlagen im Vergleich zu bebauten Flächen eine höhere Wasseraufnahmekapazität aufweisen. Zudem wird angenommen, dass sich in ihrer direkten Umgebung eine höhere Luftfeuchtigkeit einstellt. Es stellt sich die Frage, wie der Zusammenhang zwischen Temperatur und Luftfeuchte zu beschreiben ist und wie sich dieser nutzen lässt, um die Umgebungstemperatur für ein angenehmeres Stadtklima zu beeinflussen. Aus diesem Grund wurde folgende These zur Untersuchung formuliert: “Die erhöhte Luftfeuchtigkeit im Umfeld begrünter Gebiete mindert die Entstehung von Hitzeinseln im urbanen Bereich Mannheims.”

Dieses Projekt ist im Rahmen des Kurses “Grundlagen der Datenvisualisierung” im Sommersemester 2024 an der Hochschule Mannheim unter der Leitung von Prof. Dr. Till Nagel entstanden.

Einführung

Die vorliegende Arbeit befasst sich mit der Untersuchung von Zusammenhängen zwischen Temperaturen und Luftfeuchtigkeit im urbanen Bereich der Stadt Mannheim. Ziel ist es, die Ergebnisse dieser Untersuchung aufzuzeigen. Der Fokus der Untersuchung liegt auf Niederschlägen, wobei zusätzlich die Pegelstände von Rhein und Neckar betrachtet werden. Für die Pegelstände wurde Kontakt zu den Betreibern von www.pegelonline.wsv.de aufgenommen, welche sich als äußerst kooperativ hinsichtlich der Datenbereitstellung erwiesen. Im Rahmen der Datenaufarbeitung wurde ersichtlich, dass die Regulierung der Pegelstände von Rhein und Neckar auf unterschiedliche Weise erfolgt. Der Pegelstand des Neckars wird mit Stau- und Wehranlagen vorwiegend durch den Menschen reguliert, was eine Vergleichbarkeit mit dem Rhein nur bedingt zulässt, da dieser natürlich ins Meer abfließt. Bedauerlicherweise wies die Verteilung der Wetterstationen der MVV, welche für die Erfassung der Temperatur, des Niederschlags und der Luftfeuchtigkeit herangezogen wurden, zum Zeitpunkt der Betrachtung keine Korrelation zwischen erhöhter Luftfeuchtigkeit und Ufernähe auf. Die Anzahl der an relevanten Positionen installierten Wetterstationen war zu gering, um eine belastbare Aussage treffen zu können. Daher wurde beschlossen, den Ansatz der Pegelstände nicht weiter zu verfolgen.

Dies hatte zur Folge, dass sich unser Fokus vollständig auf die Datensätze der MVV-Wetterstationen verschob. Bedauerlicherweise konnte nur eine geringe Anzahl von Datensätzen als verlässlich hinsichtlich der Niederschlagsdaten identifiziert werden. Infolgedessen wurde der Fokus auf die relative Luftfeuchte in Zusammenhang mit minimaler und maximaler Temperatur gelegt.

Dabei betrachteten wir vorwiegend Regionen, welche entweder sehr stark oder so gut wie gar nicht begrünt sind. Zur Identifikation dieser Regionen nahmen wir die Farbkategorisierung gängiger Onlinekarten zur Hilfe. Auch bei explorativen Datenanalysen mit dem Programm Tableau wurden diese Regionen gut ersichtlich.

Daten / Auswertung

Datenquellen

Zur Umsetzung des Konzepts wurden zunächst Daten von vier Datenpunkten erhoben. Diese Daten wurden durch Messstationen erfasst, welche mit verschiedenen Sensoren für Temperatur, Luftfeuchte, Sonneneinstrahlung, Niederschläge und einigen anderen Funktionen ausgestattet sind. Vor allem die Minimal- und Maximalwerte für Temperatur und Luftfeuchte waren für unsere Untersuchungen interessant. Die Daten der Messstationen wurden vom Projekt “Smart City Mannheim” bereitgestellt und waren für uns über die API der MVV zugänglich.

Die Entscheidung, die Daten ausschließlich von der MVV API zu beziehen, basierte auf zwei wesentlichen Gründen. Einerseits war es unser Ziel, konsistente Daten zu erhalten, um eine einheitliche Grundlage für die Analyse zu schaffen. Andererseits verfügte die MVV über eine umfangreiche Sensorinfrastruktur, die für unsere Zwecke von großem Nutzen war. Über einen API-Key konnten wir die derzeit nicht öffentlich zugänglichen Daten zugreifen. Da das Projekt “Smart City Mannheim” sich noch mitten im Prozess befindet die Messstationen aufzubauen und einzurichten, ist die Verteilung der Stationen noch nicht abgeschlossen und deren Datenerfassung noch über diverse Zeitperioden lückenhaft, was uns im Laufe unserer Recherchen vor einige Herausforderungen gestellt hat.

Zusätzlich nutzten wir die GeoJSON der Mannheimer Stadtteile zur georäumlichen Analyse.

Datenbeschaffung und - aufbereitung

Zur umfassenden Nutzung der von der MVV-API bereitgestellten Daten wurde ein Python-Skript entwickelt, welches die Daten zu Temperatur, Luftfeuchtigkeit und die Sensor-IDs bereitstellt. Nach der Ausführung des Skripts standen 900 Sensoren zur Verfügung, wobei eine Varianz in der Datenqualität zu beobachten war. Die Sensoren haben ab dem 01.01.2023 angefangen zu messen, aus diesem Grund haben wir unsere Untersuchung nur auf das Jahr 2023 spezifiziert und sind nicht in die Vergangenheit gegangen.

Nach der umfassenden Auswertung der gewonnenen Datenmenge mussten wir feststellen, dass die Ergebnisse nicht unseren Erwartungen entsprachen. In der Folge war die Erstellung eines allgemeinen Phyton-Skripts erforderlich. In Abhängigkeit von den jeweiligen Anforderungen musste das Skript entsprechend angepasst werden, beispielsweise durch Modifikation der Messung, wie etwa die Berücksichtigung der Mindesttemperatur. Ziel war es, die Datenqualität zu optimieren und valide Ergebnisse zu erhalten. In der Folge wurden die Daten in einer großen JSON-Datei zusammengeführt.

Die Arbeit mit der MVV-API war mit einigen Schwierigkeiten verbunden. Bedauerlicherweise ist die Dokumentation zum Umgang mit der API nicht öffentlich zugänglich. Daher war es erforderlich, sich Stück für Stück in das Thema einzuarbeiten.

Die erste und wohl zeitintensivste Hürde war die Begrenzung der Anfragenzahl an die API. Es ist lediglich möglich, 30 Anfragen pro Minute zu tätigen, was durch die enorme Datenmenge anfangs mehrere Stunden gekostet hat. Als Lösung für dieses Problem wurde informiert, wie ein Bulkrequest an die MVV API zu senden ist und dieser dann auch erfolgreich durchgeführt werden kann.

Auszug aus den Daten

Für unsere explorativen Datenanalysen und erste Visualisierungsprototypen mit dem Programm Tableau mussten die einzelnen Daten noch in eine .csv-Datei konvertiert werden. Dabei wurde schnell klar, dass viele Standorte für uns uninteressant sind, da sie entweder zu eng aneinander liegen oder für den Vergleich von begrünten zu unbegrünten Flächen unbrauchbar sind.
Weiterhin war es erforderlich, nicht nur ein Skript für die CSV-Datei zu erstellen, sondern auch eines für die JSON-Datei. Dadurch sollte sichergestellt werden, dass die Daten in einer Weise vorliegen, die unseren Vorstellungen entspricht, und somit die Arbeit mit dem Framework D3 sowie die Implementierung einfacher werden. Im Anschluss an die Konvertierung wurde eine Prüfung mit ChatGPT durchgeführt, um festzustellen, ob die Daten NaN-Werte aufweisen, d. h. ob die Daten unvollständig sind. Nach dieser Sortierung blieben von den 900 infrage kommenden Sensoren noch 33 für uns relevante übrig.

Codeauszug des Skripts zur Datenkonvertierung

Der Prototyp

Prototypenskizze

Zum Beginn des Projektes waren wir uns unsicher, wie das Dashboard aufgebaut und welche Visualisierungsformen und Informationen angezeigt werden sollten. Eine unserer ersten Ideen bezüglich der Temperaturdarstellung war eine klassische Heatmap, was allerdings eine umfassende Datenformatierung nötig gemacht hätte und wir dadurch zeitlich weit ins Hintertreffen geraten wären. Leider hätten sich bei einer Heatmap die einzelnen Sensoren auch stark überlappt und somit ihre Einzeldaten uneinsichtig gemacht.

Erster Prototyp des Dashboards:

Erste Skizze des Prototyps

Im ersten Ansatz haben wir uns darauf geeinigt, dass wir das Dashboard als Ortskarte mit den jeweiligen Sensoren, welche die Temperatur und die Luftfeuchtigkeit anzeigen, aufbauen. Um dann die genauen Visualisierungen zu Temperatur oder Luftfeuchtigkeit zu sehen, wollten wir Buttons über der Karte platzieren, wodurch man durch Anklicken direkt zur jeweiligen Visualisierung geleitet wird, in der die Daten der Sensoren angezeigt werden.

Verschiedene Visualisierungen getestet

In ersten gezeichneten Versuchen haben wir uns verschiedene Arten der Visualisierung angesehen. Vorwiegend haben wir mit Balken- und Liniendiagrammen aber auch mit Treemaps experimentiert wobei allerdings sehr schnell klar wurde, dass eine Treemap absolut nicht zielführend ist, da es nicht unser Anliegen war, ein Ranking der Zeitdaten zu erstellen.

Daher konzentrierten wir uns auf Balken und Linien und nach einigen Schwierigkeiten damit einen ansprechenden Zeitverlauf mit einer informativen Farbgebung des Balkens zu kombinieren, einigten wir uns darauf mit Liniendiagrammen zu arbeiten. Mit diesen lässt sich ein kontinuierlicher Zeitverlauf von Temperatur- und Luftfeuchtedaten sehr gut und anschaulich darstellen. Des Weiteren sind Liniendiagramme ein weitverbreitetes Visualisierungswerkzeug und viele Menschen sind damit vertraut, wie man diese liest.

Erste Ausführung des Liniendiagramms

Nachdem dem Entschluss für ein Liniendiagramm und einer Empfehlung von Prof. Dr. Till Nagel entschieden wir uns dafür die Diagramme für Temperatur und Luftfeuchte übereinander zu legen, um einen direkten Vergleich beider Werte zum selben Zeitpunkt zu ermöglichen. In unserem ersten Ansatz haben wir diese Diagramme aus Platzgründen nämlich nebeneinandergelegt.

Streudiagramm für Zusammamenhangsuntersuchung

Im Nachgang haben wir noch mit Streudiagrammen experimentiert, um eventuelle Verteilungsmuster aufzuzeigen aber die gewählten Datensätze führten zu keiner, für unsere Hypothese relevanten, Aussage und wurden deshalb wieder verworfen.

Ausgereifter Prototyp in Tableu + GeoJSON in D3 implementiert

Nachdem wir uns auf einen groben Entwurf geeinigt hatten, wurde ein funktionsfähiges Dashboard mit Tableau erstellt und damit begonnen unser Dashboard in D3 umzusetzen.

Implementierung

Die Erstellung der Website sowie des interaktiven Dashboards erfolgte unter Verwendung der Programmiersprachen HTML, CSS und JavaScript sowie des D3-Frameworks.

Zu Beginn des Projekts erfolgte eine Evaluierung diverser Programmiersprachen und Frameworks. Dabei wurden D3 und Altair als potenzielle Lösungen identifiziert. Nach einer ausführlichen Diskussion wurde D3 ausgewählt, da einige Teammitglieder bereits über Kenntnisse in dieser Programmiersprache verfügten.

Grundlage: HTML, CSS und JavaScript

Zur Strukturierung der Inhalte wurde HTML eingesetzt, zur Gestaltung CSS und zur Umsetzung von Interaktivität und dynamischen Anpassungen JavaScript. Diese drei Technologien bildeten die Grundlage für die Webentwicklung. Die Entscheidung fiel auf diese Technologien, da nahezu das gesamte Team damit Vorerfahrungen besaß, sie sich durch eine hohe Einfachheit auszeichnen und somit ideale Voraussetzungen für die Realisierung des Projekts boten.

D3.js

D3 (Data-Driven Documents) bezeichnet eine JavaScript-Bibliothek, die speziell zur Erstellung komplexer und anpassbarer Datenvisualisierungen entwickelt wurde. D3 erlaubt die Erstellung von visuell ansprechenden Datenvisualisierungen unter Verwendung von SVG, HTML und CSS. Ein wesentlicher Vorteil der Bibliothek besteht in der Möglichkeit der Umsetzung interaktiver Grafiken, die auf Basis von Daten dynamisch reagieren.

Die Entscheidung für D3 im Vergleich zu Altair basierte auf der bereits vorhandenen Teamerfahrung sowie den vielfältigen Anpassungsmöglichkeiten von D3. Dies ermöglichte sowohl eine effektive Arbeitsweise als auch die Entwicklung hochwertiger, interaktiver Visualisierungen.

Die Kombination der Programmiersprachen HTML, CSS, JavaScript und D3 ermöglichte die Entwicklung eines interaktiven Dashboards, welches den Nutzenden eine einfache Handhabung, Exploration und Interaktion mit den Daten bietet. Die vielfältigen Einsatzmöglichkeiten von D3 sowie die Expertise des Teams haben eine visuell ansprechende und leicht verständliche Darstellung komplexer Daten gewährleistet.

Dashboard

Unser Dashboard bildet im Gesamten das Jahr 2023 ab. Es ist möglich das ganze Jahr, ganze Monate oder einzelne Tage auszuwählen und die sich entsprechenden Daten anzeigen zu lassen. Um die Gebietskarte zwischen Temperatur und Luftfeuchte umzuschalten, ist nur die jeweilige Schaltfläche zu betätigen. Durch Anklicken eines einzelnen Sensors werden auch nur die Daten desselbigen angezeigt. Die Farbgebung der Liniendiagramme haben wir mit rot für die maximale Temperatur, blau für die minimale Temperatur und grün für den Prozentsatz der relativen Luftfeuchte gewählt. Unser Farbschema der Temperatur orientiert sich an den geläufigsten Vorgaben, also blau für kältere und rot für wärmere Temperaturen. Für die relative Luftfeuchte haben wir grün gewählt, um den Zusammenhang zum Begrünungsgrad zu verdeutlichen. Die Wetterstationen werden als Ringmarkierungen auf unserer Gebietskarte angezeigt und folgen für die Funktionen Temperatur und Luftfeuchte einen entgegengesetzten Farbschema, um den Kontrast der beiden Anzeigeoptionen zu verbessern. Die Farbwahl der beiden Funktionen beginnt mit lila für den tiefsten Wert, läuft dann über Blau- und Grüntöne und endet in einen gelb für den höchsten Wert. Um genauere Kennzahlen, wie den Zeitpunkt der Messung oder Geräte-ID´s zu erhalten, ist es möglich den Mauszeiger einfach über die gewünschte Wetterstation oder einem beliebigen Zeitpunkt auf einem der Liniendiagramme zu bewegen.

Erkenntnisse

Anhand der Liniendiagramme unseres Dashboards geht hervor, dass sich in der Regel in Zeiten mit hoher Luftfeuchte geringe Temperaturen einstellen und es im Allgemeinen auch dort kühler ist, wo sich Grünanlagen befinden.

Gegenläufigkeit Temperatur zu Luftfeuchtigkeit an einem Tag

Der Kontrast, den wir mit dem Wechsel des Farbschemas erreichen wollten, wird gut ersichtlich, da sich die Ausschläge der Werte für Temperatur und Luftfeuchte entgegengesetzt zu verhalten scheinen. Es gilt also, dass es dort, wo eine erhöhte Luftfeuchte vorherrscht, die Temperaturwerte sinken und diese dort steigen, wo die Luft trockener ist.

Weiter verdeutlicht unser Dashboard, dass die Temperaturen sinken, je weiter man sich vom Stadtzentrum entfernt, da sich vor allem im Randbereich der Stadt mehr Grünflächen befinden.

Temperaturveränderung von Zentrum zu Grünfläche

Fazit

Nach reichlichen Überlegungen, unzähligen verworfenen Ideen und Neuorientierung unserer Arbeit sind wir letztendlich zu einem zufriedenstellenden Ergebnis gekommen. Unser Dashboard zeigt, dass es sich in der Tat so verhält, dass begrünte Bereiche für eine angenehmere Temperatur sorgen und dieses sich in der Regel auch in Korrelation mit einer erhöhten Luftfeuchtigkeit befindet. Unsere einfach gehaltene Bedienung ermöglicht es auch technisch unerfahrenen Personen sich gut auf unserem Dashboard zurechtzufinden und obwohl es noch kleinere Baustellen im Script gibt, erachten wir unser Dashboard als funktional und informativ. Die gewählten Visualisierungsformen bieten eine gut zugängliche und aufschlussreiche Möglichkeit die Einflussnahme von Luftfeuchtigkeit und begrünter Umgebung auf die Temperatur zu untersuchen. Unser Farbschema folgt den gängigen meteorologischen Farbschemata und ist somit gut zu bewerten und zuzuordnen. Wir sind davon überzeugt, dass unser Dashboard sehr gut aufzeigt, wie wichtig begrünte Flächen für unser Stadtklima sind und sie sich mit ihrer erhöhten Luftfeuchtigkeit positiv auf die Temperaturen im Stadtgebiet auswirken können.

Ausblick

Aufbauend auf unseren Untersuchungen ergeben sich noch einige interessante Erweiterungsmöglichkeiten für unser Dashboard. Sollte der Aufbau und die Inbetriebnahme der Wetterstationen weiter so vielversprechend voranschreiten und ihre Abdeckung des Stadtgebiets sich gleichmäßiger und flächendeckender verteilen, könnte man eventuell unseren verworfenen Ansatz bezüglich der Pegelstände anliegender Gewässer wieder mit in die Untersuchungen einbeziehen. Des weiteren wäre eine genaue Analyse des Begrünungsgrades mit unterstützenden Daten sicher von großer Aussagekraft. Eine weitere sinnvolle Verbesserung wäre es auch, in Kooperation mit dem Projekt “Smart City Mannheim”, eine fortlaufende und automatisch gefilterte Versorgung mit Live-Daten zu realisieren, um ein umfangreicheres Bild zu schaffen und so eventuell auch Prognosen über die zukünftige Entwicklung verschiedener Stadtareale zu ermöglichen. Das volle Funktionsspektrum der Wetterstationen zu nutzen, bietet sicher auch Spielraum für zukünftige, sehr spannende Untersuchungen, welche zum Beispiel den Luftdruck oder die Strahlungsintensität der Sonne als Faktor für die Temperaturentwicklung berücksichtigen. Wir sind der Überzeugung, dass Wetteranalysen in städtischen Gebieten für viele aufschlussreiche Untersuchungen und zukunftsorientierte städteplanerische Projekte Anwendung finden werden.