Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React & D3 Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

fadb4284f3a843bc868288d1cfbf472b

Open

Fork of React & D3 Starter

0 stars1🌍 Public
Kkilian.hocke@axelspringer.com
Last edited Apr 16, 2026
Created on Apr 16, 2026
Forked from React & D3 Starter

This interactive timeline visualizes the key events of a Champions League match between Bayern Munich and Real Madrid. It presents a two-column layout with event cards positioned on the left or right side of a central axis, detailing goals and cards with timestamps, player names, and descriptions. The visualization is built with vanilla JavaScript, HTML5, and CSS3, using a `Player` class system to manage player data and images. Clicking on a Bayern goal triggers a sound effect via JavaScript, while the timeline structure and responsive design are implemented using a CSS Grid and Flexbox.

AI-generated description

Bayern vs. Real Madrid - Match Timeline

Eine interaktive Timeline der wichtigsten Spielereignisse aus dem Champions League Viertelfinal-Rückspiel zwischen Bayern München und Real Madrid vom 15. April 2026.

Features

  • Responsive Design - Funktioniert auf Desktop, Tablet und Mobile
  • Zwei-Säulen Timeline - Bayern-Events auf der linken, Real Madrid auf der rechten Seite
  • Interaktive Bayern-Tore - Klick auf Bayern-Tore für einen Sound-Effekt
  • Event-Kategorien - Tore, Karten und weitere Informationen

Technologie

  • HTML5
  • CSS3 (CSS Grid, Flexbox)
  • Vanilla JavaScript

Verwendung

  1. Die Datei goal-sound.wav in dasselbe Verzeichnis wie index.html legen.
  2. index.html im Browser öffnen.
  3. Auf ein Bayern-Tor in der Timeline klicken – der Sound wird abgespielt.

Keine weiteren Dependencies erforderlich.

Projektstruktur