Circle Dragging II

100%

Circle Dragging II

✓ Published0🌍 Public

Last edited Jul 5, 2019

Created on May 11, 2016

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.

AI-generated description

This example demonstrates applying d3.drag for dragging circles in Canvas. A custom drag subject performs hit-testing to determine which circle to drag, if any. The circle’s position is updated during the drag event. The circle is raised to the foreground at the start of a drag by reordering the data, and a temporary stroke is applied during drag for visual feedback.

The render function is also registered as a listener to update the display after any drag event. The display will thus be redrawn once per active pointer, but since the number of active pointers is typically small (1, maybe 2), the cost is negligible.

The hit-testing here is simple: the topmost circle that contains the active pointer is returned. A better technique is to choose the closest circle to the active pointer, allowing accurate selection even if the pointer is outside the circle.

Compare this to dragging SVG circles.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Circle Dragging III

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.

Mmbostock

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

89% 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…

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…

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

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

83% match

Loading thumbnail…

Hello VizHub

This example demonstrates interactive circles on an SVG canvas, where users can drag each circle to reposition it or click to trigger a temporary scale-and-color animation. The visualization highlights D3 v5’s drag behavior and transition system, using chained transitions to enlarge circles to black and then restore their original size and color. It generates 20 randomly positioned circles with a fixed radius, colored via the `d3.schemeCategory10` palette. The code relies on `d3.create`, `d3.range`, `d3.drag`, and `selectAll().join()` to manage dynamic elements and event handling.

Hhvindshoej

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

82% match