Untitled

100%

✓ Published1🌍 Public

Last edited Mar 26, 2021

Created on Mar 23, 2021

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.

AI-generated description

Part of my ERP DataVis Project. This is the ERP timebar Adding tool tip http://bl.ocks.org/JimMaltby/844ca313589e488b249b86ead0d621a9

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Untitled

A grouped bar chart shows retrieval counts across six dates, with each date divided into five folders. Bars animate upward from zero using staggered delays and a mouseover darkens their color. The chart uses D3 v3 with ordinal and linear scales, SVG axes, and transition methods. Data is loaded from a JSON file and rendered as colored SVG rectangles with a fading legend.

LLokeyyyy

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

78% match

Loading thumbnail…

Untitled

This interactive stacked area chart displays the changing values of multiple categories over time, using the D3.js library (version 2) with SVG rendering and animations. The chart employs a silhouette offset layout to visualize data from a CSV file, with color-coded layers representing different groups. Hovering over a layer highlights it and shows a tooltip with the category name and its specific value, while mouse movement on the chart also triggers a vertical guideline.

LLAOKE1997

76% match

Loading thumbnail…

Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, with hover highlighting on each bar. The visualization uses D3 v4 to bind the dataset, scales it from seconds to hours, and renders the bars as SVG rectangles with axes. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The bars change color on mouseover via CSS, while the data comes from an embedded inline array rather than an external file.

HHelen-Luwei-Zhang

76% match

Loading thumbnail…

OP Test

This example visualizes surgical operation schedules for two patients in an ophthalmology clinic, showing planned and actual times for patient request, preparation, operation, and cleanup phases. The code extracts the operation type text from the data and displays it as plain text in a preformatted HTML element. It uses d3.v5, specifically the `select` and `range` functions from the d3 library, though the visualization primarily relies on basic DOM manipulation via `document.getElementById` rather than complex data binding or scales. The data comes from a static JavaScript array containing timestamped procedure phases.

Cchrisp76

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

76% match

Loading thumbnail…

Untitled

This example shows stacked bar charts of population counts by age group and state for selected years and columns, with values labeled above each bar. The chart updates with smooth transitions when the user changes the year, column, or toggles sorting. Built with React and D3 v5, it uses d3.csv to load data, d3.scaleBand, d3.scaleLinear, d3.stack, and transition.duration to animate bar heights and positions. The SVG renders all bars and axes dynamically.

AAbhishek Kumar

76% match