Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

✓ Published1🌍 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
  • Lokale Spielerbilder - Einfaches Ersetzen von Platzhaltern mit eigenen Bildern

Technologie

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

Projektstruktur

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Starter

An interactive timeline visualizes key match events from the Champions League quarter-final second leg between Bayern Munich and Real Madrid, showing goals, halftime, and the final result. The Vue application renders event cards on a central time axis, using custom JavaScript classes to handle event rendering and player image display. It draws on local PNG resources for team logos and player photos, respectively. The implementation leverages core DOM APIs for dynamic element creation, CSS Grid for layout, and audio playback for goal sounds.

Kkilian.hocke@axelspringer.com
94% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays bar charts for Champions League team statistics, comparing goals, matches played, and wins. It employs a group bar chart where each team’s metrics are shown side-by-side in steelblue, orange, and green bars. The D3.js library (v7) is used for data parsing, aggregation, and rendering to SVG, with scales and axes built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The data is fetched from a CSV URL and aggregated via `d3.rollup`. The SVG renders bars, axes, and a legend within an 800x600 canvas.

66264kusuma@gmail.com
72% match
Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This interactive dashboard visualizes football player performance across European leagues, showing how metrics like goals, shots, and expected goals vary by league and season. It integrates a scatter plot, bar chart, line chart, and parallel coordinates plot, all driven by React state management. Users can filter data through dropdown menus, brush the parallel coordinates to filter players, and hover over marks for details. The visualization leverages D3’s `scaleLinear`, `scalePoint`, `brushY`, and `transition` APIs, rendering animated updates from a Kaggle dataset of top league scorers.

AAamir Hameed mir
72% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA
71% match
Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This fork of the Football Goal Scorers Dashboard visualizes player performance over time as an animated line chart. It uses D3.js to render a multi-line chart, filtering the dataset to show only players with five or more recorded seasons. The chart plots goals, shots, and other metrics against the year, with an interactive dropdown menu to switch the y-axis metric. It utilizes D3's `scaleTime` and `scaleLinear` for axes, `flatGroup` to organize data by player, and transitions to animate changes. The data comes from the Kaggle Top Football Leagues Scorers dataset.

Eeschuman20@gmail.com
70% match
Loading thumbnail…

Fork of Football Goal Scorers Dashboard

This dashboard visualizes football player statistics from the Kaggle "Top Football League Scorers" dataset, showing how metrics like shots, goals, and expected goals evolve. The view combines a line chart tracking individual players’ performance over time with an interactive dropdown menu to switch between statistical measures. Built with React and D3, the implementation uses `scaleTime`, `scaleLinear`, and `flatGroup` to structure the data, while `line` generators and D3's `transition` system animate hover effects and emphasis on the plotted paths.

Eeschuman20@gmail.com
70% match
Loading thumbnail…

Fork of React + D3 Viz Starter

A timeline chart displays dated events with circular markers, bold titles above and descriptions below a centered time axis. The example plots policy accomplishments using D3 v6 scales and axes, with React 16 components managing the SVG container and margin layout. Data flows from a static JavaScript array through `TimelineChart`, which calls the `Timeline` visualization function to render circles, labels, and the bottom axis via `d3.axisBottom`. A reusable `VizContainer` component wraps the SVG group, optionally showing margin guides via a `showMargins` prop.

NNita
70% match
Loading thumbnail…

Fork of HTML Starter, Hello World

This interactive visualization displays the text “Bayern Bonus” as a glowing, glassmorphic title on a dark radial-gradient background. The code uses plain DOM and CSS animations, with JavaScript event listeners responding to mouse movement and clicks, triggering particle bursts via dynamically created elements. Clicking the button cycles through slogans and button texts, while the text element can trigger a pulse or shake animation. No external libraries are used; rendering relies entirely on native CSS keyframes and JavaScript `getElementById` queries.

Mmarkus.pfander@axelspringer.com
69% match