Datengrafik: 
Fleischkonsum
in Deutschland

Die interaktive Datengrafik zeigt den Fleischkonsum in Deutschland in den Jahren 2012-2017. 

Die Besonderheit des Projektes war, dass keine Beschriftungen eingesetzt werden durften. Das bedeutet, die Informationen konnten nur über Farbe, Form, Position, Transition und Interaktion übermittelt werden.

Fokus des Projekts
Datenvisualisierung
Javascript

Zeitraum
WS 18/19 
Programmiertes Entwerfen II

Einzelprojekt

Betreuer
Prof. Hartmut Bohnacker

Die Datengrafik behandelt die Fleischsorten Rind, Schwein, Schaf, Huhn, Ente, Gans, Pute und Fisch. 

Die erste Ansicht zeigt den Konsum pro Kopf in kg. Ein Balken stellt dabei ein Jahr dar. 

Die zweite Ansicht veranschaulicht den Selbstversorgungsgrad unseres Landes sowie 

die importierte, exportierte und konsumierte Menge in Tonnen in einem Jahr. Näheres zu dieser Ansicht weiter unten.

In der dritten Darstellung hat man die Möglichkeit, eine einzelne gewählte Fleischsorte über alle sechs Jahre hinweg vergrößert zu betrachten.  

 Interagieren Sie selbst mit der Datengrafik: 

Datenaufbereitung

Der erste Schritt war, sich geeignete Statistiken auf destatis.de herauszusuchen. 

Da diese nicht in der Form vorlagen, wie ich sie benötigte, musste ich die Daten neu in Tabellen aufbereiten und Berechnungen durchführen

So waren z.B. nur Zahlen zu Schlacht-, Import- und Exportmenge der verschiedenen Fleischarten sowie des Bevölkerungsstands Deutschlands zu finden. 

Die konsumierte Menge berechnete ich wie folgt:
Konsum/Kopf =
(Schlachtmenge - Export + Import)/Bevölkerung

1 Schlachtzahlen aus verschiedenen Statistiken
2 Import- und Exportmengen, ebenfalls aus verschiedenen Statistiken
3 Ausschnitt des finalen Datensatzes

Überlegungen zur Darstellung

Nachdem die Daten aufbereitet waren, probierte ich in Numbers verschiedene Darstellungen aus. 

Import, Export und die daraus berechneten Werte wollte ich als Balkendiagramm abbilden, um die Mengen leichter vergleichen zu können. Allerdings fiel mir keine Darstellung ein, die interessant und anschaulich die Informationen übermittelt. Die Idee, den Selbstversorgungsgrad darzustellen, kam erst später auf. 

Das Kreisdiagramm zeigt den Gesamtkonsum an Fleisch. Man sieht hier schon die Problematik, mit der ich zu kämpfen hatte. Die Werte sind sehr unterschiedlich. Schwein nimmt über die Hälfte ein, während die Menge von z.B. Gänsefleisch kaum mehr erkennbar ist. 

Darstellungsversuche_Diagramme

Farbwahl

Mir war früh klar, dass ich die einzelnen Fleischsorten durch Farbe codieren wollte. Dabei orientierte ich mich, soweit es ging, an der tatsächlichen Fleischfarbe. Ebenso sollte die Schwere des Tieres durch die “Schwere” der Farbe transportiert werden. 

Die Gesamt-Farbe setzt sich etwas von den anderen ab, soll optisch über allem stehen und dennoch gut zu den anderen Farben passen.

farbwahl_neu

Erste Ansicht

Die erste Ansicht stellt, wie schon erwähnt, den Konsum pro Kopf dar. Da die Mengen teilweise sehr gering waren (z.B. ca. ein Prozent bei Gans), überlagerten sich die Rechtecke an diesen Stellen. Um dieses Problem zu umgehen probierte ich verschiedene Darstellungen aus.

Dabei hatte ich allerdings einen groben Denkfehler. Ich stellte die einzelnen „Balken“ immer voreinander dar, sodass der vordere immer einen Teil des hinteren verdeckt. In der Darstellung nebenan ist das ersichtlich, weil die Balken versetzt sind. In meiner Infografik habe ich das jedoch nicht getan, wodurch die Daten verfälscht wurden.

Die Lösung dafür ist ein gestapeltes Balkendiagramm, wie man es ganz rechts sieht. 

falschesDiagramm
1ans_v11final-1

Das ist die finale Darstellung der ersten Ansicht, ein klassisches gestapeltes Balkendiagramm. Jeder Balken stellt ein Jahr dar. 

Ein Balken im Detail
Selbstversorgungsgrad

In der zweiten und dritten Ansicht werden Balken mit folgendem Aufbau gezeigt. 

Hier wird unter anderem der Selbstversorgungsgrad dargestellt. Das umfasst die Fleischmenge, die im Land produziert und verzehrt wird

Die linken Kanten der Rechtecke greifen die Leserichtung auf und transportieren die Idee einer Chronologie. Zuerst wird Fleisch importiert, im Lande wird selbst Produziertes geschlachtet, verzehrt und übriges Fleisch exportiert.

BalkenImDetail_crop

Zweite Ansicht

2ans_v2.3-2

Die zweite Ansicht stellt den Selbstversorgungsgrad eines Jahres für alle gegebenen Fleischsorten dar.

Beim ersten Entwurf waren die Balken in der Horizontalen angeordnet. Der Balken für den Selbstversorgungsgrad war etwas nach oben versetzt, um sich vom Import und Export optisch abzutrennen.

Hier war mir allerdings der Informationsgehalt zu gering. Deshalb veränderte  ich die Höhe des Import-Rechtecks und schuff damit eine neue Linie. Sie stellt den Konsum dar (siehe auch bei Balken im Detail).

In dem Screenshot ist zudem das Hover-Rechteck zu sehen. Es war knapp größer als die eigentliche Darstellung. Es wirkte ungewollt und zu dezent, weshalb ich das final noch änderte. 

2ans_v8.3-2hover
2ans_v11final-2

Dies ist die finale Version der zweiten Ansicht. 

Hier drehte ich die Balken um 90°, um konsistent zur dritten Ansicht zu bleiben. Die Gründe hierfür werden dort erläutert.

Dritte Ansicht

Die dritte Ansicht zeigt den Selbstversorgungsgrad einer Fleischsorte über alle Jahre hinweg.

Die Entwicklung dieser Ansicht lief synchron zur zweiten, weshalb sie sich sehr ähnlich sehen.

3ans_v2.3-3rind
3ans_v8.3-3hover

Auch hier fand die Darstellung des Konsums Einzug.

Zudem implementierte ich eine Vergrößerung der Balken, um in der Detail-Ansicht eines Fleisches, die einzelnen zum Teil sehr kleinen Beträge genauer betrachten zu können.

Da die Leserichtung bei einer horizontalen Anordnung der Balken nicht durch Standards belegt ist - von oben nach unten oder von unten nach oben? - drehte ich die Balken um 90°. Im westlichen Raum ist nun klar, dass die Reihenfolge der Jahre von links nach rechts zu lesen ist.

Final passte ich noch die y-Position der Balken an, sodass die Export-Rechtecke immer auf der gleiche Linie beginnen. Dies gewährleistet eine bessere Vergleichbarkeit.

3ans_v11final-3
study-icon-box

Mein Learning

Es steht außer Frage, dass ich während des Projektes einiges in Javascript dazulernen konnte. 

Sehr spannend fand ich auch zu sehen, welchen immensen Mehrwert die passenden Animationen meiner Datengrafik gebracht haben. Das Wissen, wie sich ein Objekt verhält - wo kommt es her, wo geht es hin, wie ordnet es sich ein und auf welche Art und Weise tut es das - macht die Darstellung sehr viel verständlicher. Und zudem optisch ansprechender. 

Das Einzelprojekt forderte zudem viel Selbstdisziplin von mir. Entscheidungsfreiheit gab es mir auch. Ich ließ mich allerdings dazu verleiten, nicht nach der erst- aber der zweitbesten Idee zu greifen und diese umzusetzen. Doch gerade das gemeinsame Überlegen, Diskutieren und Erarbeiten eines Konzeptes ist das, was ein Projekt reifen lässt und erfolgreich macht. Durch die Einzelarbeit lernte ich Teamarbeit neu zu schätzen.

Mein Ziel sind intuitive Interaktionen und Erlebnisse, die in Erinnerung bleiben.

© 2020 Elisabeth Straß • Impressum