{"version":"1.0","type":"rich","title":"Shapes with SVG and CSS","description":"A circle follows the mouse cursor across a full-window SVG canvas, using unidirectional data flow to manage position state. The `index.js` file holds the state object and re-renders on every update, while `viz.js` uses D3's `select` and `join` methods to create the SVG element and bind circle attributes. The initial state centers the circle, and subsequent mouse movements trigger `setState` with new `x` and `y` coordinates, updating the circle's `cx` and `cy` attributes. The example is minimal, with only 50 pixels of radius.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5c6c758ca5964e2e960f3e75fa6cdba0?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}