Final Project

100%

✓ Published0🌍 Public

Last edited Sep 13, 2022

Created on Dec 5, 2021

This interactive choropleth map shows cumulative COVID-19 cases per U.S. state as of September 2021, with darker fills representing higher case counts. Clicking a state displays a tooltip with its name, total cases, and total deaths. The visualization loads county-level data from a CSV via `d3.csv`, aggregates it by state using `d3.rollup`, and renders SVG paths from TopoJSON using `d3.geoPath`. Color opacity is scaled proportionally to each state’s case total, with a bivariate legend circle appended on click.

AI-generated description

Link to Video:

https://www.youtube.com/watch?v=p8xSYnUI4MQ

Github Link:

https://github.com/MikePham05/Covid-19-Data-Visualization/blob/main/README.md

MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project

This interactive map displays confirmed COVID-19 deaths and cases by U.S. county, with each state labeled at its geographic centroid. The visualization projects TopoJSON boundary data using `d3.geoPath` and renders state shapes as SVG paths, colored steelblue with white borders and hover states that turn red. County-level CSV data is loaded via `d3.csv` and parsed, though the map currently presents only the state-level geometry rather than county-specific values. The implementation uses React without explicit components, importing utilities directly from D3 v4.

MManh Pham

89% match

Loading thumbnail…

Final Project

This interactive choropleth map displays the worldwide incidence of COVID-19 cases and deaths over time. Users can hover over countries for tooltip details or click to isolate a country, while moving the mouse below the map scrubs through dates from January to May 2020. The visualization uses D3 v5 with `d3.geoNaturalEarth` projections and `d3.geoPath` for rendering the SVG map, with a log-scale color encoding for case counts and a line graph for temporal trends. Data is loaded from external GeoJSON and JSON files.

Pphemmati

83% match

Loading thumbnail…

Untitled

This choropleth map of the United States displays state-level COVID-19 case values with a green color scale, using lighter shades for lower numbers and darker greens for higher ones. The visualization loads CSV data and merges it with GeoJSON state geometries using d3.csv and d3.json, then renders paths with d3.geoPath and the d3.geoAlbersUsa projection. A d3.scaleQuantize maps numeric values to a five-color range, while states lacking data appear gray. The SVG is built with D3 v7 and styled with minimal CSS.

Jjoslinl

82% match

Loading thumbnail…

Map Visualization of COVID-19 Cases in the U.S.

This map visualizes the number of confirmed COVID-19 cases per U.S. state as of late March 2020, using a choropleth where darker shades indicate higher case counts. Hovering reveals the state name, while clicking toggles the display of case numbers directly on each state. The visualization uses D3 v4 with a `geoAlbersUsa` projection and `d3.geoPath` to render SVG state boundaries, and a `scaleLinear` maps case data from CSV files to a color range. Data originates from state health agencies, hospitals, and the CDC via the New York Times.

CChristine

81% match

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

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

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

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

80% match