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.
In dem Kurs Programmiertes Entwerfen 2 sollten wir aus einem großen Datensatz eine interaktive Datenvisualisierung erstellen. Diese sollte mithilfe von html, css, javascript und jquery umgesetzt werden.
Das Museum of Modern Art bietet eine der weltweit bedeutendsten und einflussreichsten Sammlungen moderner und zeitgenössischer Kunst und gehört zu den meistbesuchten Kunstmuseen der Welt. Die Grundlage für das Projekt bilden zwei sehr große Datensätze. Der Datensatz Artworks enthält Informationen über Kunstwerke sowie teilweise Informationen zum jeweiligen Künstler. Der ergänzende Datensatz Artist bildet Informationen über alle ausgestellten Künstler ab. Es handelt sich um 27 Spalten, insgesamt 130.000 Zeilen und rund 200.000 Kunstwerke aus 150 Jahren. Aber was sind nun die interessanten Aspekte die der Datensatz für uns bereithält?
Fragestellung
Ich habe mir die Frage gestellt, ob die Kunstwerke von Frauen im MoMa kleiner als Werke ihrer männlichen Kollegen sind? Falls dem so ist, gibt es hierzu viele Interpretationsmöglichkeiten und Fragen die aufgeworfen werden. Sind Künstlerinnen einfach bescheidener und bilden diese Eigenschaft auch in ihren Arbeiten ab? Oder aber sprechen wir von ganz pragmatischen Gründen und eine große Leinwand war für Frauen bedingt durch die geringere Finanzkraft einfach nicht erschwinglich?
Konzept
Zur Visualisierung sollen Kunstwerke durch Formen dargestellt werden und das Ganze wird in einem Zeitstrahl angeordnet. Es folgen viele Skizzen hierzu, die später mit einer Farbcodierung ergänzt wurden. Transparenzen sollten zeigen wie viele Gemälde sich in einem Größenbereich befinden und die erste Idee der Größenbereichs-Trennung entstand. Dann entstand aus den zahlreichen Varianten schließlich die Metapher mit den Bildrahmen: Jeder Rahmen zeigt einen Kunstwerk-Größenbereich. Metaphern ermöglichen es auch ohne Text eine Aussage zu erkennen. Man erkennt unterschiedlich große Rahmen und kann dadurch auf unterschiedlich große Bilder schließen.
Data-Cleaning
Feststehend, welche Daten benötigt werden, kann der Datensatz durch Data-Cleaning mit Python vereinfacht werden. Hierzu werden die Datensätzte “gemerged”, Zeilen mit Nullwerten “gedroppt”, Größengruppen berechnet und gerundet und Jahre in 50er-Schritten zusammengefasst. An dieser Stelle wurden die Daten auch ausgewertet. Dies führt uns zu den ersten interessanten Erkenntnissen. Die Anzahl von Prints ist im Vergleich zwischen Künstlerinnen und Künstlern nahezu identisch. Betrachten wir aber Paintings und Photographs stellen wir fest dass, fast 3x so viele von männlichen Künstlern stammen, wie von weiblichen.
Layout
Verschiedene Farbvarianten wurden getestet und die Achsen werden eliminiert. Hierbei entsteht aber die Idee mit der Hover-Achse. Ziel ist es die Achse beim Eintritt des Cursors in den Renderer-Bereich anzeigen zu lassen und die aktuelle Mausposition mit der Größenskala zu verknüpfen.
Die Farbe für Female steht mit Rosa-Rot bereits fest, für Male wird Blau verwendet. Dies stellt eine schnelle Auffassung nach gängiger westlicher Farbempfindung sicher. Das Logo von MoMa wird Corporate-Design konform umgedreht, die Entscheidung für die Schrift orientiert sich auch an der Corporate Font Franklin Gothic - Libre Frankling Google Font.
Interaktion
Es gibt insgesamt 11 Schaltflächen, diese sind unterteilt in die Kategorien Gender, Classification und den frei wählbaren Zeitraum. Der Zoom funktioniert über ein Scrollrad, außerdem gibt es einen Zoom-Reset Button. Durch den Link-Hover wird der Text beim Berühren mit der Maus transparent. Fährt man mit dem Cursor über einen Rahmen, wird einem im Rendererbereich ein Label angezeigt, welches die Höhe und Breite des aktuell angesteuerten Rahmen anzeigt. Alles ist nahezu komplett Responsive angelegt und funktioniert somit in verschiedenen Browserbreiten. Beim Klick auf einen Link bauen sich die Rahmen von links unten mit fadein auf. Um das Gesamtkonzept abzurunden wurde ein Favicon erstellt und ein eigener Cursor gestaltet.
Ergebnis
In der Zeitspanne um 1850 gibt es keine Paintings von Female, die Fotografien und Prints von Frauen sind im Vergleich zu denen von Männern kleiner. Betrachtet man den Bereich 1900 wird ersichtlich, dass Kunstwerke generell mit den Jahren immer größer werden. Im Bereich Print Frauen ist die maximale Breite 5x so breit wie bei ihren männlichen Kollegen. Es werden mehr Rahmen aus der Kategorie Male angezeigt, da es zum einen mehr Größenkategorien gibt und zum anderen gibt es in den Kategorien Painting und Photograph ca. 3x so viele Kunstwerke von Männern im Vergleich zu Frauen. Dort wo sich die meisten Überschneidungen finden, kann man ein Standard-Format ablesen und unterschiedliche Standard-Formate von Männern und Frauen vergleichen.