Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Oct 23, 2020

Created on Oct 23, 2020

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.

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 data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263

97% match

Loading thumbnail…

Circles on a Map

Jjesramyep1263

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

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

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

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

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

96% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles centered on each country, with area encoding population size. The map supports pan and zoom, and hovering reveals a tooltip with the country name and exact population. It uses a natural Earth projection via d3.geoNaturalEarth1, with d3.geoPath for country boundaries and d3.scaleSqrt for circle sizing. A custom size legend and color legend (d3.scaleOrdinal with schemeSpectral) provide context. Data comes from a CSV file merged with world topology from TopoJSON, rendered as SVG. The implementation uses d3.zoom for interaction and d3.geoCentroid to position circles.

KKevinw97

96% match