Skip to main content
100%

Timelines Chart

✓ Published0🌍 Public
ZZhengYingqian
Last edited Jun 24, 2018
Created on Jun 24, 2018

This example visualizes multiple time-series grouped into six distinct sections, where each line is broken into colored segments. The color scale works in either continuous heatmap mode or categorical mode, with randomly generated data populating up to fifteen lines per group. Users can zoom by dragging or use the bottom timeline brush. Built with the `timelines-chart` D3 component, the visualization loads random data from `random-data.js` and configures categorical coloring via the `zQualitative(true)` method.

AI-generated description

A parallel timelines layout (swimlanes) for representing state of time-series over time. Using the timelines-chart D3 component.

Each timeline segment can be assigned a value from a color scale, either continuous (heatmap mode) or ordinal (for categorical representation). Time-series can be grouped into logical groups, represented as distinct sections. Explore the data by zooming (drag) or using the timeline brush at the bottom.

Example is populated with randomly generated data.

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/ded69192b8269a78d2d97e24211e64e0'>Timelines Chart</a>

Similar vizzes

Loading thumbnail…

Timelines Chart

This timelines chart shows multiple parallel time-series, grouped into distinct sections, with each segment colored to represent a value. The visualization supports both heatmap-style continuous coloring and categorical qualitative coloring. Users can explore the data by zooming and panning, or scrubbing through a timeline brush at the bottom. The example uses the `timelines-chart` D3 component, populating it with randomly generated data via the `getRandomData` function, which constructs groups, labels, and time ranges.

MMNoichl
93% 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
89% 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
89% 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
89% 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
74% match
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
72% match
Loading thumbnail…

Document

This example shows multiple randomly generated time-series line charts, each with a y-axis label and colored lines. Users can brush to zoom into a time range and drag to pan across the data, with a clip path preventing overflow. The visualization is built with D3 v4, using `d3.brush`, `d3.drag`, `d3.scaleTime`, and `d3.voronoi` for hover interactions, rendered as SVG with animated updates.

TThanaporn-sk
72% match
Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans
72% match