Skip to main content
SimilarExport ZIP
100%

Voronoi Overlay with Labels

✓ Published0🌍 Public
WWolfgang
Last edited Apr 12, 2021
Created on Apr 11, 2021

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.

AI-generated description

This chart uses React & D3 to visualize the 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
96% match
Loading thumbnail…

Voronoi Overlay with Labels

This example displays cumulative COVID-19 death totals over time for countries with more than 10,000 deaths, using the Johns Hopkins Coronavirus Dataset. A log-scaled line chart renders each country’s trajectory, with a Voronoi overlay from `d3.Delaunay` enabling hover interactions that highlight the nearest data point and show a labeled tooltip with the country name and death count. The chart is built with React and SVG, using D3 scales (`scaleTime`, `scaleLog`) and axis generators to structure the visualization.

KKtuzinowski
96% 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
95% match
Loading thumbnail…

Voronoi Overlay with Labels

This chart displays cumulative COVID-19 death counts over time for multiple countries, with a logarithmic y-axis. A Voronoi overlay (computed via `d3.Delaunay.from` and `voronoi.renderCell`) enables hover detection on any data point, highlighting the corresponding country's line and showing a tooltip with the exact date, death count, and country name. The SVG renders reactively, using `d3.scaleLog`, `d3.scaleTime`, and the `d3.line` generator, with data from the CSSE COVID-19 time series.

AAndrea Picciau
95% match
Loading thumbnail…

Voronoi Overlay with Labels

This visualization charts global COVID-19 death tolls over time, with each country's cumulative deaths represented as a line on a log-scaled Y-axis. It uses a Voronoi overlay generated via `d3.Delaunay` and `voronoi.renderCell` to partition the chart space, making each line segment easily hoverable. When a user hovers over a point, the corresponding country's line is highlighted in black, and a label appears showing the country name, total deaths, and date. The interactive labels are implemented in React with SVG rendering, and the data is loaded from the CSSEGISandData COVID-19 global time series CSV.

KKevin McMorrow
94% match
Loading thumbnail…

Voronoi Overlay with Labels

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.

Wwindwaver
94% 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
94% match
Loading thumbnail…

Voronoi Overlay with Labels

This example displays global COVID-19 cumulative death totals over time as multiple line charts, one per country, on a logarithmic y-axis. Hovering over any point highlights that country’s entire line and shows a tooltip with the country name, death count, and date. The interactive hover detection uses a Voronoi overlay generated from the data points via `d3.Delaunay` and `d3.voronoi`, mapping mouse events to the nearest point. The line chart is built with React and rendered as SVG, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line`, with data sourced from the CSSEGISandData COVID-19 time series CSV.

TThomas Cormican
94% match