Scatterplot with Voronoi

100%

Scatterplot with Voronoi

✓ Published0🌍 Public

Last edited Oct 11, 2016

Created on Sep 21, 2016

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.

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>

Similar vizzes

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

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

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

Loading thumbnail…

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu for Mortality

This interactive scatter plot visualizes correlations between life expectancy, infant deaths, and adult mortality across continents. Using React and D3 v5, the visualization includes dropdown menus to switch the x- and y-axis attributes, while continent data drives the ordinal color scale for the legend. Circle sizes encode GDP, and tooltips display life expectancy values. The color legend supports hover interaction with fade effects for highlighting specific continents, and the data originates from a CSV file loaded via d3.csv.

Aaishwarya8615

77% match

Loading thumbnail…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com

76% match

Loading thumbnail…

ScatII

This scatterplot visualizes the relationship between GDP (x-axis) and population (y-axis) for various countries. Each circle represents a country, with tooltips revealing the country name, GDP, population, and calculated GDP per capita. Built with React and D3 v7, the visualization uses `d3.csv` to load data from a GitHub repository, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` for tick labels. It is rendered as an SVG, with data formatted using a custom `numMaker` utility that abbreviates large numbers into billions and millions.

Aadventuresenglish.info@gmail.com

76% match

Loading thumbnail…

Multi Line Plot of Life Expectancy with respect to GDP

This multi-line plot visualizes life expectancy against GDP per capita over 15 years, with each line representing a year and color-coded via `d3.schemeCategory10`. It shows that higher GDP generally correlates with higher life expectancy following a logarithmic trend. The visualization is built using D3 v4 and the Metrics Graphics library, which renders the chart after parsing and nesting the data with `d3.csv` and `d3.nest`. Hovering over a line displays the corresponding year, GDP, and life expectancy. The dataset originates from WHO life expectancy data hosted on GitHub.

Aaishwarya8615

75% match