{"version":"1.0","type":"rich","title":"D3 Location","description":"This example demonstrates a network diagram of interconnected nodes, where users can drag circles to reposition them and observe the linked lines update in real time. The visualization uses React for state management with a `useReducer` hook, while `d3-drag` handles the interactive dragging behavior and D3's `select` and `range` APIs render the SVG elements. Links are drawn as thick black lines connecting sequential nodes, and circles are semi-transparent with hover effects. The code initializes positions from a small dataset and dispatches drag events to update the visualization's state.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/2647d695471441e7b3d4a0efed6a91e8?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}