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.
New York ist ein hektischer Ort, an dem der Verkehr niemals schläft und die Straßen ständig überfüllt sind. Mit einer Masse von Fahrzeugen auf den Straßen und einem Strom von Menschen, die von einem Ort zum anderen eilen, sind Stresssituationen und Zusammenstöße unvermeidlich. In diesem Zusammenhang möchte ich in meiner Datenvisualisierung genauer analysieren, ob es eine Korrelation zwischen den Uhrzeiten und Fahrzeugunfällen gibt.
Projektumsetzung
Während des visuellen Gestaltungsprozesses wurde mir schnell klar, dass eine Kartenansicht für meine Visualisierung am besten geeignet ist. Ich begann mit verschiedenen Versionen der Karte und experimentierte mit verschiedenen Elementen und Details. Im Laufe des Prozesses wurde mir jedoch bewusst, dass eine Reduktion der Darstellung erforderlich ist, um die Informationen klar und verständlich zu präsentieren.
Varianten
Hovern
Wenn über einen Kreis gehovert wird, werden relevante Informationen zur Anzahl der Autounfälle sowie zu den Todesfällen angezeigt. Darüber hinaus sind die Autounfälle nach den betroffenen Personen - Fahrradfahrern, Fußgängern und Autofahrern - aufgeschlüsselt.
Infobox
Darüber hinaus haben die Nutzer:innen die Möglichkeit, bei der Infobox mehr Informationen über die Visualisierung zu erhalten.
Auswahlmöglichkeiten
Unterhalb des Schaubild befindet sich die Navigation, und die Benutzer:innen können sowohl einzelne Monate als auch Zeiten auswählen. Links befindet sich jeweils die Optionen, die Auswahl rückgängig zu machen.
Code
Ein wichtiger Teil des Codes ist die Funktion drawHeatmap(), die die Punkte auf der Karte zeichnet. Sie verwendet die berechneten Daten, um die Position und Größe der Punkte zu bestimmen. Die Farbe der Punkte wird mithilfe einer Farbskala basierend auf dem Verhältnis von Todesfällen zu Autounfällen festgelegt. Beim Hovern über einen Punkt werden Informationen zu den Unfällen und den betroffenen Personen angezeigt.
Eine Besonderheit des Codes ist die Verwendung der Bibliothek chroma.js zur Erstellung der Farbskala. Diese Bibliothek bietet umfangreiche Möglichkeiten zur Farbmanipulation und Farbzuordnung.
Hinterlasse einen Kommentar