Skip to main content
SimilarExport ZIP
100%

Svelte Starter: Timeline

✓ Published6🌍 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

Template, um anhand einer mittig platzierten, vertikalen Timeline einzelne Events zu erzählen. Es gibt zwei Event-Stränge (links und rechts), um beispielsweise dieselbe Geschichte aus 2 Perspektiven zu erzählen. Sie lassen sich zentral über die obigen Buttons aus- und einklappen. Einzelne Events lassen sich per Klick auf die Kreise ein- und ausklappen.

Struktur

  • store.js: Beispiel-Timelinedaten
  • Timeline.svelte: Haupt-Container und Koordinator
  • TimelineEvent.svelte: Individuelle Event-Komponenten
  • App.svelte: Root-Komponente
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Svelte Starter: Timeline

This interactive Svelte visualization displays a dual-perspective timeline, with events positioned along a central vertical line based on their dates using a custom time scale. Two color-coded columns (red for left, blue for right) represent different data series, and clicking the center point of an event expands its content card, while buttons at the top toggle all events from a given perspective. The component uses Svelte's reactive declarations and lifecycle functions to manage data sorting and rendering.

Ddaria.zakharova@axelspringer.com
91% match
Loading thumbnail…

Fork of serbaiJ

A dual-sided timeline compares two perspectives over the same period, with events plotted from two data arrays on either side of a central axis. Buttons toggled by the viewer highlight one perspective or the other, while clicking individual points reveals event details like title and description. The visualization uses a Svelte component structure with D3’s `scaleTime` for positioning, CSS animations for entry, and interactive state management to filter active events.

LLeanderBadura@gmx.de
76% match
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.

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

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Aannesmets
71% match
Loading thumbnail…

timelines

This example demonstrates a versatile D3 timeline component built with SVG, offering over a dozen variations including simple timelines, circular markers, stacked layouts, and interactive features like hover, click, and scroll events. The code implements a custom `d3.timeline` function that supports configurable axes, colors, labels, tick rotation, relative timepoints, backgrounds, and navigation controls. It uses D3 v3's time scales and formatting, along with jQuery for event handling, to render timelines with rectangles or circles as visual elements. The component also handles complex layouts with stacked rows, axis positioning, and color mapping from data.

IIan
70% match
Loading thumbnail…

Timeline with 2 streams and events

A hand-drawn style timeline plots education and work history as two horizontal streams on opposite sides of a central axis, with personal events marked as vertical dashes below. The SVG visualization uses D3.js for scales, axes, and data binding, while Rough.js renders the sketch-like aesthetic. Labels for each period identify employers and degrees, and event annotations include dates and short descriptions. The code defines data arrays for education, work, and events, mapping them to time-encoded positions along the x-axis.

PPatrick Wojda
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…

Timeline

This example shows a web page titled “Timeline” that displays the text “Hello HTML” in large, centered type, alongside a “Hello JavaScript!” message logged to the browser’s console. The page loads D3 v5 and Moment.js from CDNs, but the code does not yet implement any visualization or timeline functionality. It uses plain CSS for styling and JavaScript for console output, serving as a minimal scaffold for future data-driven timeline work. The React starter project is referenced as a related alternative.

Eetypeemos
70% match