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

100%

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

✓ Published2🌍 Public

Last edited Jun 26, 2020

Created on Jun 23, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

82% match

Loading thumbnail…

Gantt-Chart in D3.js V3 advanced

This Gantt chart visualizes the timed journey of a token ("RC10") through a hospital process, showing categories like waiting, doctor visits, laboratory tests, and pharmacy pickups along a timeline. The chart uses D3.js v3 with an SVG rendering approach, employing `d3.time.scale()` for the time axis and `d3.svg.axis()` for the grid. Bars are color-coded using a linear scale with HCL interpolation. Interactive tooltips display task details when hovering over each bar.

Vvillagef

79% match

Loading thumbnail…

Gantt-Chart in D3.js V3 advanced

This example shows the journey of a token ("RC10") through a hospital process, visualizing different stages like Waiting, Vital, Doctor, Laboratory, and Pharmacy as colored bars along a timeline. Built with D3.js v3, it uses `d3.time.scale`, `d3.svg.axis`, and `d3.interpolateHcl` to create a Gantt chart with a time-based x-axis and category-colored rows. Interactive hover tooltips display additional details for each task. The visualization renders to SVG and includes a grid, vertical labels, and percentage calculations based on the provided task data.

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

76% match