Circles on a map

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

Circles on a Map

This visualization displays the global population infected by COVID-19, using proportional circles placed at country centroids on a natural Earth projection. The map shows both countries with and without reported data, colored differently, while a size legend and color legend explain the scaling. The implementation uses d3's geoPath, geoNaturalEarth1, and geoCentroid for map projections, and scaleSqrt for circle sizing, with data loaded from a CSV and TopoJSON atlas.

JJhonfel

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

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.

MAP - CIRCLES

This visualization displays the global spread of a virus through a natural Earth projection map, with circles sized by population at each country's centroid. The D3.js code uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for circle sizing, and loads data from two CSV files to plot origin-destination arcs. The map also includes a population legend generated with `d3.format` and custom zoom functionality via `d3.zoom`.

89% match

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

88% match

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.

88% match

MAP - CIRCLES

This visualization maps the spread of COVID-19 from China to other countries using circles overlaid on a natural Earth projection. The size of each circle encodes population data from the source files, while arcs are attempted from longitude and latitude coordinates parsed from two CSV files. Built with D3 v5, it uses `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom` for interactivity, plus TopoJSON for country boundaries. The SVG rendering includes hover effects and a size legend.