π Public
Viewing a saved revision (read-only)
e261b48bb9e64f468bcb5e349d628f17
Mobile Breathing Visualization
This interactive visualization presents a guided breathing exercise using a segmented donut chart built with D3.js and SVG. The four colored arcs represent the phases of a breathing cycle: inhale, hold, exhale, and another hold, each distinguished by green, yellow, and red fills. An animated gray overlay arc, drawn with the D3 arc generator, progressively obscures the segments according to a timed sequence, while a text descriptor updates to label the current phase. The visualization resets and starts when the user clicks or presses the mouse down on the SVG container.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.