voronoi.find() and resizing charts

100%

voronoi.find() and resizing charts

✓ Published0🌍 Public

Last edited Sep 12, 2017

Created on Sep 2, 2017

This example demonstrates multiple interactive SVG charts that can be added, repositioned, and resized by dragging their edges, corners, or bodies. Each chart renders a Voronoi diagram of 200 randomly generated points, and mouse movement highlights the cell containing the cursor using `voronoi.find()`. A "Snap" button tiles all charts to fit the screen. The code uses d3.v4’s `d3.voronoi`, `d3.drag`, and `d3.transition` to handle the geometry, user interactions, and smooth resizing animations.

AI-generated description

The buttons at the top let you add more charts and snap them to the screen tiled to all be visible. The charts are also interactive in that they can be resized and moved. They are also responsive to mouseover events, using voronoi.find() to highlight the cell in each chart for the mouse's relative location.

Also see Philippe Rivière's block Voronoi.find(x,y) .

mit Licensed

Similar vizzes

Loading thumbnail…

D3 voronoi interaction

This example demonstrates how Voronoi diagrams improve hover interaction on a scatterplot by partitioning the chart area into cells around 50 randomly generated points. Clicking the chart reveals the Voronoi overlay, while moving the mouse highlights the nearest data point with a colored ring and displays its properties in a text output. The implementation uses D3 v4’s `d3.voronoi` layout with the `find()` method to locate the closest site, alongside `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Points and axes are rendered as SVG elements within an HTML page.

FFrissAnalytics

81% match

Loading thumbnail…

Voronoi

This example shows an interactive Voronoi diagram built with D3 v4, displaying 100 randomly generated points and their corresponding cells. Initially, the cells are hidden, but users can enable a hover effect that highlights the cell containing the mouse cursor, turning the hovered point red. A toggle also reveals all Voronoi polygons as thin gray outlines. The visualization uses `d3.voronoi()` to compute polygon boundaries from the points, and renders the result as SVG paths and circles within a menu-driven interface.

AAjayyy

80% match

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock

80% match

Loading thumbnail…

smushed-voronoi

Three charts show how weighted Voronoi diagrams change pointer hitboxes for scatterplots. Each chart’s Voronoi cells, colored by series, respond to a slider that adjusts the X-to-Y distance ratio between 1 and 100. The code uses `d3.voronoi()` to compute cells, `d3.drag()` for moving points, and a custom `calcXY` function to weight dimensions. The interaction updates cell geometry and highlights the nearest point to the cursor in real time.

11wheel

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

76% match

Loading thumbnail…

#HAW: Svelte + D3: Voronoi

A Voronoi diagram partitions a 2D space into regions around 100 randomly generated points. As the mouse moves over the full-screen SVG, the first point (highlighted in yellow) updates its position to follow the cursor, dynamically redrawing the surrounding voronoi cells and circles in green. The code uses d3.Delaunay and `voronoi.renderCell` to compute and render the cells, with scales from `d3.scaleLinear` mapping the data domain to pixel coordinates.

MMatthias Stahl

75% match

Loading thumbnail…

Voronoi Shuffling v1

A Voronoi diagram with 100 points continuously reshuffles, as each cell’s polygon and its generating dot transition to new random screen positions every few seconds. The animation uses D3 v4’s `d3.voronoi` layout to compute polygons from updated coordinates, then applies 3-second `transition().duration()` tweens to both the SVG `path` elements’ `d` attributes and the `circle` elements’ `transform` attributes. A `d3.timeout` recursively triggers redraws every 8 seconds, cycling the diagram indefinitely.

Aalexmacy

75% match

Loading thumbnail…

Voronoi binning (animated)

This animated visualization demonstrates Voronoi binning: 4,000 random points are generated, then sorted by size, with the top 10% selected as Voronoi sites. Initially, all dots appear white, but after a delay, the larger site points are colored, and then every other point is recolored according to the site of its Voronoi cell, found via the `diagram.find` method. The animation uses `d3.interval` to repeat the algorithm, `d3.voronoi` for the diagram, and D3 transitions to fade polygons and dots in and out, rendering in SVG.

AAjayyy

75% match