Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Apr 12, 2020

Created on Apr 12, 2020

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.

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

96% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, with each country represented by a circle whose area corresponds to population size. Pan and zoom interactions use d3.zoom. The map is rendered with d3.geoNaturalEarth1 and d3.geoPath, while circle radii are scaled by d3.scaleSqrt. Hovering reveals country names and population counts via SVG title elements. Data comes from a CSV joined with TopoJSON world atlas geometry, and a d3.scaleOrdinal color legend and size legend are included.

NNikhil

95% match

Loading thumbnail…

Circles on a map

This map visualization displays the global population distribution for 2018 using circles sized by population count, placed at each country's geographic centroid over a natural Earth projection. The map uses `d3.geoPath` for rendering country boundaries and `d3.scaleSqrt` for circle sizing, with a legend showing population ranges. Users can zoom and pan using `d3.zoom`. Population data comes from a UN dataset (medium variant estimates), joined with TopoJSON world geometry via `d3.json` and `d3.csv`. A color legend marks missing data countries in red.

Ccornshoots

95% match

Loading thumbnail…

Circles on a Map

This map visualization displays global population by country using semi-transparent circles sized proportionally to 2018 population data from the UN, with a square-root scale for area encoding. The code uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to position circles at country centroids, while d3.zoom enables panning and zooming. Hovering reveals country names and population values via SVG title elements, and a custom size legend explains the circle scaling. Data sources include UN population CSV and TopoJSON world atlas geometry.

Jjesramyep1263

95% 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 maps global population data by country, using circle area to represent population size for 2018. Users can pan and zoom across a natural Earth projection, and hover to reveal exact population counts. The visualization uses d3.geoPath, d3.geoNaturalEarth1, d3.scaleSqrt, and d3.zoom, with data from a CSV joined to TopoJSON world atlas geometry. A size legend and color legend are rendered as SVG, with circles and country borders styled for clarity.

LLeandro Souza

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

94% match