Skip to main content
100%

Voronoi Labels

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 30, 2018
Created on Jun 1, 2017

This visualization demonstrates a heuristic for labeling scatterplots using Voronoi tessellation. A set of 200 normally distributed points is rendered as small circles, with each point's Voronoi cell drawn as a gray polygon. A orange line connects each point to its cell’s centroid. The code only labels points whose cell area exceeds a threshold (2000), placing the index number at the point’s position. The label’s orientation—top, right, bottom, or left—is determined by the angle between the point and its cell’s centroid, computed using `Math.atan2`. Implemented with D3 v3, it uses `d3.geom.voronoi` with `clipExtent` and `d3.geom.polygon` to generate and analyze cells.

AI-generated description

This example demonstrates the use of a Voronoi tessellation as a simple heuristic for labeling scatterplots. The area of the Voronoi cell associated with each point in the scatterplot is used to determine which points are labeled: points with large cells likely have enough room to accommodate labels. Then, the vector between the point and the associated cell’s centroid (shown in orange) is used to choose between four label orientations: top, right, bottom and left.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6909318'>Voronoi Labels</a>

gpl-3.0 Licensed

Similar vizzes