Skip to main content
SimilarExport ZIP
100%

Coronav deaths over time by country voronoi overlay

✓ Published0🌍 Public
Ssurikmeetr
Last edited Apr 30, 2021
Created on Apr 29, 2021

This example shows cumulative COVID-19 death totals over time for multiple countries, plotted as small multiples on a single log-scaled chart. The visualization uses a Voronoi overlay to partition the chart area, enabling hover interactions across closely clustered lines. Built with React and D3 v6, it fetches data from the CSSEGISandData COVID-19 GitHub repository, transforms the CSV into per-country time series, and renders SVG paths with `scaleLog`, `scaleTime`, and `line`. The `VoronoiOverlay` component uses `d3.Delaunay` to generate the overlay regions.

AI-generated description

React + D3 to display coronav line chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

This visualization displays cumulative COVID-19 deaths over time for multiple countries as log-scaled line charts, with a Voronoi overlay enabling hover interactions. The React app loads data from a GitHub-hosted CSV and renders SVG paths using d3.line, d3.scaleLog, and d3.scaleTime. The VoronoiOverlay component leverages d3.Delaunay and d3.voronoi to create interactive cells, while custom XAxis and YAxis components use d3.axisBottom and d3.axisLeft. Gridlines and axis labels are styled via CSS tick rules.

Vvmonney
94% match
Loading thumbnail…

Coronavirus Deaths Over Time by Country With Voronoi Overlay

This example displays cumulative COVID-19 deaths over time for multiple countries as a multi-series line chart using a log scale. A Voronoi overlay facilitates mouse interaction by partitioning the chart into regions nearest each data point. The visualization is built with React and D3 v5, using d3-scale for axes and d3-delaunay for the Voronoi diagram. Data comes from the Johns Hopkins Coronavirus dataset, rendered as SVG paths with hover events logging interactions.

DDiavek
94% match
Loading thumbnail…

Coronavirus deaths over time by country with Voronoi Overlay

This chart displays the cumulative COVID-19 death counts over time for multiple countries, using a logarithmic Y-axis to accommodate wide value ranges. A Voronoi overlay, constructed via `d3.Delaunay` and `voronoi.renderCell`, enables intuitive mouse-hover interactions to highlight and emphasize the closest line path. The React-based visualization, rendered as SVG with D3 v7 scales and axes, loads its time-series data from a GitHub-hosted CSV file.

AAndrea Picciau
93% match
Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

A multi-line chart displays cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis to accommodate disparate magnitudes. A Voronoi overlay, computed with `d3.Delaunay`, maps the nearest data point to mouse coordinates, so hovering highlights that country's trajectory in black. The visualization uses React, D3 v5's `scaleTime` and `scaleLog`, and renders SVG paths from the Johns Hopkins CSSE dataset.

Ee-ines
93% match
Loading thumbnail…

Corona Deaths by Country with Voronoi Overlay

This visualization displays cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis to accommodate wide value ranges. The chart employs React and D3 v5’s `scaleTime`, `scaleLog`, and `line` generator to render each country’s trajectory as a distinct path. A Voronoi overlay, built with `d3-delaunay`, partitions the plotting area into cells around every data point, enabling mouse hover detection to identify the nearest country line. Data comes from the Johns Hopkins COVID-19 time-series dataset, processed via `d3.csv` and `timeParse`. The SVG output includes axes with tick marks and gridlines, styled by custom CSS.

Nnexus1058
93% match
Loading thumbnail…

Corona Virus Deaths Over Time By Country With Voronoi Overlay

This visualization displays global cumulative COVID-19 death totals over time for each country, using a logarithmic y-axis to accommodate wide value ranges. A Voronoi overlay, generated with `d3.Delaunay` from the d3-delaunay package, enables smooth hover interaction to highlight any country’s trajectory, even when lines overlap. The React-based chart, built with D3 v5, renders SVG paths for each country’s timeseries, with the active country’s line emphasized in black. Data comes from the CSSEGISandData COVID-19 time series CSV, parsed via `d3.csv` and `timeParse`. Axes and gridlines are drawn using `axisBottom` and `axisLeft`.

KKazushige Okuma
93% match
Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

This example visualizes cumulative coronavirus deaths over time for multiple countries using a log-scaled line chart. A Voronoi overlay, generated with `d3.Delaunay` and `d3.voronoi`, makes each line segment hoverable, highlighting the active country’s path in black. The chart uses `scaleTime` and `scaleLog` for axes, with data from the CSSE COVID-19 time series. React manages the hover state, while SVG renders the paths and overlay.

MMichael Bruno
93% match
Loading thumbnail…

Coronavirus Deaths Over Time by Country with Voronoi Overlay

This visualization displays cumulative coronavirus death totals over time for multiple countries, with a Voronoi overlay that enables smooth hover interactions to highlight individual country lines. The chart uses a logarithmic y-axis to accommodate the wide range of death counts, while gray lines represent all countries and a black line marks the actively hovered one. Built with React and D3 v7, it employs d3-delaunay’s Voronoi diagram to compute pointer proximity, with data sourced from the CSSEGISandData COVID-19 global time series.

SSerind Joshua McCue
93% match