🌍 Public
Viewing a saved revision (read-only)
47f9ebfe0b6b40529cc4fdb02a0b5daf
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.
AI-generated descriptionAn example showing how to make a Voronoi Diagram overlay using d3-delaunay/voronoi.
Older Reference Examples:
- Step 5 - Voronoi (Distance Limited Tooltip) Scatterplot by Nadieh Bremer
- Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot by Nadieh Bremer
Challenge
- Use a Voronoi Diagram as the interaction surface for one of your existing visualizations, such as a scatter plot or multi-line chart.