kilian.hocke@axelspringer.com

@kilianor·5 public vizzes

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.

Apr 16, 2026

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.

Apr 16, 2026

Loading thumbnail…

Mia san mia

This timeline visualization compares two project perspectives side-by-side along a shared chronological axis, with red events on the left and blue events on the right. The central vertical line acts as a time scale, and the fixed buttons toggle the active story, highlighting corresponding events. Implemented in Svelte, it uses D3’s `scaleTime` to map dates to pixel positions, and each event reveals its title and description when clicked. The layout adapts responsively, with event points colored and styled to distinguish the two narratives.

Apr 16, 2026

Loading thumbnail…

Putin 2

A playful interactive page displays a portrait of Vladimir Putin, rendered twice as static images. A button toggles between the two images. However, this is a React and D3.js starter template: the page is built using HTML, CSS, and vanilla JavaScript, not the React component. The React component uses D3's `select` method to set text on a div, while the vanilla script uses `classList.toggle` to change colors and swaps the image source. The images are included as base64 data.

Apr 16, 2026

Loading thumbnail…

Copy (Fork of HTML Starter, Hello World)

A Vue-based HTML starter fork displays a portrait of Vladimir Putin alongside Russian phrases "Privet mir" and "spasibo." A red button labeled "Änderen Sie hier die Farbe" toggles a CSS class on click, turning both the message text and button pink via `classList.toggle`. The interaction uses vanilla JavaScript within an HTML file, with styling handled through embedded CSS transitions.

Apr 16, 2026