Skip to main content
SimilarExport ZIP
100%

dragPractice

✓ Published0🌍 Public
GGabriel Ing
Last edited Feb 20, 2025
Created on Feb 18, 2025
Forked from colorPalettes

A playful drag-and-drop exercise presents a teardrop-shaped node that users can move across a bordered playing field. The node responds to pointer events, translating to follow the cursor while also rotating based on its movement. Built with D3 v7, the visualization uses SVG for rendering and custom drag handlers to manage both position and rotation updates. A color scale is generated programmatically, and the interface includes a tooltip for additional interaction.

AI-generated description

Creates a scale of colors.

The finished product for this piece can be found on my website

MIT Licensed

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
78% 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
76% 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
74% match
Loading thumbnail…

playground

A draggable blue rounded square with two lines of white text, "Hello," and "World!", is overlaid on a larger SVG canvas. The example demonstrates creating custom SVG elements with D3.js v7 and applying basic interactivity. It uses `d3.drag()` to handle pointer events and update the square's `x` and `y` attributes during a drag. The SVG is built programmatically using DOM manipulation in `index.js`, and styles are defined in a separate CSS file.

Ttimothee.peter@mac.com
74% match
Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock
73% 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
73% match
Loading thumbnail…

D3 Location

This example demonstrates a network diagram of interconnected nodes, where users can drag circles to reposition them and observe the linked lines update in real time. The visualization uses React for state management with a `useReducer` hook, while `d3-drag` handles the interactive dragging behavior and D3's `select` and `range` APIs render the SVG elements. Links are drawn as thick black lines connecting sequential nodes, and circles are semi-transparent with hover effects. The code initializes positions from a small dataset and dispatches drag events to update the visualization's state.

Rrheasue@outlook.com
73% match
Loading thumbnail…

rotation drag

Green geometric symbols drift across a black background as they automatically rotate and scale. Users can click and drag any symbol to reposition it, while shift-dragging horizontally rotates it and vertically scales it around its centroid. The visualization uses D3 v3’s `d3.behavior.drag` for interaction and `d3.timer` for continuous animation, rendering SVG paths generated with `d3.svg.symbol`. Transformations are composed manually by multiplying affine matrices via a custom `multAffine` function, since chained `translate`, `scale`, and `rotate` in a single SVG transform string proved unreliable.

11wheel
72% match