In der Version in Processing waren Parks anklickbar. Dabei wurde auf die geklickte Grünfläche gezoomt und es hat sich ein Detailfeld mit allen nötigen Infos zur gewählten Fläche geöffnet. Ursprünglich war geplant, dass das Kreisdiagramm sich in diesem Detailfeld befindet.
Um dem Betrachter Hintergrundinformationen zum Projekt zur Verfügung zu stellen, hatten wir auf der Startseite einen “Info-Button” geplant.
Bei der Darstellung der Stadt haben wir uns für eine 3D-Karte entschieden. Beim Start der Webapplikation wird Köln mitsamt aller Hauptlärmquellen und Grünflächen von oben angezeigt. Die Lärmquellen wurden in verschiedenen Farben visualisiert und können aus- und wieder eingeblendet werden, während die Grünflächen in grün dargestellt werden. Die Stärke der Lärmausprägung wird in einem Balkendiagramm angezeigt, welches die Daten aktualisiert, wenn der Mauszeiger seine Position auf der Karte ändert. Sofern sich in diesem Bereich eine Grünfläche befindet, öffnet sich ein Kreisdiagramm in dem der prozentuale Anteil der Lärmquellen sowie der lärmfreien Zone visualisiert sind.
Der Nutzer hat die Möglichkeit näher heran zu zoomen und die Karte zu drehen, was die 3D-Ansicht erscheinen lässt. Es ist außerdem möglich wieder hinaus zu zoomen. Es ist ebenfalls möglich die Karte in alle Richtungen zu verschieben. Die Lärmquellen werden aber nur für den zur Verfügung stehenden Bereich angezeigt. Es wurden hier echte Daten verwendet, wobei Lärmquellen, die keinerlei Einfluss auf die Grünflächen haben, z.B. Flughafen-Lärm, nicht dargestellt werden.
Aufgrund der Visualisierung wurde deutlich, dass Lärm in Grünflächen weitestgehend gleich verteilt ist. Hauptlärmverursacher sind der Straßenlärm und der Zugverkehr der Deutschen Bahn. Der Industrielärm fällt hingegen nur sehr gering aus. In dem gemessenen Lärmbereich wird ziemlich deutlich, dass es kaum Parks gibt, die nicht von Lärm betroffen sind, wobei der Hauptlärm sich meist am Rand lokalisiert.
Die erste Implementierung erfolgte in Processing. Processing beinhaltet eine eigene Entwicklungsumgebung welche für die Einsatzbereiche von Grafik, Simulation und Animation spezialisiert ist. Es hat den Charakter einer stark vereinfachten Version der Programmiersprache Java, ermöglicht allerdings Interaktionen und visuelle Elemente zu programmieren. Processing enthält Klassenbibliotheken welche vor allem für Videos, Grafiken, Grafikformate, Sound, Animation, Typographie, 3D, Simulation, Datenzugriff und -transfer sowie Netzwerkprotokolle beinhalten und ist somit sehr gut für die Visualisierung von Daten geeignet.
Die Benutzeroberfläche in Processing wurde mit “G4P” umgesetzt. Um die Karte darstellen zu können wurde “Unfolding Maps” genutzt und zur farblichen Kennzeichnung der Lärmquellen “giCentreUtils”. Die geplante Detailansicht sollte eine Detailbox enthalten mit allen notwendigen Daten und Diagrammen zur visuellen Darstellung der Auswertung der Daten. Beides sind Elemente von “ControlP5”. Zur besseren Arbeit im Team haben wir uns für GitHub entschieden. Der Programmcode konnte so zeitgleich von mehreren Personen bearbeitet werden. So ist es möglich jederzeit den aktuellen Code zu erhalten und zu bearbeiten.
Schwierigkeiten traten auf, wenn der Mauszeiger sich über einer Grünfläche befand, dies mit einem Hover-Effekt darzustellen. Da die Daten der Grünfläche in einzelnen Markern hinterlegt waren, wäre hier eine Berechnung notwendig gewesen um die Farbe aller Marker zeitgleich zu ändern. Diese Berechnung war sehr kompliziert und konnte auch nicht fehlerfrei umgesetzt werden. Da die Daten für den Lärm in einer Datei vereinfacht hinterlegt wurden, mussten diese für die Filter-Funktion wieder separiert werden. Dadurch war es nicht so einfach wirklich alle entsprechenden Lärm-Marker ein- bzw. wieder einzublenden.
Es gab ebenfalls Probleme bei der Darstellung der Informationen für die Grünflächen im Detail. So war es in Processing sehr schwer die Daten auszuwerten, da die GeoJSON-Daten einzeln ausgelesen und verglichen werden mussten. Es konnten einige Libraries nicht eingebunden werden, so dass wir nur mit Hilfe des “GeoJSONReader” von Unfolding an diese Daten kamen. Allerdings war die Rückgabe eine Liste mit allen Polygonen. Diese Polygone mussten nun in einzelne Punkte zerlegt werden um diese zur Auswertung nutzen zu können. Weitere Probleme gab es bei der Visualisierung der Diagramme in der Detailbox. Trotz aller Anstrengungen wurden diese nicht angezeigt und so war eine Weiterarbeit an diesen nicht möglich. Da neben den oben genannten Problemen weitere schwerwiegende bei der Performance auftragen (langsames Laden der Daten und starkes Ruckeln) und keine Libraries zur Flächenberechnung der Polygone zur Verfügung standen, haben wir uns entschieden das Projekt mit JavaScript und Mapbox umzusetzen.
Mit dem Tool Mapbox kann man interaktive Karten erstellen und es ist für Designer und Programmierer zugleich geeignet. Die Karten sowie die Marker können individuell gestaltet werden und es können einfach Informationen hinzugefügt werden. Durch die Library Mapbox GL ist es möglich das Programm in JavaScript zu implementieren und mit Hilfe von CSS die Darstellung zu bearbeiten. Auch werden die Polygone als Vektoren vorgerendert, was die Darstellung von vielen Polygonen gleichzeitig beschleunigt.
Turf ist eine Library von JavaScript mit der die Flächen berechnet und Überschneidungen von Bereichen gefunden werden können. Dies ermöglicht Daten besser analysieren und verarbeiten zu können. Die Flächenberechnung und -auswertung mit Turf führte leider zu ein paar Problemen. So kam es bei der Berechnung ab und an zu Abstürzen des Programmes. Im Tortendiagramm, welches den Prozentualen Anteil von Lärm und Lärmfreien Bereichen darstellt, kommt es zu Überschneidungen. Da wir nur die Werte der einzelnen Lärmbereiche erhalten haben, war es (bisher) nicht möglich die tatsächlich lärmfreien Bereiche zu berechnen. Dadurch sieht es in einigen Bereichen so aus, als ob mehr Lärm vorhanden ist, als es tatsächlich der Fall ist.
Lärm ist nicht der einzige Aspekt, der den Entspannungsgrad einer Freizeitanlage bestimmt. Allerdings bietet eine ruhige Umgebung eine wichtige Grundlage. Aufgrund der bereits erwähnten Umstellung und dem daraus resultierenden Zeitmangel, mussten leider einige Visualisierungen anders oder vereinfacht dargestellt werden. So konnten wir die Vergrößerung auf die Grünfläche bei Klick, sowie die Detail-Informationen, nicht mehr umsetzen. Es war ebenfalls nicht mehr möglich, die korrekte Darstellung des Lärmbereichs im Kreisdiagramm zu realisieren. Es besteht die Möglichkeit weitere Details zu den Grünflächen hinzuzufügen. Weiter könnten die Parks unter den Grünflächen hervorgehoben sowie anklickbar gemacht werden, damit bei Klick direkt auf diese gezoomt wird. Einen Vergleich zwischen mehreren Parks können wir uns ebenfalls gut vorstellen.