Circle Dragging III

100%

Circle Dragging III

✓ Published0🌍 Public

Last edited Jul 5, 2019

Created on May 11, 2016

This example demonstrates an improved technique for dragging circles rendered on a Canvas, using a custom drag subject that selects the circle closest to the pointer rather than simply the topmost overlapping circle. The code defines a linear scan in `dragsubject` to find the nearest circle within double the radius, increasing the effective hit area for easier interaction. Twenty randomly positioned circles are drawn and updated via d3-drag’s event handlers, with active circles highlighted by a stroke. The implementation relies on d3.drag, d3.scaleOrdinal with d3.schemeCategory20, and the Canvas 2D API.

AI-generated description

This is a variant of dragging Canvas circles that uses better hit-testing. Rather than choose the top circle that contains the active pointer, this custom drag subject chooses the circle closest to the active pointer. Even better, this allows increasing the search radius for the closest circle, such that the pointer doesn’t need to be inside a circle. This is equivalent to using an SVG Voronoi overlay, and is similar to Tovi Grossman’s bubble cursor.

This implementation uses a linear scan. For force-directed layouts, see simulation.find. See also quadtree.find, though note that a quadtree will only be faster than a linear scan if you can amortize the cost of building the quadtree, such as by using quadtree.remove and quadtree.add to update the circle that is being dragged.

gpl-3.0 Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Circle Dragging IV

This example demonstrates an improved method for dragging SVG circles, where the circle nearest to the pointer is selected for interaction rather than the topmost one. A Voronoi overlay, computed with `d3.voronoi`, is used for hit-testing, with its cells rendered as light-gray paths. Each circle is clipped to its corresponding Voronoi cell using a `clipPath`. During a drag, the `dragged` function updates the circle’s position and recalculates the Voronoi polygons. The code uses `d3.drag` for the interaction and `d3.scaleOrdinal` with `d3.schemeCategory20` for automatic circle colors.

Mmbostock

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

85% match

Loading thumbnail…

Force Dragging II

A grid of 324 circles is rendered on a Canvas and can be dragged individually, with collision detection preventing overlap. The example combines `d3.forceSimulation` with the `d3.forceCollide` force and `d3.drag` interaction. During dragging, simulation `alphaTarget` increases to reheat the simulation, and fixed positions (`fx`, `fy`) track the pointer. The Canvas is cleared and redrawn on each tick, with circles drawn using the Canvas 2D API.

Mmbostock

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

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

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…

circle-arc-drag

This example demonstrates how a draggable arc can be reconstructed from three movable points, showing the relationship between a circle's geometry and its SVG path. The code uses D3 v3’s `d3.behavior.drag` to update point positions, then calculates the circumcircle and radius via trigonometric formulas, applying the large-arc and sweep flags to render the correct arc. The visualization starts with a pre-defined path parsed into three points using `getTotalLength` and `getPointAtLength`, and the SVG `path` element updates on each drag event. Circles and paths are styled with strokes and fills, with the background set to black.

11wheel

76% match