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 den Vereinigten Staaten leben etwa 330 Millionen Menschen. Das sind fast viermal so viele wie in Deutschland. 2020 wurden in den USA über 1000 Menschen von Polizisten erschossen. In Deutschland liegt diese Zahl im selben Jahr bei 15 Getöteten. Die Zahl für Polizeigewalt in den Staaten steigt jährlich. Wie kommen solche Zahlen zustande und warum scheint es in diesem Thema kein Ende zu geben?
Um auf diese Thematik aufmerksam zu machen wählte ich einen Datensatz, der die von Polizisten erschossenen Opfer in den Jahren 2015 bis September 2022 dokumentiert. 17 Spalten und 7730 spalten geben Einsicht auf Name, Geschlecht, Nationalität und weitere Merkmale der getöteten Menschen. Für meine Datenvisualisierung konzentrierte ich mich auf die geografischen Werte, die im Datensatz gegeben sind. Mein Ziel war es darzustellen in welchen Jahren, wo, wieviele Personen zum Opfer wurden.
Konzept
Für die geografische Darstellung war mir schnell klar, dass ich eine Map für meine Visualisierung nutzen möchte. Ich begann mit ersten Skizzen. Letztendlich entschied ich mich dafür, eine Heatmap zu programmieren. Hierbei wird durch einzelne Rechtecke ein Grid erschaffen. Die Rechtecke werden je nach Anzahl der Tötungen eingefärbt, dies lege ich durch die Transparenz fest. So färbt sich das Grid an den einzelnen Koordinaten entsprechend der Daten aus dem Datensatz und dadurch wird schließlich die Map gezeichnet.
Umsetzung
Visualisierung und Entwicklung
Um eine erste Vorstellung meiner Heatmap und ein Gefühl für die Rastergröße zu bekommen illustrierte ich meine Idee und verschiedenen Rastern zunächst in Figma. Hierbei überlegte ich anfangs noch, ob ich eine Zweitansicht gestalte, in dem mein erstes Raster noch ein weiteres Mal unterteilt wird, um so weitere Kategorien aufzuführen. Ich entschied mich allerdings dagegen, da meine Heatmap sonst zu unübersichtlich geworden wäre, wenn ich mit der Transparenz und zusätzlich noch verschiedenen Farben gearbeitet hätte. Deshalb beschloss ich von Anfang an ein recht detailliertes Grid zu erstellen, auf dem ich wirklich nur die Anzahl der Shootings darstelle. Gerne hätte ich noch weitere Kategorien, wie Alter, Geschlecht oder Nationalität der Opfer miteingebaut, allerdings fehlten mir hierzu am Anfang wenn ich ehrlich bin einfach die Skills und im späteren Verlauf, wo ich mir diese Aufgabe nun zugetraut hätte, reichte mir letztendlich nicht mehr die Zeit.
Zu Beginn gruppierte ich meine Daten, so dass ich einsehen konnte welche Menschen in denselben Koordinaten erschossen wurden. Um dies deutlicher darzustellen, rundete ich die geografischen Werte.
Ich passte die Größe der angezeigten Kästchen an und bestimmte die abhängig von der Anzahl der Erschossenen die Transparenz.
Nun hatte ich ein recht großes Grid, das mir die verschiedenen Fälle anzeigte. Allerdings funktionierte die Farbgebung noch nicht und ich selektierte überflüssige Daten, die ich nicht angezeigt haben wollte (Alaska).
Ich passte die Größe des Grids und somit auch der einzelnen Rechtecke an und überarbeitete die Farbgebung. Nun wurde meine Map detailliert genug gezeichnet und die Rechtecke wurden knalliger, je mehr Fälle hineinfielen. Nun fehlte nur noch die Überschrift und damit war die erste Ansicht fertig.
Hauptansicht
Auf der Hauptansicht fügte ich rechts oben ein Hoverlabel hinzu, sodass man die Anzahl der Opfer als Zahl und nicht nur anhand der Transparenz sehen kann. Dies ist wie die Überschrift durch die weiße Farbe und die serifenlose Schriftart „Univers” gut zu lesen. Um auf die Zweitansicht zu gelangen platzierte ich unten mittig einen „timeline”-Button. Die Platzierung und Größe soll auffällig sein und zum Klicken anregen.
Zweitansicht
Mithilfe eines Sliders, dem ich die Jahres-Werte zuordnete kann man zwischen den einzelnen Jahren nach Belieben wechseln.
Reflexion
Rückblickend war das Projekt trotz Höhen und Tiefen eine Bereicherung für meine Programmier-Kenntnisse. Gerade in den letzten Wochen, in denen wirklich noch viel passiert ist, konnte ich nochmal viel lernen und verstehen. Oftmals stand ich vor Problemen und wusste mir im ersten Moment nicht ganz zu helfen. Mithilfe unserer Dozenten und oft auch stundenlanger Auseinandersetzung mit einzelnen Code-Abschnitten ist es mit letztendlich doch gelungen eine gute Datenvisualisierung zu entwickeln.
Hinterlasse einen Kommentar