Skip to main content
SimilarExport ZIP
100%

Draggable Squares

✓ Published1🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jun 27, 2025

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
MIT Licensed

Similar vizzes

Loading thumbnail…

Draggable Circles with D3-Drag

This example demonstrates draggable circles on a light green background. Users can click and drag any of the six colored circles, and their positions update in real time. The visualization uses D3’s `drag` behavior to listen for drag events, updating the `x` and `y` properties of the corresponding data object. Circle positions are rendered with SVG `<circle>` elements, bound to the data via a data join and refreshed through state management. The code imports `select` and `drag` from the D3 library, with initial circle coordinates and radii defined in a hardcoded array.

CCurran Kelleher
76% match
Loading thumbnail…

Arrastrar

Six colored circles of varying sizes and positions are rendered on a light green background. Users can drag each circle freely within the container, with its coordinates updating in real time as it moves. The visualization demonstrates the d3-drag module, applying a drag behavior to SVG circle elements that update state through a setState callback. Written with D3 v7, it initializes the circle data on first render and uses D3’s select, drag, and data join methods to manage the interactive elements.

Ffcordon@pin.upv.es
75% match
Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil
74% match
Loading thumbnail…

dots

This example displays ten colored rectangles that can be dragged around an SVG canvas. The shapes are randomly positioned and sized using D3’s `d3.range` and `Math.random()`, with each rectangle filled via the `d3.schemePastel1` color scheme. The interactive drag behavior is implemented with `d3.drag()`, which updates the x and y attributes in the `dragged` event and raises the selected element to the front on drag start.

KKhatera Alizada
74% match
Loading thumbnail…

Drag Multiples

Sixteen identical SVG panels each display a gray circle that a viewer can drag within the panel’s boundaries. The circles are initially centered and constrained by the panel’s dimensions and the circle’s radius. The d3.behavior.drag() API handles the drag interaction, updating each circle’s cx and cy attributes based on the mouse event’s x and y positions. The code uses d3.select and d3.range to create the panels and data objects, with d3.event providing the current pointer coordinates.

GGerHobbelt
73% match
Loading thumbnail…

drawing squares

This example demonstrates how to draw a series of rectangles whose widths correspond to values in a local data array. The rectangles are vertically aligned and randomly colored, with a tooltip appearing on mouseover to display each rectangle’s value. The visualization uses D3.js v5 via a CDN import, leveraging `d3.select`, `d3.sum`, and `.enter()` to build SVG rectangles. The code also imports a local ES6 module for the message text and uses D3 event handling with `d3.event` for positioning the tooltip.

Ddumbdataguy@gmail.com
73% match
Loading thumbnail…

Interactions 1

Four colored squares render in an SVG, initially gray. Hovering over a square fills it with its assigned color using D3's `mouseenter` and `mouseout` events, which call `d3.select(this).style` to change the fill. After three seconds, a `setTimeout` triggers the `dispatch` method to simulate a mouseout, and then removes both event listeners, leaving the squares interactive only briefly. The code binds an array of hex colors to `rect` elements using `d3.selectAll` and `data`.

Jjbruzzo
73% match
Loading thumbnail…

Dragging a rectangle,simple

Two blue squares are positioned in an SVG canvas, each bound to a data object with x and y coordinates. Dragging either square updates that object’s position in real time, and the rectangle is redrawn to follow the pointer. The code uses D3’s `d3.behavior.drag` with a drag event handler that reads `d3.event.x` and `d3.event.y`, then calls a `redraw1` function to update the square’s `x` and `y` attributes. The data starts as a simple array of two coordinate pairs, demonstrating a minimal drag-and-drop interaction without physics or constraints.

RRobinL
72% match