{"version":"1.0","type":"rich","title":"Circles React","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/bf5148a06f5a4316ae30ac2c8f142d95?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}