Voronoi Spanning tree - long paths

100%

Voronoi Spanning tree - long paths

✓ Published0🌍 Public

Last edited Aug 31, 2016

Created on Aug 31, 2016

This example visualizes a Voronoi spanning tree using a dataset of 1,500 randomly generated sites. A red line connects each site to its nearest neighbor in the direction of a user-controlled root point, which follows the mouse cursor. The resulting tree reveals long, winding paths as the connection logic prioritizes proximity to the root over local clustering. Built with d3.v4 and the d3.voronoi API, it renders SVG polygons for the diagram and lines for the spanning tree, updating dynamically on mouse movement.

AI-generated description

Using <a href='http://bl.ocks.org/Fil/1b7ddbcd71454d685d1259781968aefc'>Voronoi.find(x,y)</a> to create a spanning tree.

The strategy is to hop from any site to the next site that is nearest to the designated root (compare with <a href='http://bl.ocks.org/Fil/2d10b09c5c50eee6d311ad5272b95a27'>Voronoi spanning tree - short path</a>).

Original work by Philippe Rivière for d3-voronoi (issue 17).

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoi Spanning tree - short paths

The visualization draws a Voronoi spanning tree that connects 1,500 randomly placed sites by hopping from each site to a neighboring site closer to a moving root point. As the mouse moves, the tree’s edges recompute in real time, highlighting short paths toward the cursor. Built with D3 v4, it uses `d3.voronoi` to compute cells and edges, with a custom `diagram.find()` and `diagram.next()` method to traverse the diagram. The SVG rendering shows semi-transparent polygon boundaries and black spanning lines, with red highlighting on found cells.

PPhilippe Rivière

94% match

Loading thumbnail…

Voronoi Spanning tree - short paths

This example builds a Voronoi spanning tree on 1,500 random points using d3.voronoi, with SVG rendering. It visualizes short paths by hopping from each cell to its neighbor that is nearest to a moving root point, computed via a custom `diagram.find` function. As the mouse moves, the tree updates in real time, showing only the edges that link sites along efficient routes toward the cursor. The code leverages d3.v4’s voronoi layout and SVG line elements to display the redrawn spanning tree.

FFrissAnalytics

91% match

Loading thumbnail…

Voronoi colorized spanning tree

A Voronoi diagram of 1000 random sites is colored by a spanning tree that connects each site to its nearest neighbor closer to a moving root point. As the mouse moves, the root updates, the tree edges redraw, and every cell's fill derives from the tree's branch angles and depth. The example uses d3.v4 with `d3.voronoi` to compute cells and custom `diagram.find` and `diagram.next` methods for tree construction, then renders SVG polygons and lines with HSL colors.

PPhilippe Rivière

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

79% match

Loading thumbnail…

Voronoi binning

4000 random points are colored by the nearest of 400 weighted sites, selected as the top 10% by a random weight and arranged as a Voronoi diagram using d3.voronoi. A custom `find` method on the diagram, which walks neighboring cells via halfedges and optimizes from the last result, assigns each point the site color of its containing cell. Circles are rendered in SVG, with radius proportional to the square of each point’s weight.

PPhilippe Rivière

77% match

Loading thumbnail…

Voronoï playground : Do you see the path ?

The example reveals emergent path-like structures within a Voronoï tesselation by generating cells whose borders align along a user-drawn route. Viewers click and drag to create a continuous white stroke, and the visualization dynamically seeds limited-distance Voronoi cells around that path, coloring and styling each cell border to suggest a coherent corridor. Built with D3 v4, it uses `d3.drag`, `d3.line`, and a custom `d3.distanceLimitedVoronoi` plugin to recompute cells in real time, with an SVG filter applied for visual saturation.

KKcnarf

77% match

Loading thumbnail…

Toric Voronoi

This example demonstrates a Voronoi diagram on a torus, where 300 random points create cells that wrap seamlessly across the canvas edges. It shows how the cell structure repeats across a virtual cylinder in both horizontal and vertical dimensions, with the interactive site highlighted in red. The code uses d3.voronoi to compute the diagram, duplicating each site into eight shadow copies to handle the toroidal topology, then filtering links between shadow copies. Rendering is done via Canvas 2D context, with polygons, links, and sites drawn as separate paths.

PPhilippe Rivière

77% match

Loading thumbnail…

Bounded Voronoi Tessellation

This interactive visualization demonstrates a bounded Voronoi tessellation, where 100 randomly placed sites partition the SVG canvas into colored polygonal cells. The mouse controls the first site, dynamically updating the diagram as it moves. The code uses d3.voronoi to compute the tessellation and d3.polygonHull to create a convex hull around the sites, which is then expanded outward to bound the diagram. Artificial points are added along this expanded hull to ensure the Voronoi cells are fully enclosed, with the generator sites rendered as circles and the convex hull traced as a pink line.

PPhilippe Rivière

76% match