{"version":"1.0","type":"rich","title":"Loading data with react & D3","description":"This example demonstrates how to load and manage data in a React application using D3 utilities, with React state tracking the current mouse position. The visualization renders an SVG circle that follows the cursor as it moves across the screen, with the circle’s center coordinates tied directly to the `mousePosition` state. The code uses React’s `useState` and `useCallback` hooks, along with ReactDOM to mount the component, while D3 is imported for data handling. The SVG viewport is set to 960 by 500 pixels, and the circle radius is fixed at 30 pixels.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/2e19c1a77f104f5b8ccb83d1fd27fa2c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}