Skip to main content
SimilarExport ZIP
100%

Fork of Fork of React & D3 Starter

✓ Published0🌍 Public
Kkilian.hocke@axelspringer.com
Last edited Apr 16, 2026
Created on Apr 16, 2026

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.

AI-generated description

Bayern vs. Real Madrid - Timeline

Eine interaktive Timeline der wichtigsten Events aus dem Champions League Viertelfinale Rückspiel zwischen Bayern München und Real Madrid.

Erforderliche Bilddateien

Bitte lege folgende Bilddateien im Hauptordner ab:

  • Bayern.jpg - FC Bayern München Logo
  • Madrid.jpg - Real Madrid Logo
  • Gueler.jpg - Arda Güler
  • Pavlovic.jpg - Aleksandar Pavlovic
  • Kane.jpg - Harry Kane
  • Mbappe.jpg - Kylian Mbappé
  • Diaz.jpg - Luis Díaz
  • Olise.jpg - Michael Olise
  • Camavinga.jpg - Eduardo Camavinga

Verwendung

Öffne einfach index.html im Browser. Die Timeline wird automatisch geladen und die Spielerbilder werden beim Hovern über die Event-Karten angezeigt.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

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
71% 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
71% 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
70% 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 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
69% 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
69% match
Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a React and D3 starter template that integrates decoupled React and D3 patterns, using industry-standard ES modules and JSX for scalable project complexity. The visualization renders axes via `d3.axisLeft` and `d3.axisBottom`, with scales applied from a main App component that passes dimensions and margins as props. The chart is drawn to a DOM element using React’s `ReactDOM.render`, while D3 handles the SVG axis updates. The setup is designed for copy-paste into existing projects, showing a clean separation between React’s state management and D3’s imperative rendering.

JJasvitha Allamsetty
67% match