{"version":"1.0","type":"rich","title":"Clickable Circles with D3 and React","description":"Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/065f2bd9700540afa6d9584ae126d08a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}