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.
Für unseren Start in das Modul programmiertes Entwerfen 2, iterierten wir zunächst verschiedenste Möglichkeiten mit simplen Formen verschiedenste Informationen zu übermitteln.
Mit dem hieraus erlangten wissen, machten wir uns daran, Datensätze mithilfe von Javascript, HTMl und CSS, sowie den Libraries Jquery und Gmynd so zu programmieren/gestalten, dass sie möglichst einfach verdaulich sind. Auch jegliche Symbolik sollte soweit wie möglich außenvor gelassen werden.
Hierfür entschied ich mich für eine Sammlung an Professionell erhobenen Reviews zu verschiedensten Schokoladentafeln. Die für mich am prägnantesten wirkenden Informationen innerhalb dieses Datensatzes waren: Die Herkunft der Kakaobohnen, sowie der Ort der Manufaktur, der damit verbundene Kakaogehalt und natürlich auch das Rating der jeweiligen Tafeln selber.
Zuerst machte ich mich daran, meinen Datensatz nach interessanten Verhältnissen und Verknüpfungen zu filtern.
Ausgegangen davon, baute ich dann die Screens für Herkunft und Manufaktur (zunächst in Figma) weiter aus.
Der erste Punkt, um den ich mich kümmerte, war die Formgebung.
Gefolgt davon, wollte ich eine Darstellung finden, welche es ermöglicht, die Transportwege der einzelnen Schokoladentafeln im Rahmen unserer Aufgabenstellung (pures Javascript, keine Symbolik) nachzuverfolgen.
Nachdem ich eine Art der Visualisierung gefunden habe, die ich für passend empfunden habe, machte ich mich an das programmieren.
Hierfür tastete ich mich zunächst mit mir bekannten Code - Schnipseln an mein erwünschtes Ergebnis heran.
Und fing dann an jeder Tafel mithilfe von Clustern einen eigenen Punkt zu geben und dabei trotzdem die Gruppierungen der einzelnen Länder beizubehalten.
Die Ansicht zur Veranschaulichung des Kakaogehaltes begann zunächst in Form von diversen Diagrammen auch über Figma
und wurde dann in Form eines aus punkten bestehenden Balkendiagrammes in Code umgesetzt.
Zusätzlich entschied ich mich dazu, die Library Chroma.js einzubinden und mit ihrer Hilfe einen Farbverlauf von Beige zu Tiefbraun auf den jeweiligen Kakaogehalt zu mappen, um diesen somit über jeden Screen verfolgen zu können.
Zu guter Letzt verknüpfte ich alle meine Screens durch Animationen miteinander, um zu veranschaulichen, dass es sich stets um die selben Schokoladentafeln handelt.
Hinterlasse einen Kommentar