Aufgabe 1 Diagramme in JavaScript (10 Punkte)

Aufgabenstellung

Erstellen Sie eine Webseite in JavaScript, auf der die Daten zum Wärmebedarf Bau 2 aus den Jahren 2012, 2013 und 2014 in mit verschiedenen Diagrammen dargestellt wird:

Tortendiagramm (Pie Chart)
Liniendiagramm (Line Chart)
Punktdiagramm (Scatter Chart)
Blasendiagramm (Bubble Chart)

Beurteilen Sie die einzelnen Diagramme auf Eignung für die Darstellung des Datensatzes nach den in der Vorlesung besprochenen Kriterien (Eigenschaften des Beobachtungsraums, Eigenschaften der Merkmalsausprägungen).

Vorangehende Analyse des Datensatzes

Beobachtungsraum

Uns liegt ein diskreter Beobachtungsraum vor. Es existiert zunächst ein eindimensionaler Beobachtungsraum, die Zeit. Da es sich aber anbietet einzelne Jahre miteinander zu vergleichen haben wir den Merkmalsraum um eine weitere Dimension erweitert. In diesem neuen Merkmalsraum ist es nun sowohl möglich, die einzelnen Jahre in ihrer zeitlichen Abfolge zu verfolgen, indem man z.B. nach dem Dez./2013 beim Jan./2014 weiterliest. Als auch der direkte Vergleich zu den vorherigen Monaten durch die Aufteilung des Datensatzes in drei Serien.

Merkmalsraum

Unser Merkmalsraum ist eindimensional und beinhaltet nur die Merkmalsausprägung Heizwärmebedarf. In dieser Merkmalsausprägung gibt es eine Ordnungsrelation, da es sich um die Menge der reellen Zahlen handelt. Da die Merkmalsausprägung als Zahlen angegeben werden, haben wir außerdem eine Metrik vorliegen. Aufgrund der Ordnungsrelation und vorhandener Metrik sprechen wir auch von einer quantitativen Merkmalsausprägung.

Lösung

Deployment URL: http://marcel.schwarz.gitlab.io/geovisualisierung/project-1/

Tortendiagramm

Das Tortendiagramm gibt gute Rückschlüsse, wie viel Anteile die Segmente an einem Ganzen zeigen, also z.B. x % von 100 %. Da unser Datensatz in den Monaten Juli und August in allen 3 Jahren aber Nullwerte aufweisen, sind die Rohdaten in dieser Form nicht wirklich Aussagekräftig. Außerdem ist das Mehrfachaufkommen der Monate sehr verwirrend und ergibt in diesem Fallbeispiel keinen Sinn, die Daten so zu visualisieren.

Unser erster Lösungsansatz, war die Daten pro Monat zu akkumulieren und so das Diagramm aufzuräumen. Das Diagramm ist zwar übersichtlicher geworden, aber nicht wirklich aussagekräftiger. Die Frage welchen Zweck die Darstellung verfolgt, kann immer noch nicht zweifelsfrei beantwortet werden.

Schließlich haben wir uns entschieden, die Daten auf das Jahr zusammenzufassen um so den Gesamtverbrauch pro Jahr zu visualisieren.

Liniendiagramm

Ein Liniendiagramm zeigt Trends oder Veränderungen in guter Relation zurzeit. Durch die 3 Zahlenreihen ist auch ein direkter Vergleich der Werte pro Monat als auch über den Jahresverlauf zu schließen. Es lassen sich besser Änderungen über die vergangenen Jahre feststellen, als auch eine vorausschauende Datenanalyse vornehmen.

Wir haben die Rohdaten ohne Änderung im Diagramm übernommen, da, wie gerade beschrieben, der Vergleich über die drei Jahre gut ersichtlich, als auch eine Trendanalyse ohne weiteres vorgenommen werden kann.

Punktdiagramm

Das Punktdiagramm ist gut geeignet, wenn Werte für zwei Dimensionen grafisch dargestellt werden sollen. Durch farbliche Gruppierung der Punkte, in unserem Fall nach Jahr gruppiert, lässt sich wie im Liniendiagramm eine Trendanalyse als auch direkter Vergleich der einzelnen Werte pro Monat vereinfacht durchführen.

Auch bei diesem Diagramm haben wir keine Änderung an den Rohdaten vorgenommen.

Blasendiagramm

Blasendiagramme haben große Ähnlichkeit mit Punktdiagrammen, weisen aber ein zusätzliches Attribut auf. Das bedeutet eine weitere Dimension im Beobachtungsraum ist nötig. Wie bei einem Punktdiagramm wird durch zwei Dimensionen die Position der Blase auf der x- und y-Achse bestimmt. Die dritte Dimension richtet sich nach der Größe der Blase.

Wir haben uns dazu entschieden, die Darstellung des prozentualen MWh-Anteils des Monats zum Jahr auf die Größe der Blase zu visualisieren. So lässt sich gut analysieren, wie stark ein Monat zum Gesamtverbrauch des Jahres beigetragen hat und man außerdem eine Trendanalyse vornehmen. So erkennt man z.B., dass in den Monaten Januar bis Mai die Blasengröße abnimmt und von Oktober bis Dezember nimmt die Größe zu.

Fazit

Für uns ist die Visualisierung im Punktdiagramm für den gegebenen Datensatz am geeigneten. Da im Vergleich zum Liniendiagramm keine Interpretation der Daten zwischen den Monaten möglich ist. Eine Linie zwischen den Monaten suggeriert da immer einen Wert, bzw. eine Verbindung.

Das Tortendiagramm fanden wir für den Datensatz am wenigsten geeignet, gerade wegen der Nullwerte in den Sommermonaten ist eine Darstellung im Tortendiagramm nicht ansprechend, bzw. überhaupt nicht aussagekräftig.

Mit Blick auf die vorhergegangene Datenanalyse haben wir uns überlegt, dass ein Säulendiagramm mit parallelen Säulen unsere erste Wahl wäre. Denn wir haben einen diskreten Beobachtungsraum, mit wenig Elementen als auch ordinal und quantitative Merkmalsausprägungen. Daraus ergibt die Empfehlung des Säulendiagramms. Da wir ein Jahr immer isoliert betrachten und diese aber direkt miteinander vergleichen wollen, wäre ein Säulendiagramm mit parallelen Säulen ideal für die Visualisierung des gegebenen Datensatzes.

Aufgabe 2 TreeMap (5 Punkte)

Aufgabenstellung

Gegeben seien 2 Ordner, die folgende Dateien enthalten:

Ordner 1:
Datei1: 90 KB, Typ: DOC
Datei2: 60 KB, Typ: PNG
Datei3: 30 KB, Typ: PDF

Ordner 2:
Datei4: 40 KB, Typ: DAT
Datei5: 20 KB, Typ: DAT

Erstellen Sie manuell eine TreeMap aus den gegebenen Dateien. Stellen Sie auch alle Zwischenschritte grafisch dar. Für das Layout verwenden Sie den in der Vorlesung besprochenen Algorithmus Squarified TreeMaps. Orientieren Sie sich bei der Darstellung am Skript. Der gegebene Ordner soll in einer Gesamtfläche von 600 mal 400 Pixeln auf dem Bildschirm dargestellt werden. Geben Sie jeweils das maximale Seitenverhältnis mit an.

Lösung

PDF Ausarbeitung: aufgabe2.pdf

Implementieren Sie die TreeMap in JavaScript und vergleichen Sie das Ergebnis. Ein Beispiel finden Sie im Buch "Data Visualization with JavaScript" im Kapitel 4.

Deployment URL: http://marcel.schwarz.gitlab.io/geovisualisierung/project-1/#foldermap

Gegenüberstellung manueller Ansatz vs. JavaScript

Der Durchlauf des Algorithmus scheint gleich sein. Aber im manuellen Verfahren werden die Dateien ihrer Größe nach hinzugefügt. Daraus ergibt sich, dass die Dateien "oben" darauf gelegt werden. Die JavaScript Vorgehensweise scheint genau transponiert zu sein, so ergibt sich eine umgekehrte Reihenfolge der Dateien.