Fork of Draggable Circles with D3-Drag

100%

Fork of Draggable Circles with D3-Drag

✓ Published0🌍 Public

Last edited Mar 20, 2026

Created on Mar 20, 2026

Forked from Draggable Circles with D3-Drag

Six colored circles sit within dashed square boundaries, each showing its allowed movement range. Dragging a circle with the pointer repositions it inside a square that is four times its radius wide, centered on the circle’s original location. The example uses `d3.select`, `d3.join`, and `d3.drag` from the D3 library to manage SVG rendering and interactive drag behavior, updating circle positions via a state-based `setState` callback while keeping coordinates clamped to each circle’s bounding area.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Draggable Circles with D3-Drag

A set of six multicolored circles can be freely dragged across a light green canvas, with each circle maintaining its size and color while moving. The visualization uses d3-drag, imported from the d3 library, to handle pointer events and update circle positions in real time. State management via a setState function tracks the circle data, and each drag event maps the dragged circle’s ID to new x and y coordinates. The circles are rendered as SVG elements with specified radii, fills, and opacity.

OOssama Rafique

88% match

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

86% 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

85% 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

84% match

Loading thumbnail…

Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable and zoomable circles, where users can reposition individual circles by dragging and pan or scale the entire scene via zoom interactions. It visualizes six colored circles, each with a fixed position, radius, and fill color. The implementation uses D3’s `drag` and `zoom` behaviors, with the state managed through a `setState` callback that updates circle coordinates during drag and applies a transform to a parent group element during zoom. The rendering uses D3’s `select`, `selectAll`, `join`, and `attr` methods, with a light green background.

AAl Piepho

83% match

Loading thumbnail…

Fork of Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable, zoomable circles rendered as an SVG visualization. Users can drag individual circles to reposition them and zoom or pan the entire scene using mouse or touch interactions. The visualization uses D3’s `drag` and `zoom` behaviors, with a state management pattern that updates circle coordinates and the group transform on interaction. Initial circle positions, sizes, and colors are hardcoded as static data, while the `d3.select`, `join`, and `attr` methods handle dynamic rendering and updates.

AAl Piepho

83% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates basic SVG rendering and interactive dragging in D3 v7. It uses `d3.select` to append an SVG canvas and randomly positions 20 circles across a 960×500 coordinate space. The circles are rendered with `data` joins and the `join("circle")` method. Drag behavior is implemented with `d3.drag()`, which handles the `start`, `drag`, and `end` events to update circle positions via `event.x` and `event.y`. The code imports helpers such as `range`, `select`, and `drag` from the D3 module.

NNarottam Medhora

83% match

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock

83% match