Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Svelte Starter: Timeline

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

9675529659d64a2291ad1eda86d5e703

Open

Svelte Starter: Timeline

0 stars6🌍 Public
Hhelen.bielawa@web.de
Last edited Apr 12, 2026
Created on Apr 10, 2026

A vertical timeline visualization presents two parallel event sequences, shown on the left and right sides of a central axis. Each event appears as a colored dot that expands into a card with a date, title, and description when clicked. Users can toggle between the two perspectives using the fixed buttons at the top. The layout uses a d3 time scale to position events proportionally, with Svelte managing the interactive state and component rendering.

AI-generated description

Vertikale Timeline mit Scroll-Animation

Ein interaktives Visualisierungsprojekt, das eine vertikale Timeline mit folgenden Features zeigt:

Features

  • Vertikale Scroll-Timeline: Lange Timeline zum Herunterscrollen
  • Jahreswechsel-Marker: Dünne Linien markieren den Jahreswechsel
  • Event-Punkte: Kreispunkte markieren einzelne Events
  • Expand/Collapse Animation: Events expandieren beim Scrollen in den Viewport
  • Smooth Transitions: Sanfte CSS-Animationen mit Cubic-Bezier Easing
  • Responsive Design: Funktioniert auf Desktop und Mobile
  • Intersection Observer: Effiziente Performance durch natives Browser API

Verwendete Technologien

  • Svelte für reaktive UI-Komponenten
  • Intersection Observer API für Visibility Detection
  • CSS Transitions für Animationen
  • D3.js (optional für weitere Visualisierungen)

Struktur

  • store.js: Beispiel-Timelinedaten
  • Chart.svelte: Haupt-Container und Koordinator
  • TimelineEvent.svelte: Individuelle Event-Komponenten
  • YearMarker.svelte: Jahreswechsel-Marker
  • App.svelte: Root-Komponente