Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Apr 29, 2020

Created on Apr 27, 2020

A time-series slider animates the spread of COVID-19 cases across a world map. Red circles, sized with `d3.scaleSqrt` according to confirmed case counts for each date, are positioned using the `d3.geoNaturalEarth1` projection. The visualization uses a slider built with `d3.drag` to scrub through dates, updating circle radii and tooltips. Country boundaries and hover states are rendered with `d3.geoPath`, with data loaded from a CSV of confirmed cases.

AI-generated description

Visualizing population by country using circles on a map! The area of each circle corresponds to the population of the country it represents. You can also pan & zoom, and hover over each country for more information.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

Animated circles on a natural Earth projection map visualize COVID-19 confirmed cases and deaths over time, with circle area encoding magnitude. Data is drawn from a temporal CSV and merged with country geometries loaded via TopoJSON. Hovering reveals population figures. Users can pan and zoom, while a color legend distinguishes levels. The visualization uses D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, `zoom`, and transitions.

Iinroadings

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

89% match

Loading thumbnail…

Circles on a Map

This visualization presents daily COVID-19 case data as an animated, zoomable map. Teal circles sized by confirmed cases and red circles for deaths appear over each country, with a date ticker and hover tooltips providing detail. Built with D3.js (v5), it uses `geoPath` and a Natural Earth projection, animating circle radii via `transition()`. Population data comes from a CSV file (`data01.csv`) and country shapes from the VisionsCarto World Atlas TopoJSON.

Iinroadings

89% match

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

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

87% match

Loading thumbnail…

Circles on a map

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.

EElena Dreosti

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

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

86% match