Gist 81595fa81399c6d2b793ca541a71e4ad

100%

Gist 81595fa81399c6d2b793ca541a71e4ad

✓ Published0🌍 Public

Last edited Oct 25, 2019

Created on Oct 25, 2019

Five blue circles with black outlines are placed at fixed coordinates on a 960-by-500 SVG canvas. Each circle can be dragged interactively using the d3.drag behavior, which updates the circle’s cx and cy attributes in response to pointer movement. The example demonstrates basic SVG circle rendering with D3 v4’s data join and drag event handling, using hardcoded coordinate data.

AI-generated description

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

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

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

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

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

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

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell

79% match

Loading thumbnail…

Drag Multiples

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.

AAjayyy

78% match