Mobile Breathing Visualization

100%

Mobile Breathing Visualization

✓ Published0🌍 Public

Last edited Apr 7, 2021

Created on Mar 30, 2021

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 description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

pie

A guided breathing animation is presented as a segmented donut chart, with four colored arcs representing a cycle of inhale, hold, exhale, and hold phases. An animated gray overlay sweeps across the arcs to indicate the current phase, while a text label updates to show the active step. Built with D3 v6 and SVG, the code uses `d3.arc` to define arc shapes and `transition.attrTween` to animate the overlay’s angle. The duration of each phase is fixed, and the sequence repeats for a set number of cycles before stopping.

TTee

76% match

Loading thumbnail…

Donut chart

This donut chart visualizes a percentage value (47%) using a segmented arc, with blue segments representing the data portion and grey segments as the background track. The chart is rendered as SVG, with each of the 20 segments drawn as a path using the d3.arc function. The code calculates segment counts and a partial final segment based on the value, and applies stroke spacing between arcs to create the separated ring effect. The visualization uses React with D3 v5 for rendering.

BBhavyatulasi

69% match

Loading thumbnail…

Interactive donut chart with transitions

This interactive donut chart updates live as the number of data points changes, with each arc smoothly transitioning to a new size and position. Users can type a new count into an input field, triggering random data regeneration and a one-second animated redraw. The visualization uses D3 v3’s `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry, while `setInterval` automatically re-renders every two seconds. SVG paths are colored via `d3.scale.category20`, and the code also handles entering and exiting arcs for dataset size changes.

TThanaporn-sk

69% match

Loading thumbnail…

Meditation App

This interactive meditation experience overlays a serene Buddha image with four D3.js tools: a particle system with animated glowing circles that respond to mouse movement, a mandala creator that draws symmetrical paths based on user input, a breathing guide that expands and contracts a circle according to configurable breath ratios, and a sound meditation module using Tone.js for ambient audio synthesis and visualization. The SVG-based visualizations animate continuously, with particles using `requestAnimationFrame` for movement, the mandala computing rotational symmetry through trigonometric transformations, and the breathing circle leveraging D3 transitions with timing based on user-selected inhale-hold-exhale cycles paired with text instructions.

NNita

69% match

Loading thumbnail…

Practice

A donut chart of five colored arcs represents angular segments via D3's `arc` generator, with the final arc spanning a full circle from 3 radians to 2π. The SVG is centered using a group transform, and each path's `d` attribute is computed from hardcoded `startAngle`/`endAngle` data. The visualization uses `d3.select` and `d3.arc` with an inner radius of 60 and outer radius of 100, applying a small pad angle between segments. Colors come from a fixed palette, and the chart is rendered statically without interaction.

Mmusclemike

68% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

68% match

Loading thumbnail…

updated donutchart

This example shows an animated donut chart that displays a percentage value at its center and updates its arc and color gradient automatically. The chart visualizes a data array where the third element (80%) drives the arc length and determines a six-stop linear gradient color scheme ranging from red to green based on the value. Built with D3 v5 and React, it uses `d3.arc` for the donut geometry, `transition.attrTween` with an interpolator to smoothly animate the arc between states, and a toggle button to switch between two datasets. The SVG rendering includes a static gray background arc and a foreground path filled via a dynamically configured `linearGradient`.

SSchmittYannic

67% match

Loading thumbnail…

new animation

This animation shows a field of green circles forming a sinusoidal wave pattern that continuously shifts and breathes across the screen. The number of circles and their positions and radii oscillate over time using a cosine-driven timer. The visualization uses D3.js version 7.8.5 with the `select` and `range` APIs, rendering as an SVG with dynamic data joins via `join('circle')`. A `setInterval` at 60 frames per second updates the scene, while the window dimensions determine the SVG size.

NNeeraj Kumar

67% match