animal shelter incomings

animal shelter incomings

Freya Michl

Der Schwerpunkt des Kurses Programmiertes Entwerfen 2 lag in der Auseinandersetzung von Farbe, Anordnung, Form und Ordnungsprinzipien, um die Zusammenhänge eines von uns gewählten Datensatzes sichtbar zu machen. Mithilfe von HTML, CSS und JavaScript sollte der Datensatz als eine interaktive Datenvisualisierung gestaltet werden.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker
Fabian Rauch

Datenvisualisierung

Vorübungen

Form & Position

Gegeben ist eine Datenreihe mit den Zahlen 7 | 2 | 4 | 10 | 13 | 8 | 11 Diese Datenreihe soll unterschiedliche Wetterinformationen wie Sonnenstunden, Niederschlagsmenge und Temperatur von sieben aufeinanderfolgenden Tagen repräsentieren. Aufgabe war es, diese Informationen jeweils mithilfe von Punkten, Strichen und Flächen zu visualisieren. Dabei wird auf eine stets unterschiedliche und semantisch prägnante Darstellung geachtet.



Farbsensibilisierung

Sieben Farben

Aufgabe war die Erstellung einer Farbpalette bestehend aus 7 Farben auf schwarzem Hintergrund. Hierbei sollen die Farben gut unterscheidbar sein, aber auch ein harmonisches Ganzes bilden. Alle sollen gleich wichtig sein.

Farbskalen

Im nächsten Teil der Aufgabe galt es Farbskalen mit insgesamt 13 Farbfeldern zu verschiedenen Thematiken zu erstellen.

Themenfindung

Für die Themenfindung habe ich im Internet nach eher größeren Datensätzen gesucht, wobei ich auf Kaggle fündig wurde. Letztendlich habe ich mich für den animal shelter incoming Datensatz entschieden, weil dieser einige visuelle Parameter beinhaltet und auch sehr ausführlich und vollständig zur Verfügung steht.

Design Entwürfe

Erste Skizzen

Nach Aufbereitung des Datensatzes, ging es darum erste Ideen zu Papier zu bringen. Da der Datensatz 11 verschiedene Parameter beinhaltet habe ich mich auf 6 konzentriert und versucht verschiedene Varianten zur Darstellung zu finden.


Erste Screenideen

Anschließend habe ich meine Favoriten in Figma umgesetzt und digitale Varianten gebildet. Diese Varianten waren noch nicht ganz ausgereift, weshalb ich weiter nach Möglichkeiten gesucht habe.


Farbspektrum

Bei der Farbwahl gab es die Schwierigkeit, dass die Intake Types und die Tiere jeweils als Farben dargestellt werden, weshalb ich mich nach mehreren Varianten dazu entschied, diese in unterschiedlichen Farben darzustellen und abzugleichen.


Interaktionen

Statusbar

In der Statusbar kann zwischen den 4 verschiedenen Screens gewechselt werden, wobei der aktive Screen immer weiß gekennzeichnet wird. Dabei habe ich mich für Helvetica als eine neutrale zurückhaltende serifenlose Schrift entschieden.


Hoverfunktion

Auf jeden Screen kann auf die verschiedenen Elemente gehovert werden, und es werden oben rechts im Informationsfeld nähere Informationen gezeigt.

Code

VueJS

Vue macht es einfach, gekapselte Web Komponenten zu erstellen, die jeweils auch gekapselten Javascript, CSS Code enthalten. Dadurch kommt man nicht in die Versuchung, Alles in eine große Datei zu schreiben und der Code bleibt übersichtlicher. Außerdem bietet Vue eine HTML templating engine, mit der es einfach ist, HTML Elemente zu generieren, was nützlich für komplexe Komponenten wie Diagramme ist, bei denen es z.B. nötig ist, dynamisch viele Datenpunkte zu generieren.

Beispiel: Im JS Teil einer Komponente wird ein String Array definiert ( ['String1', 'String2', 'String3'] ).
Der HTML Teil der Vue Komponente kann nun so darauf zugreifen:

Nach dem Rendering resultiert das im Browser in den folgenden HTML Elementen:

Abgesehen davon gibt es in Vue sogenante Reactive Properties. Die Idee ist, dass sich die verschiedenen HTML Elemente automatisch neu rendern, sobald eine Variable, die dort genutzt wird, verändert wird. Beispiel:

Beim Klick auf einen Button, wird exampleArray.push('String 4') ausgeführt. Dies updated das referenzierte reactive Array und würde dazu führen, dass das Beispiel HTML Template neu gerendert wird. Nach dem ersten Klick auf den Button, würde die generierte HTML Struktur sich also ins Folgende verändern:

Dies ist ein wichtiges Kernkonzept von Vue und nimmt dem Entwickler komplett die Arbeit ab, seine HTML Elemente zu updaten, wenn sich irgendwo Daten verändern, was schnell kompliziert werden kann.
Diese Reactive Properties sind auch mit zugewiesenen CSS Klassen kombinierbar. So wurde die Animation zwischen den verschiedenen Tabs realisiert.


Projektstruktur:

Beide Diagramtypen haben Ihre eigene Komponente. BarGraph (kann Säulen - oder Balkendiagramme darstellen), sowie CirclesDiagram und werden in den verschiedenen Views mehrfach mit unterschiedlichen Daten verwendet. Die Daten stammen aus einer CSV Datei(src/assets/data.csv), werden in src/store/data.ts geparsed und in src/store/index.ts für die verschiedenen Charts aufbereitet. Diesen Vorgang hätte man noch optimieren können und in einem vorgefertigtem Format als Datei speichern können. So wäre die Ladezeit beim Aufruf der Seite wesentlich geringer, das wäre allerdings auch mehr Aufwand gewesen.

Die einzelnen Chart Views (src/views/*.vue) erzeugen verschiedene Instanzen der Diagram Komponenten und speisen diese mit den dazugehörigen reactive Werten aus src/store/index.ts.