Skip to main content
100%

Scatterplot with Voronoi

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on Jun 21, 2016

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.

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. Interactive zones would not be rendered in the final viz.

The implementation in this block uses a plugin I made (see d3-distanceLimitedVoronoi Github project) that computes the adequate interactive area around each point. The adequate path is: voronoï-cell INTERSECT max-distance-from-point. Others ways could be:

  • clip each Voronoï cell with a circle shape (cf. this block)
  • use JS to determine if the pointer is close enought to display the tooltip (cf. this block)

This third implementation of distance-limited voronoi cell is simpler than the 2 others because:

  • compared to the clipPath way, it doesn't requires extra clipPathes (dedicated definition, and bindings to each cell)
  • compared to the JS-based way, mouse interaction is easier (only mouseenter and mouseout, no mousemoved), and less intensive (no mousemove); nevertheless, it comes with the cost of computing the adequate path of each cell.

Acknowledgments to:

gpl-3.0 Licensed

Similar vizzes