Skip to main content
SimilarExport ZIP
100%

Timeline Chart

✓ Published1🌍 Public
RRajat Dangat
Last edited May 25, 2021
Created on May 24, 2021
Forked from Stylized Bar 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.

AI-generated description

Timeline chart using react and D3 js.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Timeline Chart

This example displays a timeline chart that visualizes device activity periods, distinguishing between running and stoppage states through colored horizontal bars. The visualization uses React components with D3 v5 scales, including `scaleBand` for the y-axis categories and `scaleTime` for the x-axis time domain. SVG rectangles render the data intervals, with hover tooltips showing the exact start and end times. The chart includes a color scale that maps device states to blue and red, while the axis components handle tick generation and label truncation for longer device names.

Rrobinlecouteur
89% match
Loading thumbnail…

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
76% match
Loading thumbnail…

Timeline Points

This example shows a simple timeline visualization with a horizontal line representing the date range from December 27, 2019, to February 12, 2020. The React and D3 code uses `d3.scaleTime` to map the date domain to pixel coordinates within an SVG. A `VizContainer` component, created with the margin convention, renders the framework, and a single `<line>` element is drawn across the inner width to mark the timeline base.

WWaseem Medhat
74% 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
74% 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
74% 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
72% 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…

D3 React Gantt Chart

This D3 React Gantt chart displays project timelines as horizontal bars on a time axis, with each category (A, B, C) mapped to a row via a band scale. It uses d3.scaleTime and d3.scaleBand to position rectangular bars, d3.axisTop for year ticks, and d3.axisLeft for category labels, all rendered as SVG. The React component manages the chart lifecycle with useEffect and useRef, while d3.select manipulates the SVG directly. Data from a JSON array provides start and end dates for each bar.

Ffmcgomes
72% match