letstryd3

letstryd3

This example visualizes a historical dataset of individuals’ birth and death dates as an interactive timeline. It renders circles for each person along a horizontal time axis, with a filtered subset highlighted in a different color. The visualization uses D3 v7 to create SVG elements, including year markers and draggable controller points that adjust the selected range. It incorporates custom curve logic for smooth path interpolation and applies color coding to distinguish between the full dataset and the currently selected time window.

91% match

HTML Starter

This example shows a minimal timeline of four dates using D3.js, rendered as small circles positioned along an SVG line. The visualization uses `d3.scaleTime` to map the date domain to pixel coordinates, with each circle’s center placed via the `cx` attribute and labeled with its full date string. The code imports specific D3 modules (`select`, `scaleTime`, etc.) and appends both circles and text elements to an SVG wrapper. It relies on hardcoded data (four `Date` objects) rather than an external dataset, demonstrating a bare-bones setup for time-based scatter plots.

JJeffrey Mcintyre

76% match

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

74% match

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

73% match

continues1.js

This example visualizes a dataset of authors with their birth and death dates by mapping each person to a position along a continuous, interactive Bézier-like curve. The rendering shows orange circles placed along a red skeleton curve, demonstrating a custom curve-subdivision algorithm. The code implements the visualization using D3 v3 for SVG rendering and data loading from a TSV file, while a custom `SDCurve` class defines the curve geometry with adjustable resolution and degree. Users can interact with the curve through mouse events, including dragging and double-clicking.

timeline-line

A timeline visualization of historical women writers uses a red spline curve to map birth dates from a TSV dataset. The curve, implemented with the custom `SDCurve` class, positions each author as a circle along the line. Two additional lens curves, also red, sit above and below the main timeline for structure. Built with React and rendered as SVG using d3.v3 APIs like `d3.svg.line()`, the visualization reads birth dates via `d3.tsv()` and sorts them chronologically to create the linear progression.

kidingme.js Demo

This demo uses a B-spline curve generated with the SDCurve library to map the birth dates of notable historical women from a TSV dataset. Each person is represented as a small orange circle positioned along the curve, with the data sorted chronologically by birth date. The visualization supports interactive dragging of the curve’s control points in SVG, allowing users to reshape the curve and see how the circle placement updates in real time. The demo is built with React, D3 v3 for SVG manipulation and event handling, and includes dynamic curve subdivision for smooth rendering.

Fork of D3-timeline in D3.js V3 ref from (jiahuang)

A fork of jiahuang's d3-timeline, this example demonstrates a stacked, interactive timeline built with D3.js v3 and rendered as SVG. The chart visualizes labeled time intervals for patient statuses like "Waiting," "Vital," and "Doctor," with each segment colored and optionally labeled, and an accompanying legend. The code creates the timeline via `d3.timeline()` with stacked item rows, custom tick formatting using `d3.time.format`, and margins. SVG elements are appended manually for the legend, while the timeline itself handles axis and row rendering through its internal API.

JJason