Skip to main content
SimilarExport ZIP
100%

Fork of Draggable Circles with D3-Drag

✓ Published0🌍 Public
OOssama Rafique
Last edited Nov 7, 2024
Created on Nov 7, 2024

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.

AI-generated description

Draggable circles using d3-drag.

MIT Licensed

Similar vizzes

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
86% 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
84% 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
84% match
Loading thumbnail…

Fork of Circles with D3

A dynamic SVG canvas displays seven multicolored circles with varying radii and opacity, positioned at explicit coordinates. The D3.js code uses the `select` and `join` API to create and update the SVG element and its circle children via method chaining. Circle properties like `cx`, `cy`, `r`, `fill`, and `opacity` are bound directly to data objects, demonstrating D3’s data-binding and General Update Pattern.

AAsad Ali Hashmi
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 Zoomable and Draggable Circles with D3-Drag and D3-Zoom

This example demonstrates draggable, zoomable circles rendered as an SVG visualization. Users can drag individual circles to reposition them and zoom or pan the entire scene using mouse or touch interactions. The visualization uses D3’s `drag` and `zoom` behaviors, with a state management pattern that updates circle coordinates and the group transform on interaction. Initial circle positions, sizes, and colors are hardcoded as static data, while the `d3.select`, `join`, and `attr` methods handle dynamic rendering and updates.

AAl Piepho
81% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates interactive draggable circles on an SVG canvas using D3.js v5. Seven data points are rendered as translucent green circles with purple strokes, and users can drag them around the 500x500 pixel space. The code imports D3 modules via ES6 syntax, uses `d3.drag()` for interaction, and `d3.pointer()` to track mouse coordinates. It also showcases local module imports and DOM selection through `select()`.

Ccindy203cc
81% match
Loading thumbnail…

Fork of React & D3 Drag

Three draggable circles are connected by thick black lines, with hover interactions changing the stroke style. Built with React and D3.js v7, the visualization uses `d3.drag` to handle pointer events, updating state via React's `useState` and immutable data patterns. A `VizWrapper` delegates rendering to a D3 function that uses `selectAll` and `join` to update SVG circles and lines. The initial data consists of three coordinate pairs, rendered against a full-window SVG canvas.

Ddoankhanh122@gmail.com
81% match