Fork of Fork of Sized Points on a Map

100%

Fork of Fork of Sized Points on a Map

✓ Published0🌍 Public

Last edited Jul 17, 2021

Created on Jul 16, 2021

Forked from Fork of Sized Points on a Map

This visualization displays global cumulative COVID-19 cases as semi-transparent red circles sized by total cases on a natural Earth projection. Country boundaries, graticules, and land masses are rendered using d3.geoNaturalEarth1, d3.geoPath, and TopoJSON data from World Atlas. City-level COVID data is loaded from Our World in Data and merged with country properties. React manages component state while d3.scaleSqrt maps case counts to circle radii, with d3.csv fetching tabular data and d3.json retrieving the TopoJSON topology.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sized Points on a Map

This example displays a natural Earth projection world map with semi-transparent red circles sized by total COVID-19 cases for cities with populations above 50,000. The visualization uses React with D3 v5, leveraging `geoNaturalEarth1` and `geoPath` for map rendering, `scaleSqrt` for proportional circle sizing, and `topojson` for country boundaries. Country data is enriched with COVID statistics from a CSV file, while tooltips reveal exact case counts. The map includes graticules and country borders styled through CSS.

Aamanoakane

95% match

Loading thumbnail…

Fork of Circles on a map

This visualization displays total COVID-19 cases by country as of August 30, 2020, using red circles sized with d3.scaleSqrt and positioned via d3.geoCentroid and d3.geoNaturalEarth1 projection. The map employs d3.geoPath for country outlines and includes interactive zoom via d3.zoom. A color legend and size legend are rendered as SVG components using React, with data loaded from a CSV time series and TopoJSON world atlas. Hovering reveals country names and case counts through SVG title elements.

JJean David

90% match

Loading thumbnail…

Sized Points on a Map

A world map displays COVID-19 cumulative cases for cities with populations over 50,000, using sized circles where radius encodes case count via a square-root scale. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render country boundaries, graticules, and city points as SVG circles. Data comes from the World Health Organization via a CSV file, with country shapes from World Atlas TopoJSON.

Ggcappadaniel

88% match

Loading thumbnail…

Fork of Circles on a map

This example displays the total COVID-19 cases per country as of August 30, 2020, using circles sized by a d3.scaleSqrt on a world map. The map is rendered with d3.geoPath and a geoNaturalEarth1 projection, while country boundaries come from TopoJSON world-atlas data. Hovering highlights countries, and a size legend with a color legend—built via custom legend components—explains the scaling. The visualization supports zooming and panning through d3.zoom, with SVG circles positioned using d3.geoCentroid and the projection.

TTacue

88% match

Loading thumbnail…

Circles on a map

This example visualizes the global spread of COVID-19 cases on a date in August 2020, plotting semi-transparent red circles on a natural Earth projection map. Circle size encodes case counts using a square-root scale, while hover tooltips show country names and totals. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for navigation, with TopoJSON world data and CSV time-series data from a COVID-19 repository. Custom legends display color and size scales via `d3.scaleOrdinal` and `d3.scaleSqrt`.

VVaggelisKlt

87% match

Loading thumbnail…

Fork of Covid19 world map

This map visualizes cumulative COVID-19 cases per country as of June 6, 2021, using circle size to encode case counts over a natural Earth projection. Missing data appears in red, while countries with data are gray. The visualization loads spatial boundaries from TopoJSON and joins them with case counts from a CSV using `d3.csv` and `d3.json`. It employs `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, and `d3.scaleSqrt` for proportional symbol sizing, with zoom via `d3.zoom` and interactive tooltips.

Aaruna-rajeswari

86% match

Loading thumbnail…

Fork of Covid-19 confirmed cases

This visualization displays global COVID-19 confirmed cases and deaths on a world map, using a spectral color scale to represent case counts per country. Built with React and rendered as SVG, it employs d3.geoNaturalEarth1 and d3.geoPath to project geographic boundaries from world-atlas TopoJSON, while loading case data from a TSV file. A custom color legend with circles and text labels clarifies the scale, and hovering over a country highlights it in red and shows a tooltip with its name, case count, and death toll. The map supports zooming through d3.zoom, and the color scale uses d3.scaleOrdinal with d3.schemeSpectral.

Bbhargav83

86% match

Loading thumbnail…

Circles on a map

This visualization displays the global distribution of total COVID-19 cases as of August 30, 2020, using proportional red circles overlaid on a natural Earth projection map. The map is rendered with SVG, using d3.geoPath for country outlines and d3.geoCentroid to position each circular marker. Circle radii are scaled with d3.scaleSqrt, while a color legend uses d3.scaleOrdinal with a spectral scheme to categorize data. Interactive zooming is enabled through the d3.zoom module, and data is loaded from a CSV file and TopoJSON world atlas using d3.csv and topojson.feature.

VVaggelisKlt

86% match