Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge in größeren Datenmengen sichtbar zu machen. Das Ergebnis ist ein programmierter, klickbarer Prototyp.
Thema: Datenvisualisierung
Die Daten werden ohne Zuhilfenahme von bildhaften Elementen (Piktogramme, Fotografien, …) interaktiv dargestellt. Alphanumerische Zeichen (Text, Zahlen) sollen so sparsam wie möglich verwendet werden. Umso wichtiger wird es, gezielt Farbe, Form und Position einzusetzen, um
Mengen sichtbar zu machen,
Kategorien zu kodieren,
Gruppen zu bilden,
Zeitabläufe nachverfolgbar zu machen,
…
Die Darstellung von Daten zwingt schon an sich zu einer parametrischen Denkweise. D.h. die grafischen Elemente müssen flexibel gedacht werden, so dass sie unterschiedliche Zahlenwerte und Bedeutungen annehmen können. Das Denken in Varianten ist also essenziell. Zudem erlauben unterschiedliche Gesamtdarstellungen neue Einblicke in die Zusammenhänge innerhalb der Daten. Durch Interaktion können weitere Zusammenhänge vom Nutzer entdeckt werden.
Ziel des Kurs Programmiertes Entwerfen 2 war es, sich mit dem Thema Datenvisualisierung umfassend zu beschäftigen. Schwerpunkt lag insbesondere auf der Auseinandersetzung mit Form, Farbe, Anordnung, Animation und reduzierter Typografie. Auf bildhafte Darstellungen sollte verzichtet weden. Dabei galt es Zusammenhänge innerhalb der Daten visuell sichtbar und begreifbar zu machen. Für die Umsetzung mittels Code verwendeten wir die Programmiersprache JavaScript sowie die jQuery Library, Chroma.js und die gymnd-Library.
Datensatz
Der ausgewählte Datensatz befasst sich mit dem geschlechtsspezifischen Lohngefälle zwischen Männern und Frau im Zeitraum von 1981 bis 2011. Dabei beziehen sich die Zahlen auf die amerikanische Gesellschaft, somit sind auch alle Angaben in US Dollar. Die erhobenen Daten befassen sich mit den unterschiedlichen Gründen, die einen Einfluss auf das Lohngefälle haben: Dazu zählen rechtliche, soziale und wirtschaftliche Faktoren.
Variablen
Für die Darstellung der Daten habe ich letztendlich folgende Variablen verwendet:
“year” (im Zeitraum zwischen 1981-2011)
“sex” (unterteilt in männlich und weiblich)
“hrwage” ( = hourly wage, dem Stundenlohn)
“age” (zwischen 25 und 64 Jahren)
Dabei habe ich in JavaScript den durchschnittlichen Stundenlohn für Männer und für Frauen für ein bestimmtes Jahr berechnet.
Konzept
Zunächst ging es darum den ungleich verteilten Stundenlohn von Männern zu Frauen darzustellen. Danach skizzierte ich Darstellungen, um die mögliche Ursachen dafür aufzuzeigen.
Figma
Nach ersten Skizzen ging ich zu dar Darstellung meiner Ideen in Figma über. Hier konnte ich mit verschiedenen Kombinationen von Farbe, Form und Anordnung experimentieren.
gender differences
Um den monetären Unterschied zu Beginn eindeutig aufzuzeigen verwendete ich ein Balkendiagramm. Hierbei unterschied ich in absolute und relative Zahlen. Bei der relativen Ansicht entsprechen die Balken der Männer 100%, während die Balken der Frauen proportional dazu angezeigt werden. Dies veranschaulicht den proportionalen Unterschied von Frauen im Vergleich zu Männern.
Darstellung des geschlechtsspezifischen Lohngefälles von Männern und Frauen in absoluten ZahlenDarstellung des geschlechtsspezifischen Lohngefälles von Frauen relativ zu Männern
age
Bei der zusätzlichen Darstellung des Alters wollte ich herausfinden, ob bestimmte Lebensphasen einen Einfluss auf das Gehalt von Männern und Frauen haben. Hierbei hat sich herausgestellt: Umso älter die Menschen waren und umso weiter man in den Jahren fortschritt, desto höher wurde das Einkommen.
Einfluss des Alters auf das Einkommen von Männern und Frauen
Endergebnis
Dieses Video zeigt einen Lauf durch alle Ansichten sowie ihre Interaktionsmöglichkeiten.