Skip to main content
100%

Fork of Svelte Starter: Timeline

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

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.

AI-generated description

Timeline Visualization

An interactive dual-perspective timeline component built with Svelte.

Features

  • Dual-column timeline layout (left/right perspectives)
  • Click to expand/collapse events
  • Responsive design for mobile and desktop
  • Smooth animations and transitions

Getting Started

MIT Licensed

Similar vizzes

Loading thumbnail…

Svelte Starter: Timeline

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.

Hhelen.bielawa@web.de
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
84% 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
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
73% match
Loading thumbnail…

Fork of Timeline Chart

This example displays a timeline chart that visualizes device activity periods, distinguishing between running and stoppage states through colored horizontal bars. The visualization uses React components with D3 v5 scales, including `scaleBand` for the y-axis categories and `scaleTime` for the x-axis time domain. SVG rectangles render the data intervals, with hover tooltips showing the exact start and end times. The chart includes a color scale that maps device states to blue and red, while the axis components handle tick generation and label truncation for longer device names.

Rrobinlecouteur
73% match
Loading thumbnail…

Fork of Fork of Fork of Svelte + D3 Starter

This example demonstrates a fork of a Svelte and D3 starter template, showcasing a data visualization built with the D3 library. It renders a visualization using a force simulation, likely displaying a network or hierarchical structure, as indicated by the use of `d3.forceSimulation`. The code imports an App component from Svelte and mounts it to a container element, while the package configuration loads D3 globally from a CDN path. The visualization’s data source is not specified, but the rendering approach relies on D3’s layout and drawing capabilities within a Svelte component, emphasizing reusable, component-based interactive charts.

Rreddysushma994@gmail.com
73% match
Loading thumbnail…

Fork of Svelte + D3 Starter

Four thin vertical bars mark the positions of four data points along a pink horizontal strip, with each bar placed by a linear scale mapping the domain 1–10 to the width of the SVG. The visualization uses D3’s `scaleLinear` inside a Svelte component to compute x-coordinates, while the bars themselves are simple SVG `<rect>` elements with low opacity and white fill. The data is a static array of numeric values, and the chart demonstrates a minimal integration of D3 scales with Svelte’s template syntax and reactive declarations.

LLuisa Vasquez
72% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Svelte + D3 Starter

This example visualizes a dynamic network of colored nodes connected by lines, with the layout evolving over time through physical simulation. The nodes drift and settle as forces repel them apart while links pull connected pairs together, creating an organic, clustered structure. Built with Svelte and D3, the code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, while rendering each frame directly to the DOM through Svelte’s reactive updates. The dataset is generated procedurally with random nodes and edges, demonstrating a lightweight, interactive graph visualization.

Rreddysushma994@gmail.com
71% match