Mathesis Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
[[projekte_im_sommersemester_2020|← Zurück zur Projektauswahl]]

====== Waste-Tracer ======

{{:ss20:muellabfuhr.jpg|}}\\
https://tse1.mm.bing.net/th?id=OIP.-GH-Iffjr8UvwvGA6f0USQHaDt&pid=Api

===== Teilnehmer*innen =====
Robert Kuzio \\
Lisa Neufeld


===== Dokumentation =====

==== Projektbeschreibung ====

== Darstellung der Abfallzirkulation anhand einer erstellen Stadt ==

Wo geht unser Müll eigentlich hin, nach dem wir ihn vor dem Haus in die Tonne geworfen haben? Welchen Weg legt er zurück und was passiert mit ihm? Wie viel wird überhaupt recycelt? In diesem Projekt machten wir uns auf die Suche nach Antworten für diese Fragen. Schnell kam jedoch heraus, dass es komplizierter ist als wir zunächst dachten (was ja häufig der Fall ist). So verbrachten wir die ersten Wochen vor allem damit den Abfallentsorgungswirrwarr zu durchblicken. Um es für andere einfacher zu machen, die Wege des Mülls von Berlin nachzuvollziehen, entschlossen wir uns dazu eine Karte zu erstellen. Die Abfallzirkulation sollen dann mit sich auf der Karte bewegenden Elementen nachvollziehbarer werden.

==== Abfallwege nachvollziehen ====

Anders als wir zunächst dachten wird der Abfall in Berlin vor allem lokal verwertet und entsorgt. 
Auch interessant war, dass lediglich 30% des Verpackungsmüll recycelt wird. In Deutschland allgemein ist die Quote, allerdings mit 17,3 % noch schlechter.

{{:ss20:muellaufteilung.jpeg|}}

==== Projektbestandteile und -gliederung ====
== Rohdaten sammeln und vorbereiten ==
Wir begannen damit Daten für die Müllverteilung zu suchen. Anfangs versuchten wir globalen Daten zu finden, welche uns Informationen über jegliche Müllrouten und Verarbeitungsweisen bieten würden. Schnell wurde uns aber klar, dass die Müllverarbeitung und Müllverteilung komplexer war als vorerst angenommen, weshalb wir uns zunächst auf Berlin konzentrierten.
Die Hauptquelle war dabei die Senatsverwaltung für Umwelt, Verkehr und Klimaschutz Berlins. Darin fanden wir alle wesentlichen Informationen zu Müllrouten, Verarbeitungsstationen und auch Daten zu den jeweiligen Mengen. Diese waren jedoch leider alle nur in PDF-Form zu finden und mussten teilweise über ein online-tool und teilweise händisch in ein für uns einlesbares Format, in diesem Fall das CSV-Format, umgewandelt werden.

== Daten in Python bearbeiten einlesen und umstrukturieren, ggf sorteiren und exportieren==
Für die Datenverarbeitung benutzten wir hauptsächlich Python, da es darin sehr einfach ist, Daten aus dem lokalen Speicher einzulesen. Auch die Verarbeitung und eventuelle Sortierung wird in Python durch Pakete wie „pandas“ erleichtert.

<code python>
import pandas as pd
import os         
dirname = os.path.dirname(__file__)          #wird benutzt, um den absoluten Pfad des Projekts auf dem PC zu bekommen. Kann anschließend mit relativen Pfaden verknüpft werden.

#Einlesen, umstrukturieren und Exportieren der Abfallstandorte:
filenameSource = os.path.join(dirname, '../import_data/Koordinaten_Abfallstandorte.csv')
filenameOutput = os.path.join(dirname, '../Visualization/public/dataFromPython/wasteFacilities.json')
wasteFacilities = pd.read_csv(filenameSource, sep=';')
wasteFacilities.to_json(filenameOutput, orient="records", indent=1)

#Einlesen, umstrukturieren und Exportieren der Abfallaufteilung:
filenameSource = os.path.join(dirname, '../import_data/Abfallaufteilung.csv')
filenameOutput = os.path.join(dirname, '../Visualization/public/dataFromPython/wasteNumbers.json')
abfallaufteilung = pd.read_csv(filenameSource, sep=';')
abfallaufteilung.to_json(filenameOutput, orient="records", indent=1)
</code>


== Visualisierung in JavaScript & HTML ==

Für die visuelle Darstellung entschieden wir uns, Javascript und HTML zu benutzen. Darin gibt es zahlreiche Bibliotheken, welche gute Karten bieten. Wir benutzen nun MapBoxGL, welches eine recht moderne Bibliothek ist und zahlreiche Optionen bietet. \\
<del>Da wir gerade noch dabei sind, unseren Code aufzuräumen und weitere Funktionen zu implementieren, wird sich der Code bis nächsten Freitag noch stark ändern. Daher folgen Code Beispiele und Erklärungen…
</del> \\
\\
Der JavaScript Code ist folgendermaßen strukturiert:
  - Generieren einer leeren Karte (MapBoxGL)
  - Importieren von JSON-Daten, welche bereits vorher in Python exportiert wurden
  - Für jeden Dateneintrag je eine Instanz einer Klasse erstellen und in einem Array abspeichern
      - Abfallentsorgungseinrichtungen, Abfallquellen, Zwischenlager ...
      - Jede Istanz enthält alle nötigen Daten zur Weiterverarbeitung
  - Für jede anzeigbare Instanz einen Marker auf der map erstellen
  - Der user kann nun die Visualisierung starten
\\
Es gibt drei Klassen, welche als Marker auf der Karte zu sehen sein können: "transferStation", "wasteFacility" und "source". Alle drei Klassen erben von der Klasse "mapMarker", welche vor allem alle Funktionen zur Veränderung der Anzeige beinhaltet.\\
Alle Klassen in JavaScript:\\
<code javascript>
export class mapMarker {
    constructor(latitude, longitude, icon){
        this.latitude = latitude;
        this.longitude = longitude;
        this.icon = icon;
    }
    
    getMarker(){
        return this.marker;
    }
    
    setBarTo(value, color){
        //code
    }
    
    getBarValue(color){
        //code
    }
    
    hideAllBars(){
        //code
    }
    
}

export class source extends mapMarker {
    constructor(type, mass, associatedWasteFacilities, latitude, longitude, locationName, color){
        super(latitude, longitude, type);
        this.mass = mass;
        this.associatedWasteFacilities = associatedWasteFacilities;
        this.locationName = locationName;
        this.type = type;   //plastic, bio_waste, paper, glas, metall, mixed_solid_waste
        this.color = color;
    }

    addToMap(){
        this.marker = createMapboxGLMarker({type: this.icon, latitude: this.latitude, longitude: this.longitude, data: undefined, createPopup: false, initBarValue: 100} );
    }


}

export class transferStation extends mapMarker{
    constructor(latitude, longitude, type){
        super(latitude, longitude, type);
    }
}

export class wasteFacility extends mapMarker{
    constructor(name, contractor, processingCapability, latitude, longitude, type){
        super(latitude, longitude, type);
        this.name = name;
        this.contractor = contractor;   //BSR, BR, ALBA ...
        this.processingCapability = processingCapability; //mg/a
        this.type = type;   //recycling, incineration, biogas, compost
    }

    addToMap(){
        this.marker = createMapboxGLMarker({type: this.icon, latitude: this.latitude, longitude: this.longitude, data: this.name, createPopup: true, initBarValue: 0});
    }

    getName(){
        return this.name;
    }
}

export class wasteFacilityOutcome {
    constructor(type, amount, unit){
        this.type = type;
        this.amount = amount;
        this.unit = unit;
    }
}

</code>
\\
==== Installation des Projekts ====
Das Projekt ist auf dem GitLab Server der TU-Berlin zu finden.\\
https://gitlab.tubit.tu-berlin.de/robekay/waste-tracer.git

Zur Installation und zum Ausführen des Projekts wird NodeJS und NPM benötigt. (Bei der Installation von NodeJS wird npm meist mitinstalliert).\\
Windows & Mac:\\
https://nodejs.org/en/download/

Ubuntu:\\
sudo apt install nodejs\\
sudo apt install npm

== Installationsschritte: ==
  - git clone https://gitlab.tubit.tu-berlin.de/robekay/waste-tracer.git
  - cd waste-tracer/MapBox/Visualization/
  - npm  install     (installieren aller Pakete)
  - npm run dev      (Visualisierung ausführen)
\\
Nun sollte das zu sehen sein, was im nächsten Punkt dieser Doumentation beschrieben und gezeigt wird.

==== Derzeitiger Stand ====
Der waste tracer kann zurzeit verschiedene Daten im CSV Format einlesen und diese visuell darstellen. Jedoch werden bisher nur die Abfallentsorgungseinrichtungen und Abfallquellen initiiert und dargestellt. \\
Der User kann über unter der Karte befindliche Buttons für jede Abfallquelle eine Animation starten, welche den Verlauf dieser Müllart darstellt. Folgendes GIF zeigt den bisherigen Stand:\\
(Die Strömngsrichtung der Punkte sollte stets zu den Abfallentsorgungseinrichtungen sein. Die geringe Framerate des GIF´s kehrt die Richtung um ;))
{{ :ss20:trash_test2.gif |}}

==== Fazit und Ausblick ====

//EDIT: Alles kursiv im Text markierte wurde nachträglich bereits behoben bzw. implementiert.//


Unser Projekt hat noch einige Baustellen, die fertiggestellt werden müssen, damit unser Ziel, einer Karte mit dargestellten Müllwegen, funktioniert. \\
Zunächst sollten die Punkte sich auf unseren Daten basiert erzeugt und bewegt werden. Außerdem sollten die Punkte mehrere Stationen passieren können, damit der Ablauf dagestellt werden kann. //Damit all das funktioniert, muss die Animation flüssiger laufen.// //Denn nur wenn die Punkte nicht stocken oder stehenbleiben, kann die Karte verständlich werden.//\\
//Ein weiteres Ziel, sind sind Popups, die erscheinen sollen, sobald man auf einen Standort einer Station auf der Karte klickt oder mit der Maus darüber fährt.// Hier sollen dann beispielsweise relevante Informationen zum Müllheizkraft Ruhleben erscheinen. //Außerdem soll eine Grafik oder Diagramm erscheinen, an der man die Daten zu dem jeweiligen Müll, der mit diesem Standort  zu tun hat, ablesen kann.//\\
Außerdem sollen für jeden Standort die Emissionen bzw. Erträge an Energie oder Rohstoffen visualisiert werden. Die Daten dazu gäbe es für Berlin.\\
Falls das alles super funktionieren sollte, könnten wir versuchen, das Ganze auf weitere Städte zu übertragen. Ansich ist das kein Problem, da wir die Strukturen und das Programm sehr allgemein gefasst haben, jedoch müssten die Daten von der anderen Stadt, in dem selben Format wie die Berliner Daten sein, was in 99% der Fälle leider nicht der Fall ist. Die Daten zusammeln und händisch zusammenzutragen wäre also erheblicher Aufwand. Wie wir dieses Problem lösen könnnen, wissen wir allerdings noch nicht. \\
(ggf. werden noch ein paar Ziele bis zum 11.09. erreicht)\\ \\
Rückblickend war das Finden, Verstehen und Vorsortieren der Daten wesentlich aufwendiger als gedacht, weshalb es auch einen Großteil unserer Zeit in Anspruck nahm. Nach dem wir aber so langsam den Informationsdschungel durchblickten, stießen wir auf einige interessante Informationen über den Berliner Abfall, die uns vorher nicht bewusst waren. Ein Beispiel hierfür wäre, dass Berlin keinen Müll exportiert, sondern alles wird weitgehend lokal verwertet oder verbrannt. (Wir dachten Anfangs, es ergeben sich sehr weite Wege innerhalb Europas oder gar zu anderen Kontineten.)\\
Der Programmierteil, der in Python stattfindet, ist auch deutlich kleiner ausgefallen als zunächst angenommen. Und auch hier spielte überwiegend das Sortieren der Daten eine Rolle. Das eigentlich Spannende, die Visalisierung spielte sich dann in JavaScript ab. 




[[WT_Literaturangaben|Literaturangaben]]

==== Entwicklung ====

[[WT_Protokoll|Protokoll]] \\
[[WT_Projektplan|Projektplan]]

[[waste-tracer|nach oben ^]]
Mathesis Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
