SCHACHMUSTER – Interaktive Lichess-Datengrafik

Datensatz

Die Grundlage der Visualisierung bildet der Chess Game Dataset – Extended Notation von Kaggle (https://www.kaggle.com/datasets/bohnacker/chess-game-dataset-lichess-extended). Er umfasst rund 20.000 Online-Schachpartien, die auf der Plattform Lichess gespielt wurden. Der Datensatz enthält ausführliche Notationen und bietet eine solide Basis zur Analyse typischer Eröffnungszüge.

Der Datensatz umfasst 17 Spalten und rund 20.000 Zeilen. Neben den vollständigen Zugfolgen in erweiterter Notation enthält er auch Metadaten wie Spieler-ELO, Spieltyp, Ergebnis und Datum.

Die Entscheidung für diesen Datensatz fiel mir leicht, da ich selbst aktiver Schachspieler bin. Zwar hatte ich zunächst auch andere Datensätze in Betracht gezogen – etwa zu Meteoriten-Einschlagsorten – doch letztlich habe ich mich für Schach entschieden. Der große Vorteil: Ich kenne mich mit dem Spiel aus, verstehe die Notation und kann die Logik hinter Schachpartien gut nachvollziehen. Dadurch war es mir möglich, die Daten nicht nur technisch, sondern auch inhaltlich richtig zu interpretieren und sinnvoll zu visualisieren.

Konzeptionsphase

Im Rahmen der Konzeptionsphase wurden verschiedene Varianten und Ideen entwickelt, um die komplexen Daten des Schachprojekts anschaulich und verständlich darzustellen. Dabei wurden unterschiedliche Visualisierungsansätze geprüft und ihre Vor- und Nachteile abgewogen. Ziel war es, eine intuitive und zugleich informative Darstellung zu finden, die sowohl die Struktur der Eröffnungen als auch deren Zusammenhänge gut vermittelt. Die Konzeption diente als wichtige Grundlage für die spätere Umsetzung und half, den Fokus auf relevante Aspekte der Daten zu legen.
Heatmapansatz

Variantenbildung

Style Guide

Das Design des Projekts basiert auf klaren, geometrischen Formen und einer reduzierten, funktionalen Ästhetik. Als zentrales Element dient das Quadrat – abgeleitet vom Schachbrett – mit leicht abgerundeten Ecken, die dem Interface eine ruhige und zugängliche Wirkung verleihen. Die Farbgestaltung folgt einem durchdachten System: Pastellige Töne in Blau, Gelb und Rot differenzieren zwischen Spielerfarben und Schlagzügen, während ein dunkler Hintergrund für Kontrast und Fokus sorgt. Die Schriftwahl fiel auf Inter in den Schnitten Bold, Regular und Light, um das rationale, datenbasierte Wesen des Projekts zu unterstreichen. Auch die Buttons greifen die Kastenform auf, sind jedoch zurückhaltend gestaltet und bieten durch dezente Hovereffekte visuelles Feedback. Insgesamt verbindet das Design Klarheit, Lesbarkeit und eine visuelle Sprache, die zum Charakter des Schachspiels passt.

Styling

Ergebnis

Das Endergebnis zeigt eine klar strukturierte Web‑App: In der Mitte dominiert die interaktive Heatmap, oben links sitzt die Überschrift, oben rechts eine Navigationsleiste. Zu Beginn visualisiert die Heatmap (blau = Weiß, gelb = Schwarz) die Häufigkeit aller ersten Züge; Hover hebt Feld + Datenkästchen weiß hervor und blendet eine Statistikinfobox ein. Ein Klick auf ein Feld lädt die möglichen Folgezüge (2., 3. usw.); der bisherige Zugpfad wird stets oberhalb des Bretts angezeigt, während „Zurück“‑ und „Zurücksetzen“‑Buttons stufenweises Rück­ oder Komplett‑Reset erlauben. Über den „Schlagzüge“‑Button wechselt man in einen zweiten Modus, der rote Datenkästchen für alle Schlagzüge zeigt; zusätzliche Figurfilter‑Buttons (B, L, S, T, D, K) ermöglichen dort Analysen nach Figurtypen. So verbindet die Anwendung eine aufgeräumte Bildschirmaufteilung mit intuitiver, klick‑basierter Exploration typischer Eröffnungen und Schlagzugmuster.