Voronoi Labels

100%

Voronoi Labels

✓ Published0🌍 Public

Last edited Feb 26, 2019

Created on Oct 9, 2013

This example demonstrates a technique for labeling points on a map by positioning text labels in the empty spaces between them, using Voronoi diagrams. The visualization computes a Voronoi tessellation of the point locations and then places each label within its corresponding cell, avoiding overlaps. Built with D3.js, it uses `d3.Delaunay` for triangulation, `d3.Voronoi` for the diagram, and a force-directed layout algorithm (`d3.forceSimulation`) to refine label positions. The underlying data comes from a set of U.S. city coordinates, rendered as circles on a projected map.

AI-generated description

Moved to https://observablehq.com/@mbostock/d3-voronoi-labels.

Similar vizzes

Loading thumbnail…

Voronoi Labels in d3v4

This example uses a Voronoi tessellation to place labels in a scatterplot, showing how cell area and centroid direction determine which points get labeled and where. The code generates 200 random points, computes their Voronoi polygons with d3.voronoi, and filters for cells larger than 2000 square pixels. For each qualifying point, it compares the centroid to the point itself, choosing a label orientation among top, right, bottom, or left based on the angle. The visualization renders SVG paths for cell borders and centroid lines, with labels positioned via text anchors and offsets.

PPhilippe Rivière

85% match

Loading thumbnail…

Voronoi Labels

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.

FFrissAnalytics

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

76% match

Loading thumbnail…

Voronoi Tesselation

This example visualizes a Voronoi tessellation of 100 random points within an SVG canvas, with each cell filled by a random HSL color and vertices marked as small circles. Moving the mouse repositions the first vertex, dynamically recomputing the tessellation and updating only the paths whose geometry changed. The code uses the D3 library’s `voronoi` function from the `jit/voronoi.min.js` module, along with SVG path elements and `d3.svg.mouse` for mouse coordinates. The rendering is immediate, without animations or transitions.

Mmbostock

74% match

Loading thumbnail…

D3 voronoi interaction

This example demonstrates how Voronoi diagrams improve hover interaction on a scatterplot by partitioning the chart area into cells around 50 randomly generated points. Clicking the chart reveals the Voronoi overlay, while moving the mouse highlights the nearest data point with a colored ring and displays its properties in a text output. The implementation uses D3 v4’s `d3.voronoi` layout with the `find()` method to locate the closest site, alongside `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Points and axes are rendered as SVG elements within an HTML page.

FFrissAnalytics

74% match

Loading thumbnail…

Voronoi Test (N=2)

The example shows a Voronoi diagram computed from two fixed points, with each cell and its corresponding point circle filled using the same color from `d3.scale.category10()`. Using d3.v3 and SVG, the code applies `d3.geom.voronoi` to generate the cell polygons, then renders them as `path` elements with a hover effect that increases fill opacity. The circles are positioned via `transform` translations, and both layers receive black strokes from the shared CSS rule.

Mmbostock

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

73% match

Loading thumbnail…

Label Filtering Algorithm Prototype

This interactive prototype demonstrates a label placement algorithm for maps, rendering a world map with city labels sized by population and color-coded population density contours. The visualization uses D3.js for map projection with `geoNaturalEarth1`, data loading, and zoom interactions, while `rbush` implements spatial indexing to detect overlapping labels. City data comes from a reduced world cities CSV file, and geographical boundaries are drawn from TopoJSON world atlas data. The prototype filters cities by a population threshold and iteratively adjusts label positions to minimize collisions against the computed bounding boxes from SVG text elements.

CCurran Kelleher

73% match