Social Anxiety

Datensatz

Für meine Datenvisualisierung zum Thema Social Anxiety habe ich einen öffentlich zugänglichen Datensatz von Kaggle verwendet. Er enthält über 11 000 Einträge mit verschiedenen Variablen wie Alter, Geschlecht, Beruf, Stresslevel und Angstsymptomatik. Ich habe mich auf vier zentrale Variablen konzentriert: Anxiety Level, Stress Level, Alter und Geschlecht. Diese Auswahl ermöglicht vergleichbare und zielgerichtete Auswertungen, ohne die Darstellung zu überladen.

Skizzenphase

In der Recherchephase habe ich visuelle Darstellungen zu sozialer Angst untersucht. Häufig tauchten Motive wie der Gedankenknoten auf. Dabei fiel mir auf, dass in vielen Darstellungen der Mensch selbst im Mittelpunkt steht. Das griff ich in meinen ersten Skizzen auf. Ich platzierte eine abstrahierte Figur zentral und ordnete Einflussfaktoren um sie herum an. Diese Phase half mir dabei, ein Gefühl für die Gewichtung und Wirkung der Daten zu entwickeln.

Digitale Skizzen

Anschließend überführte ich meine Ideen in digitale Skizzen. Zunächst arbeitete ich mit radialen Darstellungen, um Altersgruppen, Geschlecht und Anxiety Level visuell zu strukturieren. Mit den realen Werten zeigte sich jedoch schnell, dass sich viele Daten auf einem Punkt konzentrieren. Dadurch gingen Lesbarkeit und Differenzierung verloren. Aus diesem Grund entwickelte ich eine neue Skizze, in der die Daten in einem klaren Raster mit separaten Zellen dargestellt werden.

Umsetzung im Code

Nachdem das visuelle Konzept feststand, begann ich mit der Programmierung. Ich strukturierte die Daten zunächst so, dass sie pro Zelle im Raster richtig zugeordnet werden konnten. Dabei stellte ich fest, dass sich die Kreise in ihrer ursprünglichen Form nicht präzise innerhalb der Zellen platzieren ließen. Deshalb ersetzte ich sie durch Rechtecke, die besser stapelbar und optisch klarer einzuordnen sind. Die Rechtecke visualisieren die Häufigkeit bestimmter Anxiety Levels je Geschlecht und Altersgruppe.

Layout und Interaktion

Um die Darstellung interaktiv zu gestalten, ergänzte ich eine Hover-Funktion. Beim Überfahren eines Objekts mit der Maus wird die Sättigung erhöht und die zugehörigen Werte werden angezeigt. Außerdem lassen sich zwei Anzeigemodi aktivieren. Diese befinden sich oben im Interface. Der aktive Modus wird farblich hervorgehoben, der inaktive leicht ausgegraut. So bleibt die Navigation übersichtlich.

Styleguide

Für die visuelle Gestaltung definierte ich einen Styleguide. Anfangs verwendete ich eine klassische Farbskala von Blau bis Rot, wobei Blau für einen niedrigen und Rot für einen hohen Anxiety Level stand. Diese Darstellung erzeugte jedoch eine starke Assoziation mit Warnfarben, was den Eindruck verstärken kann, dass hohe Werte automatisch etwas Negatives oder Kritisches sind. Da es bei sozialen Ängsten aber nicht um Bewertung, sondern um Sichtbarmachung und Sensibilisierung geht, entschied ich mich bewusst gegen diese Farbskala. Stattdessen entwickelte ich mithilfe von chroma.js eine neue Skala, die sich weicher anfühlt. Die Farben sind weniger gesättigt und besitzen einen leichten Graustich. So wirkt die Darstellung neutraler. Zusätzlich wurden die Rechtecke leicht abgerundet, um den Gesamteindruck harmonischer zu gestalten. Der Hintergrund wurde ebenfalls angepasst. Statt reinem Schwarz verwende ich ein sehr dunkles Violett, das die Thematik unterstützt, ohne zu stark zu polarisieren.

Finale Datengrafik

In der finalen Visualisierung werden Anxiety Levels je nach Altersgruppe und Geschlecht in einer rasterbasierten Anordnung dargestellt. In einem zweiten Modus wird zusätzlich der Stresswert integriert. Durch klare Farbskalen, reduzierte Formen und eine strukturierte Gliederung gelingt eine differenzierte Darstellung ohne Überfrachtung.