Skip to main content
SimilarExport ZIP
100%

Voronoi Overlay with Labels

✓ Published0🌍 Public
KKtuzinowski
Last edited Aug 24, 2021
Created on Jul 31, 2021

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.

AI-generated description

This program loads and parses the Johns Hopkins Coronavirus Dataset

MIT Licensed

Similar vizzes

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
96% match
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
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

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 example visualizes cumulative COVID-19 death counts over time for multiple countries using a line chart with a logarithmic y-axis. It renders the paths in SVG and overlays a Voronoi diagram created with `d3.Delaunay` to enable precise mouse hovering on any line segment, highlighting the corresponding country’s path and displaying a tooltip with the country name, death total, and date. Data comes from a CSV file of global time-series deaths, processed with `csv` and `timeParse`. Interactions are managed via React state, while axes are drawn with `axisBottom` and `axisLeft`.

Ee-ines
94% match
Loading thumbnail…

Voronoi Overlay With Labels

This example displays cumulative global COVID-19 deaths over time for multiple countries using a log-scaled line chart. Hovering over any line reveals a tooltip with the country name, death count, and date, while the active line is highlighted. The chart uses React with d3.v5’s `scaleTime`, `scaleLog`, and `line` generators, and implements a Voronoi overlay via `d3.Delaunay.from` and `voronoi.renderCell` to capture mouse events across the SVG. Data comes from the CSSE COVID-19 global time-series dataset, loaded with `d3.csv`.

KKazushige Okuma
94% 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 with labels

An interactive line chart displays cumulative COVID-19 death counts over time for multiple countries, using a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay` and `d3.delaunay.voronoi`, captures mouse hover events across the entire chart area, highlighting the nearest data point and its corresponding country line while displaying a tooltip with the country name, date, and death total. The visualization uses React state for active selection, SVG for rendering, and data sourced from the CSSE COVID-19 time series dataset.

Ccynichole
94% match