MasteringD3js_Ch4.1_1

100%

MasteringD3js_Ch4.1_1

✓ Published0🌍 Public

Last edited Oct 6, 2021

Created on Oct 6, 2021

This example demonstrates a draggable circle implemented with D3.js v5’s drag behavior. The circle, rendered as an SVG element, moves in response to pointer events, and its new coordinates are logged to the console. The code defines a reusable chart module that builds an SVG container, appends a circle, and attaches a drag handler via `d3.drag()`. A custom event dispatcher (`d3.dispatch`) broadcasts the drag action, and the circle’s position updates using the event’s x and y properties. The example reflects an adaptation from D3 v3 to v5.

AI-generated description

D3 Cook Book getting used to JS in d3 CH2 Problem in converting from v3 to v5 and looks like book has practice of d3.js (https://stackoverflow.com/questions/45181773/d3-js-raw-selection-get-error-uncaught-typeerror-cannot-read-property-0-of-u) that needs to be ironed out.

MIT Licensed

Similar vizzes

Loading thumbnail…

MasteringD3js_Ch4.1

This example demonstrates three stages of building an interactive slider control using D3.js v5. It first shows a draggable circle using the `d3.drag` behavior, then constructs a reusable slider component with a linear scale and drag handler, and finally binds the slider to update data. The SVG rendering approach uses `d3.select` and `d3.scaleLinear` to map domain values to pixel positions, with circles and lines as visual elements. The code reflects a migration from v3 to v5, adapting drag event handling from the older API.

JJimMaltby

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

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

78% match

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

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

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

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

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

76% match