Skip to main content
100%

Scatterplot with Voronoi

✓ Published0🌍 Public
AaiMojica10
Last edited Apr 30, 2018
Created on Apr 30, 2018

This interactive scatterplot uses an invisible D3 Voronoi grid overlaid on the circles to make tooltips easier to trigger. While the tooltips are attached to the circles themselves, the grid determines which circle is active based on the mouse position, improving the interactive experience. The visualization displays customer transactions by type on a log-scaled x-axis (creation date) and linear y-axis (transaction value), with circles colored by transaction type. Clicking a legend item filters the data to show only that transaction type. Hovering over any point triggers a popover with details. Built with D3 v3 and rendered as SVG with animation, the chart is based on a fork of a life expectancy vs. GDP per capita block by nbremer and MattDionis.

AI-generated description

This scatterplot is the final visual of my blog on Using a D3 Voronoi grid to improve a chart's interactive experience in which the tooltip is attached to the circles while the event is triggered by an invisible Voronoi grid that lies over the scatterplot. It also has some other features such as a filtering function when clicking on a region in the legend

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/801c4bb101e86d19a1d0'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/e532e44f1b6edea60ab3'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/7ad3724778ccd896203b'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/5114e2dfdc24143cbd77'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/0477fd73b12753d17194'>Voronoi Scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Voronoi

This scatterplot visualizes customer transactions by type, plotting transaction amount against date. Each circle is colored by transaction type (deposit, receive, spend, withdrawal) and the chart includes a legend for filtering. An invisible Voronoi grid, created with `d3.geom.voronoi`, overlays the plot to capture mouse events, triggering a tooltip on the nearest circle for an improved interactive experience.

MMattDionis
90% match
Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot visualizes customer transactions by type (Deposit, Receive, Spend, Withdrawal) on a log-scaled date axis against a linear transaction amount axis. Each circle is overlaid with a D3 Voronoi grid, which captures mouseover events to trigger the tooltip without needing to hit the small circles directly. The legend supports hover highlighting and click filtering by transaction category, with smooth transitions via D3’s `.style` and `.attr` APIs. Built with D3.v3, SVG rendering, and jQuery for layout.

AAndresAnayaIsaza
90% 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
86% match
Loading thumbnail…

Scatterplot with Voronoi

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.

ZZoeLeBlanc
82% 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
82% 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
82% 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
82% 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
81% match