In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Dokumentation des Kurses Designer/-innen-Geschichte bei Philip Zerweck im Wintersemester 2015/16
In dem Kurs Designer/-innen-Geschichte behandelten wir die Verbindungen von Designern untereinander. Was waren z.B. die Arbeitskollegen von Walter Gropius oder Freunde von Otl Aicher und welche weiteren Verbindungen können diese Designer aufweisen. Die Aufgabe des Kurses bestand darin 10 verschiedene Designer und jeweils 10 Verbindungen zu anderen Designern akademisch zu recherchieren.
Wir haben jedoch als Gruppe die gesammelten Daten Visualisiert. Dabei haben wir die Visualisierung sowohl technisch als auch konzeptionell als Webseite Umgesetzt. Durch die extreme Fülle an Informationen von 606 Designern und insgesamt 1.700 Verbindungen gerieten wir jedoch sowohl technisch als auch konzeptionell an unsere Grenzen.
Die Designer sind chronologisch von links nach rechts anhand des Geburtsdatum geordnet. Die vertikale Verteilung in beide Richtungen ist dabei zufällig, wobei die Designer mit den meisten Verbindungen in der Mitte liegen.
Durch scrollen lässt sich die ganze Visualisierung verkleinern oder vergrößern. Zum bewegen innherhalb der Grafik klickt und zieht man die Maus in eine Richtung. Durch einen „mouse hover“ auf einen Knoten oder auf eine Verbindung lassen sich die jeweiligen Informationen dazu abrufen. Ein Klick auf eine Verbindung öffnet den hinterlegten Link zur jeweiligen Quelle. Durch klicken auf einen Knoten öffnen sich weitere, von den Studenten recherchierte, Informationen zu dem jeweiligen Designer, wie z.B. die besuchten Institutionen, eine kurze Vita oder die Zusammenfassung aller Verbindungen.
Webseite zum Projekt: designgeschichte.fh-potsdam.de
Übersicht aller Knoten und Verbindungen
hover Effekt bei einem Knoten
detaillierte Informationen zu einem Designer
Das Projekt haben wir komplett mit Hilfe von d3.js umgesetzt. Die Daten werden dabei von 3 verschiedenen JSON Dateien aus dem Backend der Datenbank geliefert und interaktiv im Browser gerendert.
Das [Backend](http://designgeschichte.fh-potsdam.de/backend/dashboard „Backend“) wurde komplett von Julian Scheidsteger programmiert und konnte mit dem Entsprechenden Login von den Studenten gefüllt werden.
Den kompletten Quellcode zur Visualisierung gibt es hier: github.com/varusgarcia/Design-History-InfoVis
Liste der Knoten im Backend