🌍 Public
Viewing a saved revision (read-only)
c830d3eccec34728b4ae18ef1a385511
Draggable Squares
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jun 27, 2025
Forked from Pseudo Scatter Plot with Clickable Circles
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`.
AI-generated description