Circles on a Map

100%

Circles on a Map

✓ Published1🌍 Public

Last edited Nov 17, 2020

Created on Nov 17, 2020

This visualization displays the world’s population by country, with circle area scaled to each nation’s 2018 population, mapped onto a natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath. A square-root scale (d3.scaleSqrt) determines circle radii, while a separate size legend communicates the mapping. Users can pan and zoom via d3.zoom, and hover over countries to reveal a tooltip with the region and population count. The code uses D3 v5, TopoJSON for world geometry, and CSV data from the United Nations, with an SVG rendering approach.

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

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 the population of each country as a circle, where the circle's area is proportional to the country's 2018 population. Users can pan and zoom the map, and hovering over a country reveals its name and population in a tooltip. The D3 code loads data from a UN CSV and a TopoJSON world atlas, computing circle sizes with `d3.scaleSqrt` and rendering the map using `d3.geoPath`. A size legend and a color legend for missing data are also included.

Ddtd-amiele

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

Loading thumbnail…

Circles on a Map

This visualization shows world population by country using scaled circles over 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 regional names and exact population figures. The code uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom`, rendering SVG paths for country borders and semi-transparent circles. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Yyakupermurat

94% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection map to display the population of each country for 2018, with the area of each circle proportional to its population. The map supports pan, zoom, and hover interactions for additional details. The code employs d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with d3.scaleSqrt for sizing the circles. Population data comes from a CSV file, while country boundaries are sourced from TopoJSON. Legends for both color and size are rendered using SVG, with hover effects revealing population figures.

CCarloGato

94% match

Loading thumbnail…

Circles on a Map

This map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

Jjesramyep1263

94% match