Umweltindikatoren

Visualisierung des Zustandes und der Entwicklung unserer Umwelt

Dank den Klimademonstrationen ist die Umwelt in aller Munde. Die vorherrschende Umweltpolitik wird kiritsiert und es wird zur Veränderung aufgerufen. Natürlich liegt es nicht fern, dabei auch einen Blick hinter die Kulissen des Bundes zu werfen. Das BAFU definiert seine Aufgabe u.a. folgendermassen: "Bereitstellung von faktenbasierenden Informationen zum Zustand und zur Entwicklung der Umwelt".
Mit dieser App sollen diese faktenbasierten Informationen möglichst verständlich präsentiert werden, so dass die Nutzenden das komplexe System der "Umwelt" individuell erkunden können und einen Zugang zu dieser Thematik erhalten.

Dafür wird ein Netzwerk visualisiert, dass verschiedene Elemente zueinander in eine Beziehung stellt. Diese Elemente wiederum sind durch sogenannte Indikatoren definiert.


Mehrwert & Ausblick

Mehrwert

Durch die Darstellung der Daten in einem Netzwerk, können auf einfache und spielerische Weise die verschiedenen Abhängigkeiten aufgezeigt werden. Die Beziehungen zwischen den einzelnen Elementen sind durch den Effekt des Ausblendens relativ einfach ersichtlich, genauso wie die Indikatoren, welche die einzelnen Elemente definieren. Zusätzlich lässt sich durch die detaillierte Ansicht der einzelnen Elemente und Indikatoren auf der rechten Seite der Visualisierung genau eruieren, wie ein gewisser Indikator definiert wird und weshalb diesem Indikator eine negative bzw. positive Tendenz attestiert wird. Die Visualisierung der Statistiken unterstützen das Verständnis der Bewertung und des Kommentars, wohingegen die Methodik die Datengewinnung der Indikatoren beschreibt.

Der Vorteil einer solchen Darstellung ist, dass jeder Nutzer eine individuelle Reise durch die Indikatoren antreten kann. Er erhält einerseits Informationen über die Beziehungen zwischen den Elementen, kann sich aber auch ein Bild darüber machen, wie ein Indikator erhoben wird und/ oder sich entwickelt.

Durch das Netzwerk wird schnelle ersichtlich, dass der Klimawandel eine hochkomplexe Thematik ist, die von Abhängigkeiten und Beeinflussungen lebt. Es sei aber auch zu erwähnen, dass die Netzwerkdaten noch in der Entwicklungsphase stecken. Das Ziel sollte es sein, die Abhängigkeiten aller 220 Indikatoren in diesem Netzwerk zu integrieren. So könnte eine umfassende Darstellung dieser Beziehungen erreicht werden und die Komplexität dieses Themas auch visuell Rechnung getragen werden.

Ausblick

Für die Programmierung ergeben sich Vor allem zwei Optimierungs- respektive Weiterentwicklungsmöglichkeiten:

  1. Einerseits sollte die App über eine Eingabemaske verfügen, mit welcher das Netzwerk, die Elemente und Indikatoren editiert, verändert, gelöscht oder hinzugefügt werden können. Gerade in der Entwicklungsphase dieser Netzwerke, wären solche Funktionen zur schnelleren Dateneingabe absolut hilfreich.

  2. Andererseits sollte die Visualisierung dahingehend optimiert werden, dass die einzelnen Indikatoren und Elemente nach Kategorie geordnet werden können. Die Kategorien sind in der jetzigen Visualisierung durch die unterschiedlichen Farben der Kreise dargestellt. Zusätzlich ist die Kategorie in den Titeln auf der rechten Seite der Visualisierung erwähnt. Deshalb wäre ein Bubble Chart hilfreich, in dem man die einzelnen Bubbles per Knopfdruck nach Kategorien ordnen könnte. So könnte der Nutzer noch spezifischer die einzelnen Indikatoren durchleuchten.

Entwicklung

Ausgangslage

Das Bundesamt für Umwelt führt eine Liste von 220 Indikatoren. Diese haben alle einen Bezug zum Klimawandel. Jeder Indikator ist einer bestimmten Kategorie zugeordnet und verfügt über qualitative sowie quantitative Daten. Diese Indikatoren wurden unterschiedlichen Elementen zugeordnet. Diese definierten Elemente stehen nun in Beziehungen zueinander und beeinflussen sich gegenseitig positiv oder negativ. Das Ziel war es nun eine sinnvolle Darstellung dieser Wechselwirkungen zu generieren und/ oder die Indikatoren in diese Darstellung mit einzubeziehen.

Zum heutigen Zeitpunkt sind 68 Indikatoren zu definierten Elementen zugeordnet.

Programmierung

Die App besteht aus einer HTML-Seite, in die verschiedene JavaScript-Dateien eingebunden werden. Das Styling der Website erfolgte einerseits durch CSS und, zur Vereinfachung des allgemeinen Stylings und der Anpassung an verschiedene Bildschirmformate, andererseits durch die Einbindung der Bootstrap-Bibliothek (CSS & Javascript). Für die Visualisierung des «Force Directed Graph» wurde die JavaScript-Bibliothek D3 (Data-Driven Documents) in die Website integriert. Die Einbindung der Elemente und Indikatoren erfolgte mittel Javascript und zur Darstellung der unterschiedlichen Statistiken der Indikatoren wurde die c3.js Library verwendet.

Datenbearbeitung

Der Datensatz wurde vom Bundesamt für Umwelt zur Verfügung gestellt. Einerseits besteht der Datensatz aus einer Liste von insgesamt 220 Indikatoren. Andererseits aus einem Datensatz, der das abgebildete Netzwerk umfasst. Zusätzlich ist für jeden Indikator eine separate Statistik vorhanden, die sich in Datenmenge und Datenart teilweise unterscheiden. Wie erwähnt hat das BAFU zurzeit 68 Indikatoren in ein das Netzwerk eingearbeitet.

Die Datenbearbeitung erfolgte in zwei Schritte:
  1. Die Indikatoren und das Netzwerk wurden aus einem Excel-File in ein CSV-File transformiert und mithilfe von CSV to JSON in ein JSON-File transformiert.
  2. Die Statistiken der einzelnen Indikatoren wurden aus den verschiedenen Excel-Files ebenso in ein JSON-File transformiert.

Step-by-Step

Wer findet der suchet.

Nach einer ersten Datensichtung musste ich mich für einen anderen Datensatz entscheiden. Dieser Wechsel war mit einem nicht zu unterschätzenden Mehraufwand verbunden, da ich für meinen ursprünglichen Datensatz schon einige Ideen, Skizzen und Recherchen angestellt hatte.

Nicht alle Daten sind für eine Visualisierung geeignet:
Wenn Ihr unsicher seit, ob der Datensatz wirklich richtig ist oder genügend bietet, dann fragt direkt nach.

Schaut bei den Visualisierung im Internet immer auch die Version der d3.js Library an, dann habt ihr später keine Probleme und könnt clever kombinieren.

Visualisierungsidee

Erste Visualisierungs-Skizzen zeigten schnell, dass eine Art Mind Map zur Visualisierung die optimale Lösung ist, da Abhängigkeiten und Beziehungen dargestellt werden müssen. In Frage kam, nach einiger Recherchezeit eigentlich nur der «Directed Force Graph». Zu Beginn habe ich ein einfaches Beispiel kopiert und dieses versucht an meine Bedürfnisse anzupassen. Dies ist eigentlich keine schlechte Variante, aber irgendwann kommt man einen Punkt, an dem das grundlegende Verständnis für den kopierten Code fehlt und eine weitere Anpassung am Ursprungscode, aufgrund der zunehmenden individuellen Bedürfnisse, nicht mehr möglich ist.

Pfeile reichen nicht

Die Angst, dass aus dem Graph keine wirklichen Erkenntnisse gewonnen werden können, ohne dass zusätzlich Informationen für den Nutzer bereitgestellt werden, bestätigte sich relativ schnell. Es klingt logisch, dass der Privatpersonenverkehr ein Indikator des Elements «Treibhausgasemission» ist, aber wie wird den dieser Indikator gemessen/ bewertet und definiert? Die Entscheidung fiel auf eine zwei Spalten-Layout. Links der Graph, Rechts die Details. Diese Entscheidung zog weitere Arbeiten mit sich: Darstellung der Details und Anpassung des Graphs an diese Bedürfnisse.

Visualisierungsidee genau niederschreiben und durchdenken. Eine Änderung/ Ergänzung der Visualisierung zieht viel Arbeit nach sich.

Von Anfang an versuchen den kompletten Code zu verstehen, damit Ihr Anpassungen und Ergänzungen auch vornehmen könnt.

Die Mücke wird zum Elefanten

Damit ich den Programmiercode des «Directed Force Graph» einigermassen verstehe, musste ich diesen nochmals von Grund auf neu aufbauen und eine sinnvolle Aufteilung und Einbindung der verschiedenen Dateien überlegen. Zusätzlich wurde, mit der Entwicklung eines zweispaltigen Layouts, mehr Programmierarbeit nötig. Per Klick sollten die Informationen automatisch aus dem JSON-File gelesen werden. Die Elemente und Indikatoren sollten also «dynamisch» eingebunden werden. Da die Indikatoren alle eine unterschiedliche Statistik besitzen, habe ich mich dazu entschieden die c3.js-Library einzubinden und eine Funktion zu schreiben, welche, je nach übergebenen Daten die Statistiken generiert.

Der Elefant hat eine Schwester

Damit die Funktion alle Statistiken möglichst dynamisch aus der Datenbasis lesen kann, musste die Datenbasis angepasst werden. Bis zum jetzigen Zeitpunkt, dachte ich die Programmierarbeit sei der Elefant, aber rückblickend ist die Datenarbeit und die individuelle Bearbeitung der 68 Datensätze die effektiv zeitaufwendigste Arbeit an dieser ganzen App gewesen.

Die Datenbearbeitung ist ein wesentlicher Teil, nicht unterschätzen.

Das Styling und das Schreiben der Texte für die Website ist ebenso wichtig und zeitintensiv, wie die Programmierung und die Datenbearbeitung.

Unter Dach und Fach

Am Samstag vor der Präsentation habe ich die Datenarbeit und die grundlegenden Funktionen zu Ende programmiert, mit dem Styling der Page begonnen und erste Textstücke vollendet. Auch für diese, scheinbar einfachen, Abschlussarbeiten braucht man unglaublich viel Zeit. Die Website soll ja auch gut aussehen und nicht nur funktionieren. Zusätzlich konnte ich einige Dinge, die ich noch einbauen wollte, nicht mehr realisieren, weil die Zeit nicht ausgereicht hätte.

About

Verwendete Daten und Quellen

Datenbasis:
Umweltindikatoren und Wirkungsbeziehungen
(BAFU)		 Indikatoren (Excel/ JSON)
Netzwerk (Excel/ JSON)
Converter von CSV to JSON www.convertcsv.com
Programmierung d3.js
c3.js
jQuery
bootstrap
w3schools.com
Force Directed Graph
Bildquellen Bild im Header
Html, Css und JS
Bootstrap 4
D3.js
C3.js

Über den Autor

Adrian Spring
MSc Business Administration
Universität Bern
Adrian.Spring@students.unibe.ch

Diese App wurde im Rahmen der Vorlesung "OpenData" von Dr. Matthias Stürmer an der Universität Bern im FS 2019 programmiert und am 23. Mai 2019 veröffentlich.