chrisp76

@chrisp76·3 public vizzes

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.

Mar 26, 2021

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.

Mar 22, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 6 setup by rendering the text “Hello D3 version 6” centered in the browser window. The code uses the `select` function from the d3 module to target the `body` element and apply the text via the `.text()` method. The HTML file loads the D3 library from a CDN and links to a separate `bundle.js` script, while the styling is handled through a large CSS font-size for emphasis.

Mar 22, 2021