Scatterplot with Voronoi

100%

Scatterplot with Voronoi

✓ Published0🌍 Public

Last edited Apr 30, 2018

Created on Apr 29, 2018

This scatterplot visualizes campaign contributions by candidate, with each circle representing a donation and its position determined by the day the contribution was created (x-axis) and its dollar value (y-axis). A Voronoi grid overlays the plot to enlarge the interactive hover area around each point, making tooltips easier to trigger. The visualization includes a legend where clicking on a candidate filters the data, and it uses an ordinal color scale to distinguish between Deposit and Receive categories. The chart is built with D3 v3 and rendered as SVG with animated transitions.

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

AaiMojica10

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

75% match

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

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

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

70% match

Loading thumbnail…

Scatterplot with Voronoi

This interactive scatterplot visualizes the playing styles of Gomoku players, with each point representing an individual player. The visualization uses a Voronoi tessellation to partition the space around each data point, and hovering over a cell highlights the corresponding player. The plot is constructed with D3 v3 and SVG, and it includes an animation component, likely transitioning between different style dimensions. Data points are positioned using PCA coordinates derived from player statistics, with a legend and controls for exploring the dataset. The project is built with Blockbuilder and released under the MIT license.

ZZenoZero

70% match

Loading thumbnail…

Donations Effects - fixed rect height

This visualization displays donation campaign data across categories, showing the proportion of total actions, COVID-19-related contributions, and other purposes as horizontal stacked bars with fixed rectangle heights. Interactive menu labels allow switching between aggregate totals, COVID-only, and other-purpose views. The bars use SVG patterns and masks to distinguish segments, with tooltips via `<title>` elements. Built with React and D3 v6, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `csv` for loading external data.

Kkragovic

70% match

Loading thumbnail…

Scatterplot with Voronoi

This example visualizes tennis match data as an interactive scatterplot, plotting points per set against shots per set, with each point colored by set score and sized by points per game. The chart uses D3.v3 with SVG and animated transitions to update between per-set and per-game views, while a Voronoi overlay enables hover highlighting of data points. Users can filter by clicking legend items, zoom on selections, and highlight specific matches by searching for player names.

TTennisVisuals

69% match