COVID-19 Map (Positive Cases per 100,000 People)

100%

COVID-19 Map (Positive Cases per 100,000 People)

✓ Published1🌍 Public

Last edited Dec 18, 2020

Created on Dec 18, 2020

Forked from COVID-19 Map (Positive Cases)

This map shows the number of positive COVID-19 cases per 100,000 people by U.S. state, using a blue choropleth scale with seven-day averages. A color legend explains the threshold scale, and hovering over a state reveals detailed tooltips with death tolls, test counts, and positivity rates. Built with React and D3 v6, it loads CSV data and TopoJSON state boundaries, projecting them with `d3.geoAlbersUsa` and `d3.geoPath`. A Voronoi overlay from `d3.Delaunay` enables precise hover detection across state borders.

AI-generated description

The colours of the states represent the relative number of COVID-19 cases per 100,000 people during the past 7 days.

Project for STAT5702 by Andy Cho, Andus Kong, and Xuanhao Wu

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases per 100,000 People)

This choropleth maps seven-day average COVID-19 positive cases per 100,000 people across U.S. states, with color encoded via a threshold scale using d3.scaleThreshold and schemeBlues. Hovering a state highlights it in green, while a tooltip reveals additional metrics like death toll and test counts. The visualization uses d3.geoPath with the Albers USA projection, and a VoronoiOverlay enables efficient mouse interaction. Data comes from an external CSV, with state boundaries from topojson, and React manages the component rendering.

MMauricio García Benítez

92% match

Loading thumbnail…

COVID-19 Map (Positive Cases)

This interactive map of the United States visualizes COVID-19 positive cases by state, with fill colors encoding the log-transformed seven-day average of positive tests, ranging from 5 to 11 on a threshold color scale. A voronoi overlay, built with `d3.Delaunay.from` and `voronoi.renderCell`, enables hover interactions, while each state path (rendered with `d3.geoPath` and `geoAlbersUsa`) displays a tooltip with additional metrics including death toll, tests, and positivity rate. The visualization also includes a threshold color legend and uses React for managing the overlay component.

Aandycho97

92% match

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This choropleth map displays the relative number of COVID-19 cases per U.S. state using a log-transformed scale of seven-day average positive test results, colored with d3.scaleThreshold and schemeOrRd. Hovering reveals a tooltip with state-level metrics including deaths, tests, and positivity rates. Built with React and D3 v6, the visualization uses d3.geoPath with a geoAlbersUsa projection, TopoJSON for state boundaries, and a d3.Delaunay-based Voronoi overlay for efficient mouse interaction over irregular shapes. The accompanying color legend is rendered using d3 selections.

MMyNKBISHT

91% match

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This map of the United States shows the log number of positive COVID-19 cases per state, averaged over the past seven days, with darker colors indicating higher case counts. Hovering over a state highlights it in green and reveals a tooltip with additional metrics, including death toll, tests administered, and positivity rate. The visualization is built with React and D3 v6, using `d3.geoPath` with a `geoAlbersUsa` projection to render state boundaries from TopoJSON data. A threshold color scale and a custom color legend encode the case values, while a `VoronoiOverlay` component uses `d3.Delaunay` to improve hover interactivity.

RRamakanth771

90% match

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This choropleth map of the United States uses a logarithmic color scale to show the relative number of COVID-19 cases per state, based on a seven-day average. A Voronoi overlay, built with `d3.Delaunay`, expands each state’s hover target for easier tooltip interaction, displaying details like death tolls, test counts, and positivity rates. The map is rendered with `d3.geoPath` and `geoAlbersUsa`, using TopoJSON state boundaries, while a custom color legend communicates the log-transformed case thresholds. React manages the component state, and all SVG elements are styled with hover effects in CSS.

IIvy Liu

90% match

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

This choropleth map of U.S. states displays the log number of COVID-19 positive cases per day over a seven-day average, using a threshold color scale with a sequential orange-red scheme. The visualization loads CSV data and TopoJSON geography, rendering SVG paths via `d3.geoPath` and `geoAlbersUsa` projection. A React-based `VoronoiOverlay` enables mouse hover interactions, while a custom legend component and appended `<title>` elements provide state-specific statistics like death tolls, test counts, and positivity rates.

Aaruna-rajeswari

89% match

Loading thumbnail…

COVID-19 Map (Test Positivity Rate)

A choropleth map of the United States colors each state by its seven-day COVID-19 test positivity rate, using a threshold scale with a green sequential palette. Hovering a state reveals its name, along with seven-day averages for deaths, positive tests, positive tests per 100,000, total tests, and positivity percentage, shown via appended `title` elements. The map is rendered using `d3.geoPath` with a `geoAlbersUsa` projection, driven by `topojson.feature` on state boundaries from a TopoJSON dataset. The visualization is built with React, and a `VoronoiOverlay` using `d3.Delaunay` enables smooth mouse interactions over the state paths.

Aandycho97

89% match

Loading thumbnail…

Fork of COVID-19 Map (Positive Cases)

A choropleth map of the United States shows the relative number of COVID-19 cases, with state colors mapped to the log of the 7-day average positive test count using `d3.scaleThreshold` and `schemeOrRd`. Hovering a state turns it green, and a tooltip reveals additional 7-day averages for deaths, tests, positivity rate, and per-capita positives. The map is rendered with `d3.geoPath` and `geoAlbersUsa` from TopoJSON data, while a `VoronoiOverlay` using `d3.Delaunay` enables mouse interactions. React manages the overlay component, and a custom color legend displays the threshold scale.

AAndrey Getmanov

89% match