European Livestock

Aufgabenstellung

Die Aufgabe bestand darin aus einem selbstgewähltem Datensatz eine Datenvisualisierung zu erstellen, die mehrere Ebenen des Datensatzes umfasst. Der fertige Prototyp sollte mittels HTML und JavaScript mit den GMYND- und jQuery-Libraries gestaltet werden.

Datensatz

Der Datensatz ist von Eurostat, dem statistische Amt der Europäischen Union und hat Informationen zum konventionellen und biologischem Tierbestand. Bei den Tierarten handelt es sich um Schwein, Rind, Huhn und Schaf.
Man muss als erstes den Datensatz in Excel aufräumen und überflüssige Informationen löschen. Danach geht es daran die .csv-Datei in eine .json-Datei umzuwandeln, damit man 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 den 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.
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.