Verkaufszahlen Videospiele 1980-2015

In dieser Dokumentation wird beschrieben, wie eine interaktive Visualisierung der weltweiten Verkaufszahlen von Videospielen für die Jahre 1980 bis 2015 entwickelt wurde. Ziel war es, eine verständliche und übersichtliche Darstellung zu erstellen, die es ermöglicht, Verkaufszahlen pro Jahr und nach Regionen aufzuschlüsseln. Zudem gibt es eine Funktion, mit der man gezielt nach bestimmten Genres filtern kann.

Projektstruktur

Das Projekt besteht aus drei Hauptdateien:
index.html: Enthält die grundlegende Struktur der Webseite.
styles.css: Bestimmt das Layout und Design der Visualisierung.
script.js: Enthält die komplette Logik zur Datenverarbeitung und Interaktivität.
Zusätzlich gibt es eine csvjson.json Datei mit den Verkaufsdaten.

Datenquelle und Bereinigung

Die Verkaufszahlen stammen aus einer JSON-Datei. Da nicht alle Daten relevant oder korrekt formatiert waren, wurden folgende Schritte durchgeführt:
Entfernen ungültiger oder unvollständiger Einträge
Herausfiltern der Jahre 2016 und 2017, da die Daten erst Oktober 2016 aufgenommen wurden.

Aufbau der Visualisierung

Die Hauptkomponente der Darstellung ist ein Balkendiagramm mit folgenden Elementen:
Balken: Stellt die Gesamtverkäufe eines Jahres dar und zeigt durch Farbcodierung den Anteil nach Regionen.
Legende: Erklärt die Farbzuordnung der Regionen.
Tooltip: Zeigt genauere Informationen beim Überfahren eines Balkens mit der Maus.

Interaktive Funktionen

Die Nutzer können die Visualisierung auf verschiedene Weise steuern:
Filtern nach Genre: Es gibt eine Auswahlmöglichkeit, um sich nur bestimmte Genres anzeigen zu lassen.
Hover-Effekt: Beim Überfahren eines Balkens werden genauere Verkaufszahlen für die Regionen sichtbar.
Balken anklicken: Man kann einzelne Balken hervorheben, um sie besser vergleichen zu können.

Entscheidung für das Balkendiagramm

Anfangs wurden auch Bubble Charts, Treemaps und Scatterplots getestet. Diese waren visuell interessant, aber weniger intuitiv für den Vergleich von Verkaufszahlen über die Jahre. Daher fiel die Wahl auf das Balkendiagramm, da es eine klare und leicht verständliche Darstellung der Verkaufszahlen über die Jahre hinweg ermöglicht. Der strukturierte Aufbau erlaubt es, sowohl den Gesamttrend als auch regionale Unterschiede auf einen Blick zu erkennen. Zudem lassen sich interaktive Funktionen wie das Filtern nach Genres oder das Hervorheben einzelner Balken einfach integrieren.

Designentscheidungen

Farbschema: Die Wahl fiel auf eine Kombination aus Lilatönen auf schwarzem Hintergrund. Die dunkle Basis sorgt für eine angenehme Darstellung, während die leuchtenden Lila-Akzente die wichtigsten Elemente hervorheben und die Lesbarkeit verbessern.
Layout: Die Balkendiagramme sind rechtsbündig, während das Menü für Filter links platziert wurde.
Schriftart: Eine schlichte und gut lesbare Schrift wurde verwendet.

Herausforderungen und Lösungen

Performance-Optimierung: Um die Ladezeit zu verkürzen, wurde darauf geachtet, möglichst wenige Elemente zu rendern.
Tooltips bei Hover: Die Positionierung wurde so programmiert, dass sich die Tooltip-Anzeige nicht überlappt.
Drag-and-Drop Verhalten: Es wurde getestet, dass die Balken korrekt interagieren und sich nicht überlagern.

Fazit

Die entwickelte Visualisierung bietet eine einfache Möglichkeit, sich durch die Verkaufszahlen großer Titel zu klicken und die Entwicklung über die Jahre hinweg nachzuvollziehen. Die Filteroptionen machen es leicht, gezielt nach Genres zu suchen und Unterschiede zwischen den Regionen zu erkennen.