Skip to main content
SimilarExport ZIP
100%

Simulated COVID maps in the US and Canada

✓ Published6🌍 Public
AAlan McConchie
Last edited Apr 15, 2021
Created on Apr 13, 2021
Forked from HTML Starter

This interactive map simulates COVID-19 infection rates across the US and Canada. Users toggle between provinces and census divisions in Canada, and states and counties in the US, as well as between proportional and classed circle scaling. The visualization uses D3 v5 with a stereographic projection (`d3.geoStereographic`) and `d3.geoPath` to render the base GeoJSON polygons. Circles representing fake infections are sized using `d3.scaleSqrt` or `d3.scaleThreshold`, drawing on population data from the 2016 Canadian census and 2019 US county estimates.

AI-generated description

Simulated COVID maps, inspired by https://coronavirus.jhu.edu/map.html

For context, see this twitter thread: https://twitter.com/mappingmashups/status/1382446649327296514

2016 Canada Census Division populations from: https://www12.statcan.gc.ca/census-recensement/2011/geo/bound-limit/bound-limit-2016-eng.cfm 2019 US county populations from: https://www.census.gov/data/datasets/time-series/demo/popest/2010s-counties-total.html

Classed legend more or less copied from the Johns Hopkins map:

<img src="https://i.imgur.com/H3KJrMp.png" alt="map legend" width="50%"/>
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Simulated COVID maps in the US and Canada

This interactive map uses D3.js v5 to simulate COVID-19 case counts across the United States and Canada. It plots scaled circles on a stereographic projection, with population data for counties and census divisions from 2016/2019 sources. Users can toggle between proportional and classed circle scaling, and switch subdivision granularity between states/provinces and counties/census divisions. The visualization draws GeoJSON boundaries and centroids via d3.geoPath, with circle radii determined by either d3.scaleSqrt or d3.scaleThreshold.

AAnanyaSamala
91% match
Loading thumbnail…

Fork of Simulated COVID maps in the US and Canada

This example shows simulated COVID-19 case counts across US counties and Canadian census divisions, with boundaries switchable to states and provinces and circle scaling switchable between proportional and classed modes. It uses d3.geoStereographic for projection, d3.geoPath for SVG paths, and d3.scaleThreshold or d3.scaleSqrt for circle radii. Data comes from 2019 US county and 2016 Canadian census population estimates, with populations divided by 100 to create fake infection rates. The classed legend and color scheme follow the Johns Hopkins COVID map.

XXizhiW
90% match
Loading thumbnail…

S'Army

S'Army presents a choropleth map of COVID-19 cases across the United States and Canada, using population data as a proxy for infection rates. The visualization offers interactive controls for switching between provinces/states and census divisions/counties, and for toggling between proportional and classed circle scaling. Built with D3 v5, it uses `d3.geoStereographic` for projection, `d3.geoPath` for rendering geographic boundaries, and `d3.scaleThreshold` for the classed legend, with circle radii styled after the Johns Hopkins COVID map.

SSammy Njoroge
76% match
Loading thumbnail…

S'Army

S'Army draws an unclassed and classed proportional-symbol map of simulated COVID-19 infection counts across North America, using `d3.geoPath` with a stereographic projection for the base map and `d3.scaleSqrt` for proportional symbol sizing. Circles are placed at the centroids of Canadian census divisions and U.S. counties, with populations from the 2016 Canadian Census and the 2019 U.S. Census Bureau estimates. The visualization uses `d3.scaleThreshold` for a classed legend copied from the Johns Hopkins map, and readers can toggle between provinces/census divisions, states/counties, and proportional/classed scaling.

SSammy Njoroge
73% 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
73% match
Loading thumbnail…

Zoomable COVID Vaccine Map

This visualization uses a map of the United States to show the percentage of each state's population fully vaccinated against COVID-19 as of September 4, 2021. The radius of each blue circle is proportional to the state's vaccination rate, with circles positioned over state centroids. The map supports zooming via the `d3.zoom` API, which updates the SVG group's transform. The code builds the map using `d3.geoAlbersUsa` and `d3.geoPath` projections, and renders circles with proportional radii using a `d3.scaleLinear` scale. Data comes from a CSV file of US vaccination statistics, while state boundaries and centroids come from US Atlas GeoJSON and a local JSON file.

PPeter VanNostrand
72% 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
72% match
Loading thumbnail…

Circles on a Map

This visualization displays the global distribution of new COVID-19 cases using proportional circles positioned by country centroids on a natural Earth projection. The circle areas encode population data loaded from CSV files, while tooltips reveal exact values on hover. Built with D3 v5, the visualization uses d3.geoPath for map rendering, d3.geoCentroid for positioning, d3.scaleSqrt for circle sizing, and d3.zoom for pan and zoom interactions. A size legend with d3.ticks communicates the scale, and world atlas TopoJSON provides the country boundaries.

YYIN Wanxuan
72% match