Cylindrical Voronoi
The example displays a Voronoi diagram of 300 random sites mapped onto a cylindrical surface, with the left and right edges seamlessly connected. Two vertical lines mark the cylinder’s seam. The code constructs the effect by duplicating each site, shifting copies by the cylinder’s width, and filtering links that connect only shadow copies. It uses the d3-voronoi library with d3.v4 and renders cells, links, and sites on a Canvas 2D context. The first site follows the mouse, which wraps around the cylinder’s edges.
AI-generated descriptionUsing d3-voronoi on a cylinder.
The solution is to have two copies of each site, on the right-hand side and left-hand side of the original.
The n first cells and n first sites are the originals.
We add a shadow property to copies of sites, and filter out links that have only shadow copies.
Apply twice for a Toric Voronoi.
Made by Philippe Rivière from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6675193'>Canvas Voronoi</a>