COVID Visualization

100%

COVID Visualization

✓ Published0🌍 Public

Last edited Dec 9, 2021

Created on Nov 29, 2021

This visualization displays the number of COVID-19 cases per US county using a choropleth map colored with a threshold-based scale. It loads US county boundary data from the `us-atlas` package and New York Times case data from GitHub, merging them via topojson features. The map is rendered as SVG paths using `d3.geoPath` with an Albers projection, and supports zooming via `d3.zoom`. Counties change fill opacity on hover and show case counts in tooltips.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Covid Cases in the US

This visualization shows the geographic spread of confirmed COVID-19 cases across US counties over time, with each county filled according to case counts on a selected date. The map uses an Albers USA projection and renders counties as SVG paths via `d3.geoPath` and TopoJSON. A time slider and play button allow users to animate through the date range, with colors interpolated from a threshold scale using `d3.interpolateReds`. Data comes from a CSV file containing cumulative case counts per county from January to July 2020.

Aashpradhan01123

85% match

Loading thumbnail…

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

This map visualizes confirmed COVID-19 cases across U.S. states, using a color scale to indicate case counts. Hovering reveals a state's name, while clicking toggles the display of case numbers on the map. Built with D3 v4, the visualization uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries from GeoJSON data. Case data comes from state health agencies and the CDC, as aggregated by the New York Times, and loads via `d3.csv`.

CChristine

83% match

Loading thumbnail…

County Population Circles on US Map with D3.js!

This example displays COVID-19 case counts as scaled circles overlaid on a map of US counties. The visualization uses `d3.geoAlbersUsa()` for projection, `d3.geoPath` to render state boundaries from TopoJSON, and `d3.scaleSqrt` to map case counts to circle radii based on data from a CSV file. County centroids, computed with `geoPath.centroid`, position the circles, while a `d3.zoom` handler enables panning and zooming.

Aacrasto-tibco

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

83% match

Loading thumbnail…

County Population Bubble Map for the US with D3.js!

A county population bubble map for the US uses an SVG projection with geoAlbersUsa and d3.geoPath to render state and county boundaries from TopoJSON data. Circles positioned via pathGenerator.centroid are sized by a d3.scaleSqrt mapping COVID-19 case counts from a CSV dataset, with zoom enabled through d3.zoom for interactive exploration.

Aacrasto-tibco

82% match

Loading thumbnail…

US Map with County Centroids using D3.js

A US map displays state boundaries in light green with small red circles marking county centroids, computed via `d3.geoPath` and `d3.geoCentroid` from TopoJSON data. The visualization uses D3 v5 and the `geoAlbersUsa` projection, rendering SVG shapes. County population and COVID-19 case data from a CSV file determines circle sizing, though the visible circles have a fixed radius. Zooming is enabled through `d3.zoom`, and the map is drawn from the us-atlas counties-10m.json dataset.

Aacrasto-tibco

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)

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

79% match