{"version":"1.0","type":"rich","title":"MasteringD3js_Ch4.1_1","description":"This example demonstrates a draggable circle implemented with D3.js v5’s drag behavior. The circle, rendered as an SVG element, moves in response to pointer events, and its new coordinates are logged to the console. The code defines a reusable chart module that builds an SVG container, appends a circle, and attaches a drag handler via `d3.drag()`. A custom event dispatcher (`d3.dispatch`) broadcasts the drag action, and the circle’s position updates using the event’s x and y properties. The example reflects an adaptation from D3 v3 to v5.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/deb46af581494ebd9f397528d6bfebde?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}