Skip to main content
SimilarExport ZIP
100%

VoronoiOverlay retry

✓ Published1🌍 Public
MMinwoo Pak
Last edited Aug 8, 2021
Created on Aug 8, 2021

This line chart displays cumulative COVID-19 death totals for the top 20 countries over time, using a logarithmic y-axis. A Voronoi overlay, built with d3.Delaunay, enables hover detection on the closest data point, highlighting the corresponding country’s full time series in black. The visualization uses React for component structure, D3 scales and axes for rendering, and SVG for output. Data comes from the CSSEGISandData COVID-19 global time series CSV.

AI-generated description

Dataviz 2020_Ep10 - 6. Face Part 6 - Compartmentalizing Complexity

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% 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
92% 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
91% 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
91% match
Loading thumbnail…

Dataviz 2020_Ep55 - 47. VoronoiOverlay with Labels

This interactive line chart visualizes global COVID-19 death trends for 20 countries using a logarithmic y-axis over time. A Voronoi overlay, generated with `d3.Delaunay`, enables precise hover detection on the chart’s multi-line data, highlighting the nearest point and displaying a tooltip with the country name, death count, and date. The active series is emphasized in black, while the underlying SVG lines remain gray. Data originates from the CSSE COVID-19 time series dataset, rendered in React with D3 scales and axes.

MMinwoo Pak
91% 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
90% 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
90% match
Loading thumbnail…

Country Coronavirus Deaths Over Time With Voronoi Overlay and Labels

This line chart displays cumulative COVID-19 death counts over time for various countries, using a logarithmic y-axis to accommodate wide value ranges. A Voronoi overlay, built with `d3.Delaunay`, enables interactive hover detection, highlighting the nearest data point and displaying a tooltip with the country name, death total, and date. The visualization is rendered as an SVG using React and D3 v5, with the data sourced from the John Hopkins Coronavirus Dataset.

CChris Briggs
90% match