Circles on a Map

100%

Circles on a Map

✓ Published2🌍 Public

Last edited Mar 26, 2020

Created on Mar 26, 2020

This visualization maps global population data by country, using circle areas scaled with `d3.scaleSqrt` to represent each nation’s population. The world map is rendered with the Natural Earth projection via `d3.geoPath`, and users can pan and zoom using `d3.zoom`. Hovering over a country reveals its name and population, while circles are positioned at geographic centroids computed with `d3.geoCentroid`. Data comes from a CSV file loaded and processed alongside TopoJSON world 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 data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Pputrafandy

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 displays country populations on a natural Earth projection map, using circles sized by population and a color legend. It renders world geography with `d3.geoPath` and `geoNaturalEarth1`, while `scaleSqrt` maps population values to circle radii. The map is interactive through `d3.zoom`, and hover effects highlight countries. Population data comes from a CSV file, merged with topology from a TopoJSON world atlas, and the visualization uses SVG rendering with D3 v5.

OOleg

94% match

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

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

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

93% match

Loading thumbnail…

Circle on a Map

This example visualizes global population data by overlaying semi-transparent circles on a natural Earth projection map. The circles are sized using `d3.scaleSqrt` based on 2018 population figures, and hovering over countries reveals their population via a tooltip. The visualization uses `d3.geoPath` with `geoNaturalEarth1` for map projection, `d3.zoom` for panning and zooming, and includes both a color legend and a size legend built from `d3.scaleOrdinal` and `d3.scaleSqrt`. Data is loaded from a CSV file and TopoJSON world atlas using `d3.csv` and `d3.json`.

Ggabcoderboi

93% match

Loading thumbnail…

Circles on a Map

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

Jjiangxu1298

93% match