{"version":"1.0","type":"rich","title":"playground","description":"A draggable blue rounded square with two lines of white text, \"Hello,\" and \"World!\", is overlaid on a larger SVG canvas. The example demonstrates creating custom SVG elements with D3.js v7 and applying basic interactivity. It uses `d3.drag()` to handle pointer events and update the square's `x` and `y` attributes during a drag. The SVG is built programmatically using DOM manipulation in `index.js`, and styles are defined in a separate CSS file.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/eb24f6fdc2b64798a6d88799472d0ab5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}