Skip to main content
SimilarExport ZIP
100%

Voronoi Overlay with Labels

✓ Published0🌍 Public
Wwindwaver
Last edited Apr 16, 2021
Created on Apr 16, 2021

A line chart displays global coronavirus deaths over time for multiple countries on a logarithmic y-scale, with a Voronoi overlay enabling mouse-based highlighting of the nearest data point and its corresponding country line. The chart uses React with D3 v5 scales and line generators, while the overlay leverages `d3.Delaunay` and `d3.voronoi` to compute cell regions for hover detection. Data comes from the Johns Hopkins Coronavirus dataset, rendered as SVG paths with axes and gridlines.

AI-generated description

Line chart of Coronavirus cases to date. Data from Johns Hopkins Coronavirus Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Voronoi Overlay with Labels

This line chart displays cumulative global coronavirus deaths over time by country, using a log-scaled y-axis and data from the Johns Hopkins Coronavirus Dataset. Hovering over any point on the chart highlights the corresponding country’s entire line and shows a tooltip with the country name, death count, and date. The implementation uses React with d3.scaleTime, d3.scaleLog, and d3.line for the visualization, while a Voronoi overlay built with d3.Delaunay and d3.delaunay.voronoi captures mouse interactions, rendering cells as SVG paths with pointer-events enabled.

DDiavek
97% match
Loading thumbnail…

Voronoi Overlay w/ Labels

This interactive line chart tracks global coronavirus deaths over time, using a log-scaled y-axis and color-coded country lines. Hovering over any line reveals a tooltip labeled with the country name, exact death count, and date. The visualization uses D3’s `scaleLog` and `scaleTime` for axes, and a Voronoi overlay generated from `d3.Delaunay` to capture mouse position and trigger the active line highlight. Data comes from the Johns Hopkins CSSE COVID-19 dataset.

AAnthony Ynami
96% match
Loading thumbnail…

Coronavirus With Voronoi Overlay and labels

A line chart tracks cumulative global coronavirus deaths over time, with each country rendered as a thin gray path on a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay`, divides the chart into pointer-sensitive cells, so hovering near any line highlights that country’s full trajectory in red and displays a tooltip with its name, death count, and date. The React component uses `useMemo` to cache the Voronoi cells, and data comes from the Johns Hopkins CSSE dataset.

Ssmile2git
95% match
Loading thumbnail…

Voronoi Overlay with Labels

A multi-line chart displays cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis. On hover, a Voronoi overlay from `d3.Delaunay` highlights the nearest data point and activates the corresponding country’s line, displaying a tooltip with the country name, death count, and date. The visualization is built in React with d3 scales, line generators, and axes, rendering to SVG. Data comes from the CSSE COVID-19 time series.

SSerind Joshua McCue
95% match
Loading thumbnail…

Voronoi Overlay with Labels

A multi-line chart displays cumulative COVID-19 deaths over time for multiple countries, with a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay`, captures mouse hover events across the chart area, highlighting the nearest data point and its corresponding line. A tooltip with country name, death count, and date follows the cursor, while the active series is emphasized. Data comes from the CSSE COVID-19 time series, rendered as SVG in React using d3 scales and axes.

MMichael Bruno
94% match
Loading thumbnail…

Voronoi Overlay with Labels

A line chart displays global COVID-19 deaths over time, with each country plotted as a separate line. Hovering over any point triggers a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point and its corresponding country line. A tooltip shows the country name, total deaths, and date. The chart uses `d3.scaleTime` and `d3.scaleLog` for axes, with data sourced from a CSV.

PPeter Krevenets
94% match
Loading thumbnail…

Voronoi Overlay with Labels

This line chart displays global COVID-19 death tolls over time by country using the Johns Hopkins dataset, with a logarithmic y-axis for cumulative deaths. The visualization includes hover interactivity via a Voronoi overlay: when hovering over a region, a tooltip displays the country, death count, and date, while highlighting the corresponding line. The chart is built with React and D3 v6, rendering as SVG and using `d3.Delaunay` from `d3-delaunay` for the overlay and `scaleTime`/`scaleLog` for the axes.

WWolfgang
94% match
Loading thumbnail…

Voronoi Overlay With Labels

This example shows a multi-series line chart of cumulative COVID-19 deaths per country over time. A Voronoi overlay, built with `d3.Delaunay` and `d3.voronoi`, captures mouse hover events across the SVG, highlighting the nearest data point and its corresponding country line. The chart uses a logarithmic Y-axis and a time-scaled X-axis, with a tooltip labeling the active country, death count, and date. Data comes from the CSSE COVID-19 global time-series dataset, rendered using React and D3 v7.

AAlex Stulov
94% match