Scatterplot with Voronoi

100%

Scatterplot with Voronoi

✓ Published0🌍 Public

Last edited Jul 31, 2017

Created on Jul 31, 2017

This interactive scatterplot maps life expectancy against GDP per capita for countries, colored by region and sized by total GDP. It uses a Voronoi tessellation to expand the hover target for each point, so tooltips appear when the mouse is near a circle, not just directly over it. Built with D3 v4 and React, the visualization leverages `d3.voronoi.find(x, y, radius)` for efficient neighbor lookup and displays tooltips via Bootstrap popovers. The data comes from the World Bank.

AI-generated description

This is a D3.v4 port by Philippe Rivière of <a href='http://bl.ocks.org/nbremer/'>Nadieh Bremer</a>'s block: <a href='http://bl.ocks.org/nbremer/61cd485e399b6a71d5fb2b1072fbc6c1'>Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot</a>.

In addition, we use d3.voronoi.find(x,y,radius) to locate the point, instead of relying on a SVG overlay of clipped circles.

This gives:

lazy computation of the Voronoi
other objects are allowed capture the mouse before svg.

------ 8X --------

Nadieh:

This scatterplot is part of the extension of my blog on Using a D3 Voronoi grid to improve a chart's interactive experience. After writing that blog Franck Lebeau came with another version which uses large circles to define the tooltip region. I thought this was a great idea! But I made this variation on his code, because I felt that the extra code used in this example (versus the previous version 4) is more in line with the rest of the code.

The tooltip now reacts when you hover over an invisible large circular region around each circle.

You can find all of the steps here

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/7d4ac8a6c259e3d4329c54c4f1abed34'>Step 6 - d3.v4 [UNLISTED]</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/f49b5cf943a0210212994aa5860ac4a8'>Nadieh Bremer's Scatterplot with Voronoi - ported to d3.v4, and no SVG overlay</a>

Similar vizzes

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

93% match

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 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.

KKcnarf

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

83% match

Loading thumbnail…

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

A scatter plot of 2007 Gapminder data shows life expectancy against GDP per capita, with circle size encoding population and color encoding continent. Hovering over a point reveals a tooltip with its country name, GDP, and life expectancy. The visualization uses D3 scales and an SVG Voronoi overlay to detect mouse position and trigger tooltips. Voronoi cells are computed with `Delaunay.from` and `voronoi.renderCell`.

SSarah C Gall

79% match

Loading thumbnail…

Fork of #Utrecht2024 TASK: Voronoi and Tooltips

This scatterplot from the Gapminder dataset shows life expectancy versus GDP per capita for countries in 2007, with circle size encoding population and color encoding continent. It uses Svelte and renders SVG via D3's `scaleLinear`, `scaleSqrt`, and `scaleOrdinal`. A Voronoi overlay, computed with `Delaunay.from` and `voronoi.renderCell`, captures mouse movement to trigger tooltips displaying country name and life expectancy.

Kk.hurskaya@gmail.com

79% match

Loading thumbnail…

Sara Maria - Fork TASK: Voronoi and Tooltips

This scatterplot shows the relationship between GDP per capita and life expectancy for countries in 2007, with circle size encoding population and color encoding continent. Built with Svelte and d3, it uses a Voronoi diagram from `d3.Delaunay` to create invisible hover regions over each point, triggering a tooltip that displays the country name and population radius.

Ssam.jumphouses@gmail.com

79% match