{"version":"1.0","type":"rich","title":"On mouse click - object mapping","description":"Clicking the SVG triggers a state update that maps the mouse click position to a single green circle, which appears centered at the clicked coordinates. Built with React, the app uses the `useState` and `useCallback` hooks to track the clientX and clientY values from the click event. The circle, rendered with a fixed radius of 50 pixels, is positioned using the SVG `<circle>` element within a 960x500 viewport. No external visualization library is used; the mapping relies solely on React’s state management to reflect the latest click position.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/4eb7985eb85245bea9db8391cb3ce233?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}