Skip to main content
SimilarExport ZIP
100%

Fork of serbaiJ

✓ Published1🌍 Public
LLeanderBadura@gmx.de
Last edited Apr 16, 2026
Created on Apr 16, 2026
Forked from 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.

AI-generated description
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
84% match
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
76% match
Loading thumbnail…

serbaiJ

An interactive timeline visualizes the political crisis in Serbia following the Novi Sad canopy collapse. Two parallel narrative tracks, "Perspektive A" and "Perspektive B," present alternating events on a vertical axis. Users toggle a story to highlight its events or click individual points to reveal expanded details. Built with Svelte and D3.js, the visualization uses a custom `scaleTime` for date positioning and a scrollable interface with animated content transitions.

Jjakob.eckstein@axelspringer.com
75% 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
74% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This timeline visualization plots seven events from 2020 to 2026 along a linear time axis, with event names on the y-axis and categories shown as colored dots using D3’s `scaleLinear`, `scalePoint`, and `scaleOrdinal` APIs. The chart uses a configured `config.js` with sample event data rendered via `renderTimeline`, which calls `axisBottom`, `axisLeft`, and `renderLegend`. Hovering over legend items fades non-matching points and raises matching ones, driven by `setHoveredColorValue`. Point styling and colors follow IBM Plex Sans and Roboto typography with a BBC-inspired color theme.

GGabriel Dantas
72% match
Loading thumbnail…

Serbia

A vertical timeline of Serbia's political history from 2000 to 2013 presents two parallel storylines—democratization and civil society—on opposite sides of a central axis. Each event appears as a clickable dot; selecting one reveals its date, title, and description. The visualization uses Svelte components for layout and interaction, while `d3.scaleTime` maps event dates to vertical pixel positions. Two fixed buttons let viewers filter events by storyline, highlighting all matching entries along the shared timeline.

LLeanderBadura@gmx.de
70% match
Loading thumbnail…

Fork of HTML Starter

This interactive visualization depicts a chronological timeline of events from the June 2025 Gaza crisis, sourced from a CSV file of reported incidents. It combines an upper scrollable overview with a detailed lower timeline, using color-coded, clickable elements to explore event specifics like actors, descriptions, and impact. Built with D3.js v7, the visualization employs DOM manipulation and event handlers to assign lanes, manage tooltips, and synchronize selections between the two views, updating a details panel upon user interaction.

NNita
70% match
Loading thumbnail…

Fork of Fork of Fork of TP_dataviz only timeline

This example displays a horizontal timeline of an artist's albums, with each album represented by a circle positioned along a line according to its release date. The visualization uses a D3.js v4 SVG, with circle size mapped to the time span between the album's start and release date. Interacting with a circle by hovering enlarges it, while clicking it expands the circle to fill the chart, fades out other elements, and reveals a details panel. The data is fetched from the Wasabi API and rendered using D3's `select`, `scaleLinear`, and `append` methods.

BBaptisteJarry
69% match