Skip to main content
SimilarExport ZIP
100%

Scatterplot with Voronoi

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on May 13, 2016

This interactive scatterplot uses a Voronoi partition to link each data point to its nearest region, improving tooltip responsiveness in dense areas. The visualization plots life expectancy against GDP per capita using World Bank country data, with points colored by region. However, the Voronoi cells cover the entire chart, so the author adds a distance check in the `mousemoved` function to only display tooltips when the cursor is close enough to the actual data point, preventing confusion in sparse corners. The build uses the D3.js v3 library with SVG rendering and a subtle animation.

AI-generated description

This block is based on Step 3 - Voronoi Scatterplot - Tooltip attached to circle from @NadiehBremer

The Voronoi technics (used to improve interactive experience) is something I like. But I'm quite confused when the mouse is far away from points/subjectsOfMatter. In the original example, this situation arises in the viz's top-left and bottom-right corners.

This block attempts to overcome this issue by:

  • still using the Voronoi partition to identifiy the closest point/subjectOfMmatter when they are close to each others
  • and, checking if the distance from the point to the mouse is close enought (max distance checking)

For the sake of illustration, interactive areas appear in (very) light blue. Voronoï cells and interactive zones would not be rendered in the final viz.

The implementation in this block is javascript-based (cf. function 'mousemoved'). Other ways could be:

  • clip each Voronoï cell with a circle shape (cf. this block)
  • produce adequate path for each limited Voronoï cell (adequate path = path corresponding to (voronoï cell INTERSECT max-distance-from-point circle); cf. this block)

Acknowledgments to:

mit Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot displays life expectancy versus GDP per capita for countries, colored by region and sized by GDP. It uses a Voronoi partition to identify the nearest data point to the cursor, but limits the interactive area by checking the distance from the pointer to the point. D3 v3’s `d3.geom.voronoi` and a `clipPath` cut off oversized cells, so tooltips appear only when the mouse is close enough to a circle.

KKcnarf
93% match
Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot visualizes life expectancy versus GDP per capita for countries, colored by region with circle size representing GDP. It enhances mouse interaction by using a custom d3.distanceLimitedVoronoi plugin to compute Voronoi cells, then limiting these cells to a maximum distance from each point so tooltips only appear when the cursor is close enough. The implementation uses D3 v3 with SVG rendering and a log-scaled x-axis for GDP.

KKcnarf
93% match
Loading thumbnail…

Scatterplot with Voronoi

This scatterplot visualizes life expectancy versus GDP per capita for countries, using color to indicate region and circle size for GDP. The chart uses a D3.v4 Voronoi diagram, implemented with the `d3-voronoi` library’s `find(x,y,radius)` method, to detect when the mouse hovers near a data point without relying on an SVG overlay. This allows for efficient, lazy computation of the Voronoi grid and precise tooltip triggering. The interaction is enhanced with a distance limit, so tooltips appear only when the cursor is within a defined proximity of a circle.

PPhilippe Rivière
91% 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
80% match
Loading thumbnail…

Interactividad

This interactive scatter plot displays global health and economic data, plotting life expectancy against GDP per capita, with circle radius encoding population and color distinguishing continents. Built with React and D3.js v7, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleLinear` for y and radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The code implements enter/update/exit logic for SVG circles, enabling dynamic highlighting. Hovering over a circle triggers a custom tooltip showing country, population, GDP, and life expectancy, with other circles dimmed via `d3.selectAll` and opacity styles. Data comes from a remote rosling.json file.

Mmaxthamt
76% match
Loading thumbnail…

d3-voronoi-treemap

The visualization displays global economic output by GDP, showing a treemap that morphs between rectangular and Voronoï layouts. It uses D3.js v4 with the d3-voronoi-treemap plugin, which iteratively partitions space to create weighted Voronoï polygons. Animated transitions between the two layouts are powered by flubber's `fromRect` interpolation, applied via `transition.attrTween` on SVG paths. The data comes from a JSON file of country GDP weights grouped by continent, with each region assigned a distinct color.

KKcnarf
76% 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
75% match
Loading thumbnail…

Multi-Line Voronoi using Voronoi.find()

A multi-line chart of unemployment rates across U.S. metropolitan areas from 2000 to 2013 uses a Voronoi tessellation to handle mouseover interactions. The chart, rendered with D3 v4 and SVG, highlights the data point and city name nearest to the cursor on any line. Unlike earlier versions, the code uses `voronoi.find()` with a search radius to locate the closest site directly, eliminating the need for a hidden SVG overlay for interaction. The Voronoi diagram can optionally be displayed via a checkbox, and the data derives from the U.S. Bureau of Labor Statistics.

PPhilippe Rivière
75% match