{"version":"1.0","type":"rich","title":"React & D3 Drag","description":"This example demonstrates interactive dragging of circles connected by lines, built by combining React state management with D3's rendering capabilities. The visualization shows three semi-transparent circles linked by thick black lines, where dragging any circle updates its position and the connecting lines follow in real time. React's `useState` and `setData` manage the data array, while D3's `drag()` handler and `select()` method handle the SVG rendering and pointer interactions. The `VizWrapper` component delegates visual updates to the `viz` function, which uses D3's `range` and `join` operations to redraw the network on each data change.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f9bc38ee686a4f9d9220dfe7368d4028?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}