Line Chart with Multiple Lines by Country With Voronoi Overlay

100%

Line Chart with Multiple Lines by Country With Voronoi Overlay

✓ Published1🌍 Public

Last edited Dec 18, 2022

Created on Dec 17, 2022

Forked from Line Chart with Multiple Lines by Country

This multi-line chart displays cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis. A Voronoi overlay, built with `d3.Delaunay.from` and `voronoi.renderCell`, partitions the chart area into cells; hovering over any cell highlights the corresponding country’s line in black. The visualization, rendered in SVG via React, uses D3’s `scaleTime` and `scaleLog` to map data from the CSSE global time-series CSV, with axes generated by `axisBottom` and `axisLeft`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart With Voronoi Overlay With Labels

This chart displays cumulative COVID-19 deaths over time for multiple countries, using a line chart where hovering over any point highlights the corresponding country's entire trajectory and displays a tooltip with the country name, death count, and date. The implementation uses React with D3 v7 scales, line generators, and axes, while a Voronoi overlay built with `d3.Delaunay` captures mouse events across the entire plot area for precise hover detection. Data comes from the CSSEGISandData COVID-19 time series dataset, with the active line emphasized in black and labeled via SVG text elements.

OOleg Zhernovoy

93% match

Loading thumbnail…

Coronavirus Chart with Multiple Lines by Country with Voronoi Overlay

A multi-line chart tracks cumulative global COVID-19 deaths over time by country, with a logarithmic y-axis filtering out countries below 10,000 fatalities. Hovering activates a Voronoi overlay, constructed with `d3.Delaunay`, to highlight the nearest line and display a tooltip with the exact date and death count. The React-based SVG visualization uses D3 scales (`scaleTime`, `scaleLog`), axes, and line generators, with data sourced from the CSSE COVID-19 time series on GitHub.

KK3zter

93% match

Loading thumbnail…

Coronavirus Multiple Lines with Voronoi Overlay

The chart displays global cumulative COVID-19 death totals over time, with each country represented as a separate line on a log-scaled y-axis and a time-scaled x-axis. It uses D3.js v6 within a React component, constructing SVG paths via `d3.line` and rendering axes through `d3.axisBottom` and `d3.axisLeft`. A Voronoi overlay, built with `d3.Delaunay`, enables hover interactions: moving the mouse over a cell highlights the corresponding country's line in black, making it easy to identify individual series in dense clusters. Data comes from the CSSE at Johns Hopkins.

AAndre J Denais

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

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

92% match

Loading thumbnail…

Multiple Colored Lines With Voronoi Overlay

This example visualizes global COVID-19 deaths over time with multiple colored lines, one per country, on a log-scaled y-axis. Hovering near any line highlights that country’s full path in black, using a `d3.Delaunay` Voronoi overlay to capture mouse proximity. The chart is built with React and renders SVG, using `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for the axis and line generation. Data comes from the CSSEGISandData COVID-19 time-series CSV, parsed with `d3.csv` and `timeParse`, showing roughly twenty countries.

AAlex Stulov

92% match

Loading thumbnail…

Coronavirus Line Chart with Voronoi Overlay

A line chart displays global coronavirus death totals over time for multiple countries, with each country shown as a gray line. Hovering over the plot reveals a highlighted black path for the selected country. The visualization uses d3.scaleTime and d3.scaleLog for axes, d3.line for path generation, and a d3.Delaunay-based Voronoi overlay with transparent cells to capture mouse events and trigger country highlighting. Data comes from the CSSEGISandData COVID-19 time series CSV, rendered as SVG with React.

BBlake McCarty

91% match