Zunächst galt es, einen geeigneten Datensatz zu finden, welcher visualisiert werden konnte. Thematisch waren keine Grenzen gesetzt, viel mehr war darauf zu achten, dass der Datensatz genügend Parameter enthält und vielschichtige Darstellungen zulässt. Nach der Auseinandersetzung mit den unterschiedlichsten Themen und deren Datensätzen fiel die Entscheidung auf einen sehr umfangreichen Datensatz von der Plattform Kaggle. Anschließend erstellte ich einige Skizzen, konzipierte die Datenvisualisierung in Figma und programmierte die verschiedenen Datengrafiken.

Der gewählte Datensatz enthält Informationen über Todesfälle in den USA, welche in direkter Verbindung zur amerikanischen Polizei stehen. Erfasst wurden sämtliche Polizeieinsätze mit tödlichem Ausgang vom Jahr 2000 bis heute. Der Datensatz wurde erstellt von D. Brian Burghart von Fatal Encounters.

Zur Verfügung gestellt wird der Datensatz “Deaths caused by Police” von Kannen Ravinther auf Kaggle, welcher diesen regelmäßig aktualisiert. Zuletzt aktualisiert wurde der Datensatz im Oktober 2021.

Der Datensatz enthält detaillierte Informationen über die getöteten Personen: Name, Alter, Geschlecht, Ethnie, Bild, Ort der Tötung, Beschreibung des Zwischenfalls, mögliche psychische Vorerkrankungen und viele weitere Daten.

Datenverwendung
Da der Datensatz auch viele Informationen enthielt, welche für die Datenvisualisierungen unerheblich waren, bereinigte ich diesen zunächst. Um zudem die zu verarbeitende Datenmenge geringer zu halten, beschränkte ich mich bei der Datenvisualisierung auf die Jahre 2016-2021. Trotz dieser Reduktion der Daten umfasst dieser noch immer über 10 500 Zeilen.

Für die Verwendung der Daten in der programmierten Visualisierung wurde die CSV-Datei in eine JSON-Datei gewandelt und folgende Informationen wurden verwendet:

• ID
• Name
• Alter
• Geschlecht
• Ethnie
• Staat des Vorfalls
• Längen- und Breitengrade des Vorfalls
• Flüchtig/Nicht flüchtig
• Psychische Vorerkrankungen
• Beschreibung des Vorfalls

  

Nachdem ich mich ausgiebig mit dem Datensatz vertraut gemacht habe, begannen die visuellen Überlegungen zur Darstellung. Hierzu fertigte ich zunächst einige grobe Skizzen an. Zunächst erstellte ich Skizzen zum Vergleich der Todeszahlen in den einzelnen Staaten und zur Visualisierung der einzelnen Fälle.

Nach den ersten Skizzen arbeitete ich meine Konzepte weiter aus in Figma. Hier konnte ich mich ausgiebig mit passenden Farben, Formen und Anordnungen vertraut machen und experimentieren.

Staatenvergleich
Zunächst fokussierte ich mich auf die Darstellung der Todeszahlen in den einzelnen Staaten. Hier wollte ich herausfinden, ob es irgendwelche Besonderheiten oder Auffälligkeiten in den Staaten gibt. Die Idee, die Staaten geografisch korrekt anzuordnen, favorisierte ich von Beginn an, dennoch probierte ich auch andere Anordnungen.

Einzelpersonen
Außerdem wollte ich die Einzelpersonen aufgrund der sehr interessanten Kurzbeschreibungen darstellen. Hierzu entstanden ebenfalls einige Varianten. Hier war aufgrund der vielen Vorfälle klar, dass maximal einzelne Monate auf einem Screen visualisiert werden könnten.

Vergleich der Personengruppen
Neben der Darstellung der Einzelpersonen wollte ich eine Darstellung der Fälle sortiert in verschiedene Personengruppen, um tatsächliche Auffälligkeiten bezogen auf Parameter wie Ethnie, Alter oder Geschlecht zu ermitteln. Auch hier entstanden verschiedene Varianten, dies zu visualisieren.

Nachdem die Entscheidung darauf gefallen war, in den Darstellungen unter anderem die verschiedenen Ethnien darzustellen, wurde hierfür eine geeignete Farbcodierung festgelegt. Da alle Vorfälle in Verbindung zur US-amerikanischen Polizei stehen, entschied ich mich zunächst dafür dies farblich aufzugreifen und mit Rot- und Blautönen zu arbeiten, welche an das rot-blaue Lichtsignal der Polizeiwagen erinnert.

Da für die gleichwertige Darstellung aller Ethnien mehr Farben vonnöten waren, entschied ich weitere Farben hinzuzunehmen. Da überwiegend schwarze und weiße Menschen zu den Opfern zählen, erhielten diese die Hauptfarben rot und blau, um die Überlegungen zur Farbsemantik dennoch möglichst beizubehalten. Alle gewählten Farben für die verschiedenen Ethnien sollten dieselbe Strahlkraft und Bedeutsamkeit aufweisen wie die gewählten Hauptfarben. Von sonstiger semantischer Farbenvergabe wurde bewusst abgesehen.

So entstand folgende Farbcodierung für die Ethnien:

Für den Hintergrund entschied ich mich für ein sehr dunkles Blauschwarz, um die Gesamtstimmung der Ernsthaftigkeit des Themas anzupassen. Die bunten Farben wirken sehr strahlend und der dunkle Hintergrund entschärft die fröhliche Farbstimmung und verleiht dem Gesamteindruck die notwendige Dramatik.

Für Darstellungen, die sich nicht auf Einzelpersonen oder Personengruppen und deren Ethnie beziehen, entschied ich mich dazu eine Mischfarbe aus den anderen Farben zu erstellen. Zunächst nutzte ich hierfür chroma.js und experimentierte auch mit unterschiedlichen Mischverhältnissen der Ethnienfarben. Allerdings waren diese Mischfarben visuell nicht sehr ansprechend und es ergaben sich ausschließlich verschiedene Brauntöne, welche nicht ins Gesamtkonzept passten.

Deshalb entschied ich mich aus den zwei Hauptfarben rot und blau eine Mischfarbe zu erstellen:

Auch bei der Wahl der Formen standen zunächst die Einzelpersonen und Personengruppen im Mittelpunkt. Zur Darstellung der Personen entschied ich mich für Kreise, da diese durch Modifikation einzelner Seiten eine große Varianz erlauben. Männliche Opfer, welche den größten Anteil der Opfer ausmachen, werden als gefüllte Kreise dargestellt. Weibliche Opfer werden durch einen Kreis ohne Füllung dargestellt. Versuchte das Opfer während des Vorfalles zu fliehen oder befand es sich bereits auf der Flucht wird dies durch eine Ecke rechts oben am Kreis dargestellt. Mentale Vorerkrankungen lassen sich an einer Ecke links unten am Kreis erkennen. Treffen beide Parameter zu, ergibt sich eine Form mit zwei spitzen und zwei abgerundeten Ecken.

Es ergaben sich folgende Formen:

Als Font wählte ich die IBM Plex Sans die über Google Fonts eingebunden werden konnte. Sie ist sehr gut lesbar, hat Charakter, ist aber dennoch sehr seriös und sachlich, dem Thema angemessen. Für Tooltips, Bodytext und die Hauptnavigation verwendete ich hier den Regular-Schriftschnitt und für Headlines den Semibold-Schrifschnitt.

Der erste Screen unterteilt sich in zwei Unterscreens.

Relative
Auf dem ersten sind die Opfer zusammengefasst je nach Staat in welchem sie ums Leben gekommen sind und im Verhältnis zur Einwohnerzahl des jeweiligen Staates. Hierzu war es notwendig einen weiteren Datensatz miteinzubeziehen, welcher die Einwohnerzahlen der einzelnen Staaten beinhaltet. Durch diese Darstellungen lassen sich Staaten mit verhältnismäßig hohem Fallaufkommen erkennen. Der verwendete Datensatz der Einwohnerzahlen umfasst keine verschiedenen Jahre, jedoch ist davon auszugehen, dass die Einwohnerzahlen innerhalb von 4 Jahren nicht allzu sehr schwanken.

Absolut
Auf dem zweiten Unterscreen sieht man die absoluten Opferzahlen in einer Heatmap angezeigt. Für diese Darstellung werden die Längen- und Breitengrade in einzelne Felder unterteilt und Fälle welche im selben Feld stattgefunden haben zusammengefügt. Je mehr Opfer es pro Feld gibt, desto kräftiger ist die Farbe des Feldes. Über die Transparenz der Farbe lassen sich Abstufungen erkennen und Hotspots ausmachen.

Auf dem zweiten Screen, der „Victim Comparison“, werden ausgewählte Parameter der Opfer innerhalb der Monate verglichen. Es werden alle Jahre zusammengefasst, um mögliche Auffälligkeiten in den Kalendermonaten zu zeigen. Zudem lassen sich durch diese Darstellungen tatsächliche Auffälligkeiten in Bezug auf Ethnie, Geschlecht und Alter sehr gut filtern. Dargestellt werden die Parameter in Kreisen, welche durch ihre unterschiedliche Größe angeben, wie viele Personen, auf die ein Parameter zutrifft, getötet wurden. Gestalterisch bildet der zweite Screen die Brücke zwischen dem ersten und dem letzten Screen. Die Kreisgröße gibt die Auskunft über die Anzahl der getöteten Personen wie auf der relativen „State Comparison“ und das Color- und Shapecoding des dritten Screens wird erstmalig eingeführt.

Auf dem dritten Screen sind die einzelnen Fälle einsehbar. Sie sind sortiert nach den Monaten der einzelnen Jahre. Die Personen sind auf verschiedenen Kreisradien je nach Alter angeordnet:

Dargestellt werden die Einzelfälle durch die Kreise mit dem zuvor erläuterten Color- und Shape-Coding. Über eine Filterfunktion lassen sich gezielt bestimmte Fälle ein- und ausblenden. Gefiltert werden kann nach Ethnie, Geschlecht und den Parametern Flüchtig/psychisch erkrankt. Beim Wechsel zu einem anderen Monat eines Jahres, bleiben die Filterauswahlen aktiv, was einen Vergleich unter den Monaten zulässt. Bei der Entwicklung dieser Darstellung war die erste Idee, die Fälle in Zeilen und Spalten anzuordnen. Durch die Anordnung im Kreis jedoch lässt sich die Gesamtanzahl der getöteten Personen klarer herauslesen und besser mit anderen Monaten vergleichen als bei einer linearen Darstellung.

Die Navigation auf der Seite unterteilt sich in drei Hierarchien. Zunächst wechselt man über das Hauptmenü mit den Punkten „State Comparison“ „Victim Comparison“ und „Incident Details“ zu den verschiedenen Datenvisualisierungen.

Auf jeder Seite befindet sich ein Untermenü, welches entweder ein weiteres Diagramm zeigt, oder aber als Filterfunktion dient um das angezeigte Diagramm zu modifizieren.

Auf dritter Ebene befindet sich ein Menü, am unteren Rand des Bildschirmes, welches dem Betrachter die Möglichkeit gibt zwischen Jahren oder Monaten zu springen.

Animationen werden meist nur beim Wechsel zwischen den Screens eingesetzt oder um beispielsweise Interaktionen wie „Hovern“ zu visualisieren.

Der Screen „Incident Details“ ist hier die Ausnahme, bei welchem über die Filterfunktion gezielt Objekte vom Bildschirm nach unten hin verdrängt werden. Es entsteht der Eindruck, die nicht ausgewählten Fälle fielen zum Boden herab. Zudem wird beim Hovern über ein Objekt, der dazugehörige Text eingeblendet der mehr Auskunft über diese gibt.

Hier sieht man nun den Code für die Animation auf “Incident Details”.

1. Die Stage und der Filter werden aufgesetzt.
2. Anschließend wird geprüft, ob die ausgewählten Parameter auf die “Dots” zutreffen.
3. Trifft ein Parameter zu, wird der “Dot” an der gewünschten Position gezeichnet.
4. Trifft kein Parameter zu, wird der “Dot” mittels CSS vom Bildschirm verdrängt.

Math.random sorgt dafür, dass die Animation natürlicher aussieht, da sich die “Dots” alle ein wenig anders vom Bildschirm bewegen.