Scatterplot with Voronoi

100%

Scatterplot with Voronoi

✓ Published0🌍 Public

Last edited Aug 23, 2018

Created on Aug 23, 2018

This interactive scatterplot displays life expectancy versus GDP per capita for countries, colored by region. The chart uses a Voronoi grid with invisible large circular regions around each point to expand the hover target, making tooltips easier to trigger. When hovering over a circle’s enlarged area, a tooltip appears with the country’s details. Built with D3 v3 and SVG, the visualization also includes a legend and animated transitions.

AI-generated description

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/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/61cd485e399b6a71d5fb2b1072fbc6c1'>Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot</a>

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

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

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

94% match

Loading thumbnail…

Scatterplot with Voronoi

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.

TThanaporn-sk

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

91% match

Loading thumbnail…

Basic Scatter Plot

This basic scatter plot visualizes the relationship between GDP per capita and life expectancy across countries, with each circle sized by population and colored by region. The data come from the World Wealth & Income Database and the Global Health Observatory. Implemented with D3 v4 and SVG rendering, the chart uses a linear x-axis for income and a linear y-axis for health expectancy. Circles are scaled by population using a square-root scale, and colors encode geographic region. The visualization is based on Curran's Stylized Scatter Plot with Color Legend.

ZZijunXu

83% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between GDP and life expectancy for a synthetic dataset of countries, with points colored by region using a Tableau10 ordinal scale. It loads CSV data with d3.csv and d3.autoType, then renders circles in an SVG container using d3.scaleLinear for both axes and d3.axisBottom/d3.axisLeft for tick marks. The chart includes labeled x and y axes, semi-transparent points, and is built entirely with D3 v7.

LLikhitaMudagereShivaraj@my.unt.edu

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

81% match