Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
Sszy1900
Last edited May 22, 2020
Created on May 22, 2020
Forked from Circles on a Map

This interactive map visualizes 2018 population data by country, overlaying semi-transparent teal circles on a natural Earth projection. Circle area encodes population magnitude using a square-root scale, while hover effects reveal exact figures and missing data is highlighted in red. Built with D3 v5, the visualization uses `geoPath` for map rendering, `geoCentroid` for positioning circles, and `scaleSqrt` for proportional sizing. Pan and zoom are enabled via D3's zoom functionality, with a size legend explaining the population scale.

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

This visualization displays global population estimates for 2018 as semi-transparent teal circles overlaid on a natural Earth projection map. The map uses a light gray sphere background, with countries colored light gray or pink to indicate missing data. Circle radius encodes population magnitude using a square-root scale, with a legend showing tick marks for population values. The example uses D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `geoCentroid`, loading data from the UN population estimates CSV and a TopoJSON world atlas. Hovering a country reveals its population in a tooltip.

AAjayyy
93% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using scaled circles positioned at country centroids on a natural Earth projection map. Circle area encodes population magnitude, while hovering reveals exact population figures and regional names. The map supports pan and zoom interactions through d3.zoom. Built with d3.geoNaturalEarth1 and d3.geoPath for map rendering, it uses d3.scaleSqrt for circle sizing and d3.scaleOrdinal with a spectral scheme for the categorical color legend. Population data comes from a CSV file processed alongside TopoJSON world boundaries.

EElena Dreosti
93% match
Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display global population data for 2018, with each country represented by a circle whose area is proportional to its population. The map supports pan and zoom interactions, and hovering over a country reveals its population through a tooltip. Built with D3.js, it uses `d3.geoPath` for map rendering, `d3.scaleSqrt` for the size scaling, and custom legends to explain both the color scheme and circle sizes. Population data comes from a CSV file joined to a TopoJSON world atlas.

GGamue-cmd
93% match
Loading thumbnail…

Circles on a map

This map visualizes global population data for 2018, overlaying semi-transparent circles on a natural Earth projection. Countries without data appear in light red, while those with values are gray and display proportional circles positioned at their centroids. The visualization uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, plus `topojson` for world geometry. Hovering reveals a tooltip with the region name and formatted population. A size legend explains circle scaling, and zooming is enabled via `d3.zoom`.

AAnShed
93% match
Loading thumbnail…

Circles on a Map

This visualization displays the 2018 population of countries using circles positioned on a natural Earth projection map. Circle area encodes population magnitude, with colors distinguishing countries that have data from those missing it. A size legend and color legend explain the encoding. Hovering reveals country names and population values, while pan and zoom enable exploration. The code uses d3.geoPath, d3.geoCentroid, d3.scaleSqrt, and d3.zoom, rendering with SVG. Data merges a CSV of population statistics with TopoJSON world geometry (50m resolution) loaded via d3.json and processed with topojson.feature.

Pputrafandy
93% match
Loading thumbnail…

Circles on a Map

This interactive map visualizes global population by country in 2018, using circles whose area scales with population size. Users can pan, zoom, and hover over countries to see population details or a missing-data note. The visualization uses D3 v5, with `d3.geoPath` and the Natural Earth projection to render country outlines, while `d3.scaleSqrt` maps population to circle radii. Interactive zoom is handled via the `d3.zoom` module, and a custom size legend provides scale reference. Data comes from a UN population CSV merged with TopoJSON world atlas geometry.

0007ebey
92% 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
92% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The area of each circle is proportional to the country’s population, with missing data highlighted in red. Users can pan and zoom via d3.zoom, and hover over countries to see exact population figures. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON for world boundaries, with population data joined from a CSV file.

Ggcappadaniel
92% match