{"version":"1.0","type":"rich","title":"Draggable Squares","description":"Six colored squares, positioned at fixed coordinates and linked by a gray polyline, respond to mouse interactions in a unidirectional data flow. Clicking a square selects it, drawing a thick black stroke around it via `highlightSelectedDatum`. Dragging a square updates its x and y coordinates through d3’s `drag` handler, triggering a re-render that moves the square and the connecting line. The example uses d3 v7 with ES modules, rendering SVG elements through `join` and a centralized state managed by `setState`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/ed2429bd9d334f8fa0259cdcb5fa3ada?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}