Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Timed Moving Bubbles

Public visualization

Viewing a saved revision (read-only)

5890475f15ba4e3383d6c83d39d97db9

Timed Moving Bubbles

0 stars0🌍 Public
Mmoonknight21
Last edited Mar 12, 2021
Created on Mar 12, 2021
Forked from HTML Starter

Timed Moving Bubbles visualizes the progression of 96 individuals through relationship stages—met, romantic, lived together, and married—using animated circles. Each bubble represents a person, colored and clustered by current stage, with counts displayed above. A recurring timer decrements each person’s stage duration, moving bubbles between groups when time expires, using `d3.forceSimulation` with custom cluster and collision forces. SVG circles transition radii via `transition.attrTween`, while stage data loads from a TSV file, rendering the timeline in a React-driven HTML page.

AI-generated description

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

See also React Starter.