Skip to main content
SimilarExport ZIP
100%

timeline chart with zoom

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jun 14, 2019
Created on Jun 14, 2019

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.

AI-generated description

timeline chart with zoom

require:

  • D3.js v4
  • coffeescript

by TBD | @tbdr

forked from <a href='http://bl.ocks.org/TBD/'>TBD</a>'s block: <a href='http://bl.ocks.org/TBD/600b23e56545026ae6fda2905efa42ce'>timeline chart with zoom</a>

mit Licensed

Similar vizzes

Loading thumbnail…

timeline chart with zoom

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`.

TTBD
93% 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
76% 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
76% 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
74% 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
73% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
71% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
71% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
71% match