Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circles React

Public visualization

Viewing a saved revision (read-only)

1f84be83f0b942bba0bf02bf974d594a

Circles React

0 stars0🌍 Public
Mmbooch22
Last edited Dec 19, 2022
Created on Dec 19, 2022
Forked from Menu Part 1

This example shows 50 randomly sized and positioned circles moving horizontally across the screen, bouncing off the edges. A button toggles between sorting the circles by descending radius and reverting them to random positions. Built with React hooks and D3 v5, it uses `d3.range` to generate the initial data and a `d3.timer` loop to update both React state and SVG attributes (`cx`, `cy`). The circles are rendered as SVG elements, with the animation driven by state changes that update the DOM.

AI-generated description

Smiley face implementation with React & D3.