Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Aug 28, 2020

Created on Aug 28, 2020

This visualization displays global population by country using scaled circles positioned at each country’s geographic centroid. Circle area corresponds to population magnitude, with a square-root scale controlling radius. The map supports pan and zoom, and hovering over a country reveals its name and population. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country outlines from TopoJSON, and `d3.zoom` for interaction. Population data is loaded from a CSV file, and a custom size legend displays tick values using `d3.scaleSqrt`.

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 shows global population by country, with circles positioned at each country’s centroid. Circle area encodes population size, while a size legend communicates the scale; hovering reveals exact values or “missing data.” Users can pan and zoom the map. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for area encoding. Country boundaries come from TopoJSON, with population data loaded via CSV.

LLittledevil7

96% match

Loading thumbnail…

Circles on a Map

This visualization displays the population of each country in 2018 using circles overlaid on a natural Earth map, with circle area proportional to population via a square root scale. Users can pan and zoom the map and hover over countries to see exact population values. Built with D3 v5, it uses `d3.geoPath` and `geoNaturalEarth1` for map rendering, `d3.zoom` for interaction, and `d3.scaleSqrt` for the size legend. Population data is loaded from a CSV file and joined to TopoJSON country boundaries.

ZZhenxiang Wang

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

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population by country using scaled circles on a natural Earth projection map, with circle area proportional to each country's 2018 population. Users can pan and zoom via d3.zoom and hover over countries to see exact population figures through SVG title tooltips. The example uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and topojson for world geometry. Population data is loaded from a CSV file, and countries lacking data appear in red rather than gray.

Jjesramyep1263

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

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

94% match

Loading thumbnail…

Circles on a Map

This visualization maps population by country using circles positioned at each country’s centroid, with circle area proportional to 2018 population data loaded from a CSV and joined to TopoJSON world geometry via d3.csv and topojson.feature. d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid project the map, while d3.scaleSqrt sizes the circles. The map supports pan and zoom through d3.zoom, and hovering reveals country names and population values via SVG title elements. A custom size legend and a separate color legend are rendered as SVG groups.

CCurran Kelleher

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population by country in 2018, with circles sized proportionally to population counts overlaid on a natural Earth projection map. The map supports pan and zoom interactions, and hovering over countries reveals population data or missing-data indicators. Built with D3 v5, the example uses `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for circle sizing, while styling and legend components are defined in separate JavaScript modules. Population data comes from a UN estimates CSV, with country boundaries from a TopoJSON world atlas.

GGerryLivermore

94% match