Skip to main content
SimilarExport ZIP
100%

Gantt-Chart in D3.js V3 advanced

✓ Published1🌍 Public
Ssrinivasjavvadi
Last edited Jun 29, 2020
Created on Jun 26, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
87% match
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
78% match
Loading thumbnail…

Gantt Chart

This Gantt chart visualizes project tasks, including development, coding, promotion, and celebration phases, as horizontal bars positioned along a linear time scale. The chart uses D3 v5 to parse dates with `d3.timeParse`, scale time with `d3.scaleTime`, and render colored rectangles within an SVG container. Task categories are distinguished by a gradient color scale using `d3.scaleLinear` with HCL interpolation. Hovering over a task reveals a tooltip with its name and duration details, while the grid and labels are also generated with D3.

JJoker-tr
78% match
Loading thumbnail…

Gantt

This interactive Gantt chart visualizes project tasks, their durations, dependencies, and resource allocation across a timeline. It renders task bars in an SVG, with predecessor links drawn as paths and arrows to show task sequencing. A separate SVG area displays resource usage over time as an area chart, with a selector to switch between resources and an adjustable daily capacity input. The visualization uses d3.v5 for scales, axes, and SVG rendering, alongside custom JavaScript functions for date calculations and table generation from the provided task data.

Mmaxime-plantard
76% 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
75% 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
75% 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
75% match