timeline chart with zoom

100%

timeline chart with zoom

✓ Published0🌍 Public

Last edited May 15, 2017

Created on May 13, 2017

This example displays a timeline of 15 randomly generated vehicle intervals, with each row rendered as a colored horizontal bar spanning its start and end dates. The chart supports zooming and panning through a D3 v4 zoom behavior applied to an overlay rectangle, which rescales a time scale and updates all bars and the axis accordingly. Tooltips show raw date details on hover. The layout is built with SVG, nested data via `d3.nest`, and a bottom axis using `d3.axisBottom`, while the zoom transformation is applied using `transform.rescaleX`.

AI-generated description

timeline chart with zoom

require:

D3.js v4
coffeescript

by TBD | @tbdr

mit Licensed

Similar vizzes

Loading thumbnail…

timeline chart with zoom

This timeline chart displays 15 vehicle intervals from their start to end dates, with each vehicle assigned to its own horizontal SVG band. The visualization uses D3v4’s time scale, axis, nesting, and zoom behavior, which is applied to a full-page overlay rect; panning and zooming rescale the x-axis and updates each band’s rectangle positions and widths via the zoom transform. Data is generated randomly in `data.js`, and the tooltip shows the raw date strings on hover.

TThanaporn-sk

93% match

Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

CClaudioTM

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

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

75% match

Loading thumbnail…

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

This example visualizes a timeline with stacked horizontal bars representing different stages of a process, such as waiting, vital checks, and doctor visits, with each segment color-coded and labeled by duration. The D3.js V3 timeline plugin renders the data as SVG rectangles on a time axis with 15-minute tick intervals and supports interactive navigation through chevron controls. The visualization uses `d3.time.format` for tick labeling and accepts data in a structured format with starting and ending times, demonstrating how to build a customizable, event-based timeline with D3.

Vvillagef

75% match

Loading thumbnail…

Timeline Chart

This timeline chart visualizes device activity intervals, showing periods labeled as "running" or "stoppage" across multiple test devices. Rendered as SVG rectangles with D3 v5 scales (scaleTime, scaleBand, scaleOrdinal) and React components, each bar spans its start and end dates on a time axis. Hovering reveals tooltips with the formatted time range. The color scale distinguishes the two activity categories, while axis components handle tick labels and gridlines. The data originates from a static array of device states.

RRajat Dangat

75% match

Loading thumbnail…

timeline

This visualization displays a timeline of asset locations and transit periods across a multi-day period, with each row representing a different asset (such as "MJ", "Raj", or "Mahesh Car"). The code uses D3.js version 4, rendering SVG rectangles whose horizontal positions and widths correspond to entry and exit times via `d3.scaleTime()`. Vertical placement is determined by a series number, with larger, semi-transparent rectangles for location dwell times and smaller, opaque pink bars for transit intervals. Zone-level stops are also included, shown in distinct colors, and the data is loaded from external JSON files using `d3.json()`.

TThanaporn-sk

74% match

Loading thumbnail…

Zoom offset bug when resizing window

This block demonstrates a zoom-offset bug in a D3 v4 timeline chart with a time scale x-axis and a band scale y-axis. The SVG chart fills the window width, using `d3.scaleTime` and `d3.scaleBand` with `d3.zoom` for panning and zooming. On window resize, the x-axis range recalculates, causing the zoom transform to drift from the mouse cursor. The static data consists of two hardcoded date ranges rendered as rectangle bars.

NNJRBailey

74% match