Drag Multiples

100%

Drag Multiples

✓ Published0🌍 Public

Last edited Jun 17, 2019

Created on Jun 17, 2019

Sixteen small SVG canvases each contain a single draggable circle, centered by default. The example uses `d3.behavior.drag` with an `origin(Object)` accessor and a `dragmove` handler to reposition circles within each square's bounds. `d3.select` and `d3.attr` update the circle's `cx` and `cy` coordinates, clamped to keep the circle inside the 238×123 pixel viewport. The code generates the multiple SVGs via `d3.range(16).map()`, with each circle sharing identical initial coordinates, allowing independent dragging across all instances.

AI-generated description

forked from <a href='http://bl.ocks.org/GerHobbelt/'>GerHobbelt</a>'s block: <a href='http://bl.ocks.org/GerHobbelt/3125020'>Drag Multiples</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Drag Multiples

A grid of sixteen small SVG circles, each in its own separate SVG element, can be dragged independently within the bounds of its cell. The example demonstrates the `d3.behavior.drag` API, using its `origin` accessor and `drag` event to update circle positions. Each circle is constrained to its local coordinate space, with position clamped between the radius and the SVG width or height. The code uses d3.v3 and renders the visuals as SVG, with the data derived from a static array of sixteen identical starting points.

Mmbostock

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

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

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

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

82% match

Loading thumbnail…

Fork of 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.

Cchiara.ferregutti@gmail.com

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

79% match

Loading thumbnail…

Drag & Zoom II

This example demonstrates a zoomable SVG canvas containing two thousand circles arranged in a phyllotaxis pattern, where users can click and drag on the background to pan the view or drag individual circles to reposition them. The visualization combines d3-drag and d3-zoom, using the `d3.zoomIdentity` transform to update the group’s `transform` attribute during zooming, while the drag handler updates each circle’s `cx` and `cy` attributes directly. Rendering relies on SVG’s built-in hit-testing and coordinate transformation, avoiding the need for manual redraws or complex event logic.

Mmbostock

79% match