Mia san mia

100%

✓ Published0🌍 Public

Last edited Apr 16, 2026

Created on Apr 16, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

74% match

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

73% 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

72% 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

65% match

Loading thumbnail…

Timeline

This example presents an interactive timeline visualization of temporal data, showing the start and end times for multiple entities (such as people) as horizontal bars. Users can zoom and navigate through the time range using provided controls. The visualization is built with D3.js v5, using SVG for rendering and the `scaleTime` and `scaleOrdinal` APIs for time scaling and color assignment. A dropdown menu, created with a custom D3 component, allows users to filter data, while the timeline supports stacked rows and time axis navigation.

Iianleekq

64% 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

64% 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

63% 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

62% match