Timeline

100%

✓ Published1🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

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

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example displays a medical clinic’s patient flow timeline, showing categories like Waiting, Vital, and Doctor as labeled, color-coded bars positioned along a time axis from 10:10 to 11:30. The visualization also includes a separate SVG legend mapping each category to its assigned color and label. Built with D3.js v3, the chart uses the custom `d3.timeline()` API, which accepts options for stacking, margins, tick formatting, and axis navigation, rendering the timeline as SVG elements with rects and text.

Ssrinivasjavvadi

87% match

Loading thumbnail…

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

This example demonstrates a color-coded timeline visualization of patient wait times, vitals checks, and doctor visits using stacked horizontal bars. The chart renders SVG elements through D3.js v3, utilizing the `d3.timeline` plugin to map time intervals with custom colors and labels. It shows a 15-minute tick axis with formatted time labels, and includes a legend for the three activity categories. The data is hardcoded as JavaScript objects containing starting and ending times parsed with `Date.parse`.

Ffilipwydra

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

86% match

Loading thumbnail…

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

A fork of jiahuang's d3-timeline, this example demonstrates a stacked, interactive timeline built with D3.js v3 and rendered as SVG. The chart visualizes labeled time intervals for patient statuses like "Waiting," "Vital," and "Doctor," with each segment colored and optionally labeled, and an accompanying legend. The code creates the timeline via `d3.timeline()` with stacked item rows, custom tick formatting using `d3.time.format`, and margins. SVG elements are appended manually for the legend, while the timeline itself handles axis and row rendering through its internal API.

JJason

83% match

Loading thumbnail…

Gantt-Chart in D3.js V3

This Gantt chart visualizes a hospital workflow, showing the timing and status of tasks such as "Waiting," "Vital Serving," and "Doctor Serving" across a timeline. Segmented bars represent task durations, with colors indicating status like WAITING or DOCTOR. Built with D3.js V3, it uses `d3.time.scale` and `d3.scale.ordinal` to position bars, and `d3.svg.axis` for time and task labels. Animated transitions via `transition()` and `call(xAxis)` support redrawing when data updates. Data is a static array of start/end dates rendered as SVG rectangles.

Ssrinivasjavvadi

78% match

Loading thumbnail…

Untitled

This example visualizes operating room schedules as an animated stacked bar chart, showing patient transfer, preparation, operation, and cleanup phases across multiple groups over time. Each horizontal bar represents a procedure timeline, with colored segments for planned versus actual durations. The chart uses D3 v5 with SVG transitions, loading CSV data and mapping it through a linear scale for time and an ordinal scale for color-coded groups. Rectangles animate their width and x-position on load to reveal the temporal structure. Tooltips and hover effects are configured through the d3-tip library and CSS styling.

Cchrisp76

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

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

77% match