Voronoi colorized spanning tree

100%

Voronoi colorized spanning tree

✓ Published0🌍 Public

Last edited Aug 31, 2016

Created on Aug 31, 2016

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.

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 nearest site that is nearer to the designated root (See <a href='http://bl.ocks.org/Fil/2d10b09c5c50eee6d311ad5272b95a27'>Voronoi spanning tree 2</a>).

We then traverse the tree to paint the cells with nice colors.

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

89% match

Loading thumbnail…

Voronoi Spanning tree - long paths

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.

PPhilippe Rivière

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

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

84% match

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

82% 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…

Voroni & Chromatic Scale

This visualization displays a Voronoi tessellation of 2,000 random points, with each polygon’s fill color mapped through a chromatic scale. The example uses D3 v4.0 with the `d3.voronoi` layout, `d3-scale-chromatic`’s `d3.interpolateRdYlBu` for continuous ColorBrewer coloring, and SVG paths for rendering. On mouseover, all polygon fills recolor based on the Euclidean distance from the hovered point’s coordinates, creating an interactive distance-based heatmap effect.

FFrissAnalytics

78% match

Loading thumbnail…

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière

77% match