D3 v4 shape drag

100%

D3 v4 shape drag

✓ Published0🌍 Public

Last edited Mar 4, 2017

Created on Mar 4, 2017

Seven SVG shapes—circle, cross, diamond, square, star, triangle, and wye—are rendered using the `d3.symbol` API, colored with `d3.schemeCategory10`. Upon appearing, each shape drops into place via a staggered `transition`. A `d3.drag` interaction lets the user drag any shape by its offset coordinates, bringing it to the front with `raise()`. Built with D3 v4, the example demonstrates modular shape-drawing and pointer-event handling for direct manipulation.

AI-generated description

Drag 'em!

forked from <a href='http://bl.ocks.org/feyderm/'>feyderm</a>'s block: <a href='http://bl.ocks.org/feyderm/4d143591b66725aed0f1855444752fd9'>D3 v4 shape drag</a>

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

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

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

77% match

Loading thumbnail…

d3.drag with grouped elements in v4

This example demonstrates how to use d3.drag in D3 v4 to drag grouped SVG elements together. Ten rectangles with accompanying text labels are generated randomly and placed on a 960×500 SVG canvas. The drag behavior is attached to each `<g>` group, and during the drag event both the rectangle and text are updated simultaneously using `d3.event.x` and `d3.event.y`. The code uses D3 v4’s selection, scaleOrdinal with `schemeCategory20`, and the d3-drag module.

Dd3noob

77% match

Loading thumbnail…

D3 Shapes

This example displays the seven built-in D3 symbol types (circle, cross, diamond, square, star, triangle, and wye) rendered as stroked SVG paths along a horizontal scale. It uses `d3.symbol()` with a `d3.scaleLinear()` to position each shape, and applies each symbol generator via `d3[d]` lookups. Labels below each path show the corresponding API name. The data is a static array of symbol type strings, with the visualization rendered entirely in SVG.

SSubhendu Karmakar

76% match

Loading thumbnail…

Click vs. (a great deal of) Drag(ging)

Twenty colored circles are rendered in an SVG, where each circle can be either clicked or dragged. A click triggers a two-step radius animation (expanding to 64, then shrinking back to 32), while dragging moves the circle and, once the drag exceeds a small threshold, brings the circle to the front using `raise()` and adds an active class. The example uses D3 v4’s `d3.drag()` with `.clickDistance(4)` to distinguish clicks from drags, alongside manual checks on `sourceEvent` coordinates to handle edge cases where the drag ends near the start point. Data is generated randomly as an array of 20 `{x, y}` objects, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

HHerst

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

75% match

Loading thumbnail…

dots

This example displays ten colored rectangles that can be dragged around an SVG canvas. The shapes are randomly positioned and sized using D3’s `d3.range` and `Math.random()`, with each rectangle filled via the `d3.schemePastel1` color scheme. The interactive drag behavior is implemented with `d3.drag()`, which updates the x and y attributes in the `dragged` event and raises the selected element to the front on drag start.

KKhatera Alizada

75% match