Datenvisualisierung: Auseinandersetzung mit Form, Farbe und Ordnungsprinzipien, um Zusammenhänge in größeren Datenmengen sichtbar zu machen. Das Ergebnis ist ein programmierter, interaktiver Prototyp.
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.
Diese Datenvisualisierung zeigt alle UFO-Sichtungen in den USA zwischen 2009 und 2014 auf einer Heatmap. Die Betrachter können nach verschiedenen Kriterien filtern, um die Häufigkeit der Sichtungen an verschiedenen Orten zu sehen und potenzielle Korrelationen zu identifizieren.
Der Datensatz
Mein Datensatz umfasst weltweite UFO-Sichtungen von 1906 bis 2014. Er stammt von Kaggle.com und enthält Positionsdaten, Zeitdaten und vieles mehr. Zunächst habe ich untersucht, ob Zusammenhänge zwischen diesen Datenpunkten bestehen und welche für Visualisierungen relevant sind. Danach habe ich den Datensatz mithilfe eines Skripts von über 1,4 Millionen Daten auf nur noch 300.000 reduziert. Den dezimierten Datensatz habe ich danach in meinen Code implementiert.
Benutzte Libraries
Die Bibliothek gmynd.js wurde für Datenvisualisierung und -verarbeitung genutzt, um Daten zu gruppieren und verschiedene numerischen Werte zu identifizieren. jQuery.min.js diente für Event-Handling, HTML und Animationen. Es bietet eine vereinfachte Syntax, behebt Browser-Inkompatibilitäten und erleichtert die Bearbeitung von HTML-Elementen im DOM. Für die Heatmap habe ich chroma.min.js verwendet, um die Farbskalen zu definieren.
Styling
Durch meinen Designprozess habe ich mich letztlich für folgendes Styling entschieden. Die Schriftauswahl fiel auf Courier New Monospace in Regular und Bold, um an alte „geheime“ amerikanische UFO-Sichtungsakten zu erinnern. Die Farbpalette umfasst einen sehr dunklen Hintergrund sowie zwei Abstufungen von Hellgrau. Zudem wurden fünf verschiedene Farbskalen für die Heatmap verwendet.
Endprodukt
Hier kann man eine Auswahl meines Endergebnisses sehen. Die Bilder wechseln zwischen Jahren, Jahreszeiten und am Ende zwischen Zeit und Form.
Hinterlasse einen Kommentar