Vergewaltigungen in Deutschland 2018

Vergewaltigungen in Deutschland 2018

Filippa Osswald

Der Schwerpunkt des Kurses Programmiertes Entwerfen 2 lag in der Auseinandersetzung von Farbe, Anordnung, Form und Ordnungsprinzipien, um die Zusammenhänge eines von uns gewählten Datensatzes sichtbar zu machen. Mithilfe von HTML, CSS, JavaScript und jQuery sollte der Datensatz als eine interaktive Datenvisualisierung umgesetzt/gecodet werden.


Programmiertes Entwerfen 2

IG2


Supervision
Prof. Hartmut Bohnacker
Fabian Rauch

Datenvisualisierung

Themenfindung

Zu Beginn des Projekts bestand die Aufgabe darin, einen geeigneten Datensatz zu finden. Thematisch waren keine Grenzen gesetzt, jedoch sollte dieser komplex sein und genügend Parameter besitzen. Ich schaute mir verschiedene Datensätze an und analysierte grob, welche Daten ich davon wie umsetzen könnte und welche besonderen Zusammenhänge man jeweils herausarbeiten könnte. Alternative Datensätze für dieses Projekt waren zum einen Statistiken bezüglich Vegetarismus, sowie weltweite Unterernährung.

Während der Recherche bin ich dann auf die Seite des Bundeskriminalamts (BKA) gestoßen, welches die verschiedensten Datensätze zur polizeilichen Kriminalstatistik, gefiltert nach einzelnen Parametern in Tabellen aufbereitet. Diese Statistiken listen alle Straftaten in Deutschland zwischen 2011 und 2020 auf. Letztendlich entschied ich mich für die Straftat „Vergewaltigung, sexuelle Nötigung und sexueller Übergriff im besonders schweren Fall einschl. mit Todesfolge §§ 177, 178 StGB“. Sowohl die zeitrelevante Brisanz der Thematik, als auch die Vielfalt der Daten führten zu der Entscheidung, diesen Datensatz zu visualisieren.

Datensatz

Durch die Vielfalt der verschiedenen Tabellen bestand der erste Schritt darin, die für meinen Datensatz relevantesten Tabellen herauszufiltern und zu strukturieren. Hierbei fokussierte ich mich auf die Überpunkte Fälle, Opfer und Täter in Deutschland im Jahr 2018. Die Datenvisualisierung baut sich aus neun einzelnen Datensätzen auf, die zu sechs Datensätzen zusammengefasst wurden.

Bevor ich mit der Visualisierung der Datengrafik begonnen habe, filterte ich die wichtigsten Parameter heraus um zu schauen, ob sich interessante Fragestellungen draus ergeben, die wie folgt lauten:

  • In welchem Bundesland sind 2018 am meisten Vergewaltigungen in Relation zur Bevölkerung geschehen und wo werden am meisten Fälle aufgeklärt?

  • Wie haben sich die Fallzahlen und deren Aufklärungsquote in den letzten 30 Jahren verändert, auch im Vergleich zu anderen Straftaten?

  • Sind mehr Männer oder Frauen Opfer dieser Gewalttat geworden? In welchem Alter befanden sich die Opfer?

  • Welche Beziehung besteht zwischen dem Opfer und dem Tatverdächtigen?

  • Welches Schema haben die Tatverdächtigen?

Entwürfe

Der nächste Schritt bestand darin erste Visualisierungsansätze zu erstellen und zu überlegen auf welche Art und Weise man die Daten visualisieren und Zusammenhänge darstellen kann. Durch die Frage was dem Betrachter als Erstes auffallen soll und den technischen Gegebenheiten, nahm die Komplexität der Darstellungen ab. Um eine multidimensionale Ansicht zu gewährleisten wurden an zwei Screens Filtermöglichkeiten am linken Screen hinzugefügt. So entstanden erste Entwürfe, die als Grundlage der späteren Screens dienten und mit zusätzlichen Informationsebenen ergänzt wurden.

Screens

Screen Fälle | Karte

Leitfrage: Gibt es einen Zusammenhang der Bundesländer mit der Anzahl der Fälle und deren Aufklärungsquote zusammen? Und in welcher Relation stehen diese zur Bevölkerungsanzahl in dem jeweiligen Bundesland?

Varianten Karte

Mein erster Screen dient zur allgemeinen Übersicht aller Fälle. Dabei lässt sich durch den Filter links umstellen, ob man das Verhältnis der Fälle in Relation zu der Bevölkerung des jeweiligen Bundeslandes haben will oder die Fälle in Relation zur Aufklärungsquote. Die Größe des Kreises visualisiert jeweils einen der Parameter Bevölkerung, Fälle oder Aufklärungsquote. Hierzu war es notwendig, einen weiteren Datensatz mit einzubinden, welcher die Einwohnerzahlen der einzelnen Länder beinhaltet.

Fälle | Karte

Code

Bei dieser Ansicht wurden mithilfe der gmynd-Library die Daten nach verschiedenen Parametern gefiltert und mit der gmyndMap-Funktion auf einen bestimmten Bereich gemappt und normiert. Somit war es möglich, die einzelnen Punkte nach longitude und latitude für jedes Bundesland einzeln zu maßen. Mithilfe von data konnte den Kreisgruppen verschiedene Parameter zugeordnet werden.


Screen Fälle | Vergleich

Leitfrage: Wie haben sich die Fallzahlen und deren Aufklärungsquote in den letzten 30 Jahren, im Vergleich zu anderen Straftaten verändert?

Varianten Vergleich

Durch das Submenü lässt sich die Karte in eine Timeline umwandeln, bei der die Fälle von 1988 bis 2018 auf der x-Achse in drei Jahresschritten zu sehen sind. Die Höhe des hinteren Strichs ist hierbei die Anzahl der Fälle und die Höhe des vorderen Strichs die jeweilige Aufklärungsquote. Durch einen Filter am linken Rand lassen sich verschiedene Straftaten vergleichen. Dabei sind die linken Striche in Lila immer die Hauptstraftat „Vergewaltigung“ und die jeweils rechten Striche die zu vergleichende Straftat.

Fälle | Vergleich

Code

Bei der Ansicht „Fälle-Vergleich” wurde mithilfe der gmynd-Library wurden bestimmte Parameter als auch die maximal Werte herausgefiltert und mit der Hilfsfunktion createLine erzeugt. Die Labels werden darunter durch ein Mouseover kreiert.


Screen Opfer | Alter & Geschlecht

Leitfrage: Welches Geschlecht ist häufiger Opfer dieser Gewalttat geworden? In welchem Alter befanden sich die Opfer?

Varianten Alter & Geschlecht

Dabei kamen dann diese beiden Screens heraus. Der erste Screen sortiert die Opfer in fünf verschiedene Altersgruppen. Dabei wird das Geschlecht anhand der Farbe festgemacht. Ob ein Fall vollendet oder versucht ist, ist daran erkennbar, ob die Form ausgefüllt ist oder nur aus einer Linie besteht. Beim Geschlecht dasselbe in Grün nur anders sortiert.

Opfer | Alter & Geschlecht

Code

Die createSpiral wird oben im Code mithilfe einer Hilfsfunktion erzeugt und an den passenden stellen kann darauf zugegriffen werden.

Dabei wurden die verschiedenen Alters-/ und Geschlechtergruppierungen in Gruppen sortiert und in einer Vorschleife nach verschiedenen Faktoren gefiltert. Die gefilterten Elemente werden in neue Gruppen geladen, welchen Label und Klassen zugeordnet werden, um diese einzeln ansprechen zu können.


Screen Opfer | Herkunft

Leitfrage: Aus welchem Land kommen die in Deutschland vergewaltigten Opfer?

Bei diesem Screen, war von Anfang an klar, dass ich diesen mit einer Weltkarte visualisieren werde. Hierbei wird die Herkunft der in Deutschland lebenden Opfer grafisch aufgezeigt. Da die meisten Opfer deutscher Herkunft sind, würden die darunter liegenden Länder verdeckt werden, weswegen ich mich für eine Transparenz der Punkte entschieden habe.

Opfer | Herkunft

Screen Opfer | Beziehung

Leitfrage: In welchem Verhältnis stehen die Opfer zu den Tatverdächtigen?

Varianten Beziehungen

Letztendlich entschied ich mich für diese Art der Visualisierung. Dabei stellt jeder Kreis eine andere Beziehungsform dar. Die Größe des Kreises ist dabei die Prozentangabe. Je gelblicher das Grün des Kreises ist, desto familiärer ist die Beziehung zwischen Opfer und Tatverdächtigen. Die ins Grau und Blau tendierende Grüntöne stellen weniger nahestehende bis hin zu keiner oder einer ungeklärten Beziehung dar.

Opfer | Beziehung

Die Screens „Alter” und „Geschlecht” sind bei dem Menüpunkt „Tatverdächtige“ genau gleich visualisiert, weshalb ich darauf nicht näher eingehen werde. Die Visualisierung des Beziehungsscreens ist ebenfalls bei den Tatverdächtigen vorhanden, stellt hierbei jedoch verschiedene andere Angaben dar, wie z. B. ob sich der Tatverdächtige zum Zeitpunkt der Tat unter Drogeneinfluss befand, er eine Schusswaffe mit sich trug, er zum Zeitpunkt der Tat unter Alkoholeinfluss stand oder auch, ob er bereits zuvor als Tatverdächtiger in Erscheinung getreten ist.

Styleguide

Farben

Für den Hintergrund wählte ich die Farbe Schwarz, um die Ernsthaftigkeit und Gesamtstimmung des Themas widerzuspiegeln.

Das Überkapitel Fälle baut sich aus Lilatönen auf. Dabei wird die Bevölkerung durch ein dunkles unauffälliges Lila codiert, um nicht zu stark in den Vordergrund zu treten. Die Fälle erhalten ein vergrautes Lila, um das düstere rüberzubringen und im Gegensatz dazu die Aufklärungsquote, welche durch das helle Lila herausstechen und Positivität rüberbringen soll. Aber warum Lila? Lila steht für Leid, Trauer und psychische Kraft, was eine sehr passende Assoziation für dieses Thema darstellt.

Beim Vergleich mit den anderen Straftaten wählte ich 2 stark vergraute Lilatöne, um im Farbschema zu bleiben, aber diese trotzdem von den Hauptstraftaten unterscheiden zu können.

Die Hauptseite der Opfer hält sich im grünen Farbschema, da Grün für Hoffnung, kraftvolle Ruhe, Optimismus und in einigen Kulturen auch für Unabhängigkeit steht. Dabei werden männliche Opfer durch ein dunkleres Grün und weibliche durch ein helleres, gelbliches Grün gekennzeichnet.

Die Beziehungen werden auch bei familiären Beziehungen durch gelbstichige Grüntöne gekennzeichnet und die ungeklärten, nicht so nahestehenden durch vergraute Grüntöne.

Für die Tatverdächtigen wählte ich Grauabstufungen, da man mit Grau Kälte, Gefühllosigkeit, Grausamkeit und Elend assoziieren kann. Dabei steht der hellere Ton ebenfalls für die weiblichen Tatverdächtigen und der dunklere für die männlichen Tatverdächtigen. Diesmal sind die Grauabstufungen für die bereits erwähnten Zusatzinformationen der Tatverdächtigen.

Farbgebung

Typografie

Für die Typografie wählte ich die Schrift “Poppins” in den Schriftgrößen 10, 13, 20pt. Diese Schrift wählte ich aufgrund ihrer einfachen, sauberen und visuellen Eleganz. Außerdem baut sie auf den geometrischen Grundformen auf, was ich aufgrund der reinen Verwendung von Kreisen in meiner Datengrafik sehr passend fand.

Typografie
Interaktion

Um den Betrachter*innen mehr Informationen über die Daten zu übermitteln, welche sich hinter den Punkten verbergen, erscheint bei einem Mouseover ein Label. Dieses Label befindet sich auf allen Screens in der linken unteren Ecke des Bildschirms.

Code

Das Besondere im Code von “Vergewaltigungen in Deutschland 2018” ist, dass das Menü in einer extra menü.js ausgelagert ist.

Alles, was mit dem Menü passiert, geschieht nur noch in der main.js.

In der menü.js wird das Menü statisch definiert und aufgezeigt, wie diese aufgebaut ist. Also Stufenweise vom Hauptmenü zum Submenü und den Filtern. Dabei bestimmt das Label was man sehen soll und der Initial ist der Default, der bestimmt welche Seiten angezeigt werden, wenn noch nichts angeklickt ist.

Darunter werden dann verschiedene Funktionen definiert, wie z. B. die updateMenü-Function, welche das Menü aktualisiert, sobald man auf einen Menüpunkt klickt, damit immer die richtige Seite selektiert ist.

Meine API (Application Programming Interface) ist dann meine Schnittstelle zwischen der menü.js und der main.js, um das Menü von außen zu initiieren.

Wenn man also auf einen Menüpunkt klickt, ruft dieser die passende Methode aus der main.js auf, welche den Zustand anzeigen soll.

In unseren showMethoden werden dann nur noch die Sachen angezeigt, welche zu diesem Fall dazugehören.

Die main.js ist so aufgebaut, dass ich ganz oben mein externes Menü sowie die data.js importiere. Darunter werden dann die Doms kreiert, wie z.B. meine stage in der alles gezeichnet wird.

Nun werden verschieden ausgelagerte Hilfsfunktionen wie die createSpiral, createCircle sowie createLine erzeugt, die später in den einzelnen Funktionen verwendet werden.

Das Grundprinzip des Codes besteht darin, dass es drei Überfunktionen für das Hauptmenü gibt, in den dann alle weiteren Funktionen für das Submenü sowie die Filter enthalten sind.

Durch die Funktion createViewElements am Anfang werden die drei Hauptfunktionen unsichtbar geladen.

Die Detailseiten bekommen alle spezifische Klassen wodurch man definieren kann, was angezeigt wird und wie man diese einzeln ansprechen kann. Das heißt es werden ganz viele Klassen eingeführt und alle Elemente, die zusammen in die Seite gehören werden dann zu einem Zeitpunkt in die Dom eingebaut und mithilfe der showView Methoden unten im Code ein-/ und ausgeblendet. Das Ausblenden aller Funktionen wird über die Funktion disableAll gemacht.

Ganz unten im Code wird die createViwElements aufgerufen, um alle Elemente zu kreieren.

Zum Schluss werden dann noch alle aus dem Menü aufgerufenen Ansichtsmethoden in die API eingefügt.