Arrastrar

100%

✓ Published0🌍 Public

Ffcordon@pin.upv.es

Last edited Feb 10, 2025

Created on Feb 9, 2025

Forked from Draggable Circles with D3-Drag

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.

AI-generated description

Draggable circles using d3-drag.

MIT Licensed

Similar vizzes

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

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

85% match

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

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

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

82% match

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Mmbostock

81% match

Loading thumbnail…

Click vs. (a great deal of) Drag(ging)

Twenty colored circles are rendered in an SVG, where each circle can be either clicked or dragged. A click triggers a two-step radius animation (expanding to 64, then shrinking back to 32), while dragging moves the circle and, once the drag exceeds a small threshold, brings the circle to the front using `raise()` and adds an active class. The example uses D3 v4’s `d3.drag()` with `.clickDistance(4)` to distinguish clicks from drags, alongside manual checks on `sourceEvent` coordinates to handle edge cases where the drag ends near the start point. Data is generated randomly as an array of 20 `{x, y}` objects, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

HHerst

80% match

Loading thumbnail…

Multitouch Drag

Twenty colored circles move freely over a full-window SVG canvas. Each circle is draggable with a multitouch pointer, and its position updates live to follow the finger. The code uses `d3.behavior.drag` with `dragstart`, `drag`, and `dragend` handlers to manage interaction, while `d3.select` and `.transition().ease("elastic")` animate the radius from 32 to 48 pixels on grab and back on release. Random starting coordinates come from `d3.range(20).map()`.

Mmbostock

80% match