Scatterplot with Voronoi

100%

Scatterplot with Voronoi

✓ Published0🌍 Public

Last edited Feb 4, 2017

Created on Feb 4, 2017

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.

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

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

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

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…

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

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

72% match

Loading thumbnail…

Transaction Analysis with Time

A financial dashboard combines a temporal scatter plot and a time-series bar chart to analyze personal transactions, with linked selections across both views. The upper chart displays credit/debit amounts over time, while the lower plot correlates category, amount, and date. Built using D3.js v7 and Vega-Lite API within React, it renders via the `vl.vconcat` layout, reads CSV data from a GitHub gist, and includes interactive interval and point selection parameters for coordinated filtering.

CChris Fritz

71% match

Loading thumbnail…

Fork of Project Data Science

This visualization displays a linked view of personal financial transactions, with a scatterplot showing the amount and date of each transaction and a bar chart aggregating the total per transaction type. The displays are linked through interactive selections, where a brush or click on either chart filters the other. The chart uses the vega-lite API to build specifications from data fetched from a CSV file with d3.csv, and employs selectInterval and selectPoint parameters to create the interactive data queries.

CChris Fritz

71% match