Timelines Chart

100%

Timelines Chart

✓ Published0🌍 Public

Last edited Jan 5, 2018

Created on Jan 5, 2018

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.

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>

forked from <a href='http://bl.ocks.org/Thanaporn-sk/'>Thanaporn-sk</a>'s block: <a href='http://bl.ocks.org/Thanaporn-sk/16dae827327770bb4a46b95b82dae057'>Timelines Chart</a>

forked from <a href='http://bl.ocks.org/willzjc/'>willzjc</a>'s block: <a href='http://bl.ocks.org/willzjc/02b2444283d462ff1ebd1c738c59b5c8'>Timelines Chart</a>

Similar vizzes

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

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

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

72% match

Loading thumbnail…

Timeline

A horizontal timeline charts patient flow through stages like Waiting, Vital, and Doctor, with colored bars and labels showing durations. The chart uses a custom `d3.timeline` function built with D3 v3, rendering SVG elements. It stacks rows, applies a 15-minute time axis with `d3.time.format`, and supports custom tick formatting and interactive navigation. Colors are mapped to each stage, and the example demonstrates how to configure margins, stacking, and axis labels for a clear temporal sequence.

Zzeeeeem

72% match

Loading thumbnail…

Timeline with Procedurally Generated Data

This animated example shows a timeline visualization that procedurally generates random bands of data, with each band’s start and end values falling between 1 and 40. Every 500 milliseconds, a new band is added, and the timeline updates over a 400-millisecond transition, ultimately generating 100 bands. Earlier bands are rendered with greater transparency than later ones, creating a sense of depth. The d3.layout.timeline library’s `extent` and `maxBandHeight` settings keep the axes fixed so the chart does not resize as data is appended.

DDinoJay

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

71% match

Loading thumbnail…

Time Line

This timeline visualization displays the projected start and end dates for a series of project phases, from Induction through Tag, spanning late 2019 into early 2020. The chart uses an SVG canvas with D3 v5’s `scaleBand` for the categorical phase labels and `scaleLinear` for the date range. Data is loaded from a CSV file. The code builds a horizontal bar chart, using `axisBottom` for the time axis and custom tick formatting, and applies a reusable group `g` to position elements within specified margins.

GGeolffrey S Mena

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

71% match