{"version":"1.0","type":"rich","title":"Interaction with react","description":"A circle follows the mouse cursor within an SVG canvas, demonstrating interactive state updates in React. The app tracks mouse movement via the `onMouseMove` event handler on the `<svg>` element and updates the circle’s `cx` and `cy` attributes using React’s `useState` hook. The visualization combines React 17 with D3 v7 for rendering, using a simple SVG `<circle>` element with a fixed radius. The code explicitly manages the circle’s position in React state rather than using D3’s data-binding, highlighting the interaction between React’s declarative model and SVG.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/443ed5c46ba146e6a54b4cf131eb8134?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}