Fork of Circles on a map

100%

Fork of Circles on a map

✓ Published0🌍 Public

Last edited Apr 9, 2021

Created on Apr 9, 2021

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

93% 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…

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

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

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

91% match