Skip to main content
100%

Fork of Draggable Circles with Voronoi Overlay

✓ Published0🌍 Public
Aaferdita.e85@gmail.com
Last edited Feb 15, 2025
Created on Feb 15, 2025

This example demonstrates a draggable scatter plot where each point’s interactive region is defined by a Voronoi diagram. Users can click and drag any circle, and its position updates live while the Voronoi overlay recalculates to reflect the new point layout. The visualization uses `select`, `drag`, and `Delaunay` from the `d3` library, with the Voronoi tessellation generated via `delaunay.voronoi([0, 0, width, height])` and rendered as stroked paths. The underlying data is a static set of six colored circles, re-rendered on each drag event.

AI-generated description

An example showing how to make a Voronoi Diagram overlay using d3-delaunay/voronoi.

Reference Examples

Challenge

  • Use a Voronoi Diagram as the interaction surface for one of your existing visualizations, such as a scatter plot or multi-line chart.
MIT Licensed

Similar vizzes

Loading thumbnail…

Draggable Circles with Voronoi Overlay

This example demonstrates a Voronoi diagram overlay on a set of draggable, semi-transparent circles. The visualization uses d3-delaunay to compute the Voronoi tessellation from the circles’ current positions, rendering the cells as stroked paths. Each circle can be dragged via d3.drag, updating its coordinates in the state, which triggers a re-render of both the circles and the updated Voronoi cells. The data consists of six circles with varying radii and colors, and the overlay highlights spatial regions closest to each point.

CCurran Kelleher
91% 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
81% match
Loading thumbnail…

Fork of Draggable Circles with D3-Drag

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.

OOssama Rafique
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…

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

Draggable Voronoi Circles - SVG

A Voronoi diagram partitions the screen into 100 cells, each containing a black point. Inside each cell, a grey circle is drawn using a brute-force algorithm that finds the largest circle fitting within the convex polygon. The points and circles drift and bounce around the SVG canvas, causing the Voronoi cells to continuously update. Dragging any polygon with the mouse moves its corresponding point and highlights the active cell in red.

Aalexmacy
79% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

LLI, CHENG-TSE
79% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

LLI, CHENG-TSE
79% match