Circles on a map

100%

Circles on a map

✓ Published0🌍 Public

Last edited Sep 28, 2020

Created on Sep 28, 2020

This visualization displays confirmed COVID-19 cases per country on a world map, using a natural Earth projection from the topojson library. The map shows circles sized by the square root of case numbers, with a legend explaining the scaling. It uses d3.select, d3.geoPath, and d3.scaleSqrt for rendering, and supports interactive zooming. Data is loaded from a CSV file, and the map is rendered as SVG with hover tooltips showing country names and case counts.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Circles on a map

This example visualizes confirmed COVID-19 cases as of August 30, 2020, using scaled circles positioned at country centroids on a natural Earth projection. It renders an SVG world map with d3.geoPath, applies a d3.scaleSqrt for circle radii, and includes interactive pan/zoom via d3.zoom. A color legend uses d3.scaleOrdinal with schemeSpectral, while a separate size legend displays tick marks. Data comes from a CSV time series and TopoJSON world atlas, processed with topojson.feature, with hover tooltips showing country names and case counts.

VVaggelisKlt

95% match

Loading thumbnail…

Circles on a map

This example visualizes COVID-19 case counts by country on a natural Earth projection map, with circles sized by total cases as of May 16, 2020. Using d3.geoNaturalEarth1 and d3.geoPath, it renders country outlines and positions proportional circles via d3.geoCentroid. A d3.scaleSqrt maps case numbers to circle radii, and a custom size legend (with d3.format) explains the scaling. The map supports zooming through d3.zoom, while country data is joined from a CSV file and TopoJSON world-atlas geometry.

Aacb30

93% match

Loading thumbnail…

Circles on a Map

Circles on a Map visualizes COVID-19 confirmed cases by country as proportional circles overlaid on a natural Earth projection. Circle area encodes case counts via a square-root scale, and hovering highlights country boundaries with a tooltip showing the country name and case total. The visualization supports pan and zoom interactions. Built with D3 v5, it uses `d3.geoPath` with TopoJSON world data, `d3.geoCentroid` for circle placement, and a zoom behavior applied to an SVG group. Population data from the UN and case data from a CSV drive the marks.

Iinroadings

93% match

Loading thumbnail…

Circles on a map

This map visualization displays the total confirmed COVID-19 cases per country as of May 16, 2020, using red circles sized proportionally to case counts overlaid on a world map. The geographic boundaries are drawn using `d3.geoPath` with a `geoNaturalEarth1` projection, while circle radii are scaled with `d3.scaleSqrt`. Data comes from a CSV file of country-level COVID-19 statistics, joined to the world-atlas TopoJSON, and is processed via custom `loadAndProcessData` functions. A size legend and color legend are rendered using SVG.

Yyakupermurat

93% match

Loading thumbnail…

Circles on a map

This visualization displays total COVID-19 cases per country as of 16/05/2020, with semi-transparent red circles sized by case count using a square-root scale, overlaid on a natural Earth projection map. Countries lacking data appear in light red, while those with data are light gray. The map supports zooming via d3.zoom, and hovering reveals country names and exact case numbers. It uses topojson for world geography, d3.geoPath for rendering, and d3.scaleSqrt for circle sizing, with unemployment data sourced from a CSV. A custom size legend and color legend provide context.

JJorge Emilio Zapata Godoy

92% match

Loading thumbnail…

Circles on a map

This example displays total COVID-19 cases per country on a natural Earth projection map, using red circles scaled by case count and a legend for reference. It loads data from a GitHub CSV and world-atlas TopoJSON via `d3.csv` and `topojson.feature`, then projects centroids with `d3.geoCentroid` and `d3.geoNaturalEarth1`. The visualization is built with React and rendered as SVG, using `d3.scaleSqrt` for circle sizing, `d3.scaleOrdinal` with `schemeSpectral` for the color legend, and custom `sizeLegend`/`colorLegend` components.

VVaggelisKlt

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

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

91% match