Scatterplot with Voronoi

100%

Scatterplot with Voronoi

✓ Published0🌍 Public

Last edited Feb 2, 2016

Created on Jan 25, 2016

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.

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>

Similar vizzes

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

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

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

73% match

Loading thumbnail…

Transaction Analysis with Time (Hopefully)

This visualization pairs a scatter plot of transaction amounts by category with a time-series view of the same data, enabling linked filtering through interval and point selections. The top chart plots logged amounts against categories, while the bottom chart displays amounts over time from a CSV file of personal financial transactions. Built with Vega-Lite and D3, the charts use cross-filtering to highlight correlated selections, with tooltips showing amount, description, date, credit/debit status, and category.

CChris Fritz

70% match

Loading thumbnail…

Voronoi Labels

This visualization demonstrates a heuristic for labeling scatterplots using Voronoi tessellation. A set of 200 normally distributed points is rendered as small circles, with each point's Voronoi cell drawn as a gray polygon. A orange line connects each point to its cell’s centroid. The code only labels points whose cell area exceeds a threshold (2000), placing the index number at the point’s position. The label’s orientation—top, right, bottom, or left—is determined by the angle between the point and its cell’s centroid, computed using `Math.atan2`. Implemented with D3 v3, it uses `d3.geom.voronoi` with `clipExtent` and `d3.geom.polygon` to generate and analyze cells.

FFrissAnalytics

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

69% match

Loading thumbnail…

Scatter Plot - Credit Card Utilization Patterns by Attrition Status

This interactive D3.js scatter plot visualizes credit card utilization patterns from the Bank Customers Dataset, plotting customer age against total transaction amount. Each circle represents an individual, colored by attrition status—blue for active customers and gray for those who churned. Users can dynamically change the x- and y-axis variables via dropdown menus powered by a custom `menu` module, with smooth transitions updating the axes and points. The visualization uses `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` from D3, rendered as an SVG with hover interactions that highlight individual points and a legend filtering by attrition status.

RRaul Gamez

69% match

Loading thumbnail…

Scatter Plot - Credit Card Utilization Patterns with Brushing

This interactive scatter plot from D3 visualizes credit card utilization patterns from the Bank Customers Dataset, with each circle representing a customer colored by attrition status. Users can switch the x- and y-axes among six attributes through dropdown menus, while hovering over the legend highlights points in each category and brushing a region temporarily emphasizes enclosed points. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.brush, and d3.transition to animate updates.

RRaul Gamez

69% match