Circles on a Map

100%

Circles on a Map

✓ Published1🌍 Public

Last edited Feb 14, 2020

Created on Feb 14, 2020

This visualization displays global population data on a natural Earth projection map. Countries with missing data appear in red, while the rest are gray, and semi-transparent circles sized by population are placed at country centroids. A custom legend shows the population scale. The code uses D3 v5 functions like `geoPath`, `geoCentroid`, `geoNaturalEarth1`, and `scaleSqrt`, along with a custom `sizeLegend` for the bubble chart. Data is loaded from a CSV file and a TopoJSON world atlas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a map

This example visualizes global population data as semi-transparent circles positioned at the geographic centroid of each country on a Natural Earth map. Countries with missing data appear in light red, while the circles’ radii encode 2018 population figures using a square-root scale. The visualization uses d3.geoPath with the geoNaturalEarth1 projection, d3.zoom for panning and scaling, and d3.scaleSqrt for sizing. Data is loaded from a CSV file and a TopoJSON world atlas, processed via topojson.feature, with a custom legend built using d3.scaleSqrt.

PPotikorn

93% match

Loading thumbnail…

Circles on the Map

This visualization displays the global population distribution for 2018 using sized circles positioned over a natural Earth projection map. Each circle’s radius encodes population magnitude via a square-root scale, with a corresponding size legend and a categorical color legend for missing data. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `zoom`, and `scaleSqrt`, rendering SVG elements. Data comes from a CSV file merged with TopoJSON world atlas geometries, and interaction includes hover tooltips showing region names and formatted population values.

Pprincit

93% match

Loading thumbnail…

Circles on a map

This map visualization displays global population data for 2018 using circles sized by population magnitude and colored by data availability. The geographic map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, while circle radii are scaled with `scaleSqrt`. The code uses TopoJSON world atlas data merged with CSV population figures. A size legend and a color legend are drawn as SVG elements, and zoom interaction is enabled via `d3.zoom`. Countries missing data appear red, while those with values are green.

NNkwachi Abel

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, using a natural Earth projection with circles sized by population at each country’s centroid. Countries with missing data appear in light red, while mapped regions are gray and populating circles use a teal fill. The map supports zooming via d3.zoom, and the code employs d3.geoPath for rendering country boundaries, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for the color legend. Data comes from a CSV file joined to TopoJSON world geometries, with both size and color legends implemented as reusable D3 modules.

Ffbudwill

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population by country using circles overlaid on a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see region names and population figures. The implementation uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, while loading data from a CSV file and TopoJSON world atlas. Circle positions derive from projected centroids, and a custom size legend communicates the population scale.

EElena Dreosti

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah

92% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for the year 2018, using sized circles positioned on a natural Earth projection map. Countries are colored green or red to indicate whether they have available data. The circles are scaled using `scaleSqrt()` to map population values to radii. The code uses `geoPath` with `geoNaturalEarth1()` for the map projection, and loads data from a CSV file merged with TopoJSON world atlas features.

Ccheeson

92% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data for 2018 by coloring countries on a natural Earth projection map, with missing data highlighted in red. It uses D3 v5's `geoNaturalEarth1` and `geoPath` to render the map, `scaleSqrt` for proportional sizing, and `scaleOrdinal` with `schemeSpectral` for color encoding. The visualization supports zooming via `d3.zoom`, and tooltips appear on hover showing region names and population counts. Data comes from a CSV joined with TopoJSON world atlas geometry, loaded through `Promise.all` and processed with `topojson.feature`.

TTaheniataallah

92% match