European Livestock

European Livestock

Nina Bacher

Im Kurs Programmiertes Entwerfen 2 beschäftigen wir uns mit der Visualisierung von Datensätzen. Dabei setzten wir uns besonders mit Formen, Farben und Ordnungsprinzipien auseinander. Auf dieser Basis gilt es die Zusammenhänge in Datenmengen sichtbar zu machen und ein interaktives System zu entwickeln. Das System soll allein durch Form und Farben Informationen vermitteln. Umgesetzt wurde das Projekt mit JavaScript und der GMYND- und jQuery-Library.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker

Datenvisualisierung



Themenfindung

Bei der Themenfindung waren wir generell frei. Wichtig war es ein Thema mit guten Rohdaten zu finden, heißt einen möglichst umfangreichen, interessanten und vollständigen Datensatz. Ich habe mich Themen wie Fleischkonsum oder landwirtschaftliche Anbauflächen angesprochen haben, habe ich Datensätze in dieser Richtung gesucht. Hierbei bin ich auf Eurostat gestoßen. Eurostat hat Datensätze zum konventionellen und biologischem Tierbestand. Diese habe ich schlussendlich genommen.

Datensatz

Der nächste Schritt war es, die Rohdaten zu verarbeiten. Zunächst einmal habe ich mir einen Überblick auf Excel geschaffen und die Daten sortiert. Diese Aufgabe hat sehr lange gedauert, da ich fünf Datensätze (Rind, Schaf, Hühner, Schwein und biologische Tierhaltung) hatte. Spalten und Zeilen ohne Verwendung wurden aus dem Datensatz entfernt. Im weiteren Verlauf habe ich überprüft, ob bestimmte Spalten Lücken aufweisen und alle Parameter vollständig waren. Anschließend habe ich die .csv-Dateien in eine .json-Datei umzuwandeln, damit ich im Code mit den Daten arbeiten kann.


Colorcode

Die Farben standen relativ schnell fest. Jede Tierart hat sein eigenes Rot für konventionell und Grün für biologisch bekommen. Das Rot war an der Fleischfarbe angeglichen.


Gestaltungsvarianten

Auf Figma habe ich Konzepte entwickelt, wie man meinen Datensatz am Besten veranschaulichen kann. Da waren mir vor allem die oben genannten Farben wichtig und einfache Formen, wie Kreise und Balken. Hier habe ich immer wieder ganze Screens entwickelt.


Finales Konzept

Es gibt drei finale Screens. Einer davon zeigt eine eine Europakarte. Am Anfang wollte ich dort konventionell und biologischen Tierbestand vergleichen, später wurde es der Durchschnitt vom Tierbestand der vier Tierarten der letzten 10 Jahre. Bei dem zweiten Screen bin ich meinem Konzept treu geblieben. Jeder Halbkreis ist ein Jahr, wobei man die Entwicklung vor allem bei der biologischen Tierhaltung sehen kann. Anfangs wollte ich die Länder beim dritten Screen mit Kuchendiagrammen vergleichen. Später hat sich aber der herausgestellt, dass Balken verständlicher und besser zu vergleichen sind. So kann man jetzt die Tierhaltung der letzten 10 Jahre der Länder von Europa vergleichen, aber auch die Fleischproduktion der verschiedenen Tierarten pro Land. Auf dem Bild unterhalb sieht man den Prozess der einzelnen Screens. Das Rechte ist der finale Screen.


Interaktion & Navigation

Da mein gewählter Stil minimalistisch ist, habe ich mich dazu entschieden die Informationen auf dem ersten Blick dezent zu halten. Zu sehen sind die jeweilige Datengrafik, zwei Buttons oben links und eine Überschrift in der rechten Ecke. Das .mouseover() und.mouseleave() Event ermöglicht dem User eine Auffassung von näheren Informationen, beispielsweise Ländernamen oder welche Farbe was bedeutet.


Umsetzung

Für die Umsetzung unserer Konzepte verwendeten wir die Programmiersprache Javascript. Dabei durften wir die GMYND Libaries unserer Professoren und jQuery benutzen. Jede Ansicht wurde mit forEach()-Schleifen programmiert. Dazu kam bei der Halbkreis-Ansicht noch if()-Schleifen und bei dem Balkendiagramm for()-Schleifen.


Fazit

Einige Zusammenhänge die deutlich wurden:

  • Die Türkei hat den größten Tierbestand.
  • Frankreich produziert am meisten Fleisch.
  • Die Niederlande hat einen großen Tierbestand für ihre Größe des Landes.