Voronoi Overlay With Labels and Another Labels

100%

Voronoi Overlay With Labels and Another Labels

✓ Published0🌍 Public

Last edited Nov 9, 2021

Created on Nov 7, 2021

This example displays global COVID-19 death totals over time for multiple countries as log-scale line charts, rendered as SVG in React. A Voronoi overlay, created with `d3.Delaunay.from` and `voronoi.renderCell`, enables mouse hover detection on any data point, highlighting the corresponding country's line and showing a tooltip with the date and death count. A dropdown menu allows selecting a specific country, though the selected line is not visually distinguished in the code. Data comes from the CSSE COVID-19 time series CSV.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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