Skip to main content
100%

Toric Voronoi

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Sep 4, 2016
Created on Aug 21, 2016

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.

AI-generated description

Using d3-voronoi on a torus.

The solution is to have height copies of each site, on N, NW, W, etc., using the <a href='http://bl.ocks.org/Fil/4639744e8be5428e7a8e7b3efd9a80dc'>cylinder technique</a> twice.

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.

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>

gpl-3.0 Licensed

Similar vizzes