Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Sep 30, 2019

Created on Sep 29, 2019

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection map with semi-transparent teal circles sized by each country’s 2018 population, drawn from UN population estimates and world atlas TopoJSON data. A square-root size scale encodes population values, with a corresponding size legend and an ordinal color legend for missing data. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map geometry, d3.geoCentroid to position circles, and d3.zoom for panning and zooming. Hovering a country reveals a tooltip with its region and formatted population.

MMukund Khandelwal

96% match

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized according to estimated 2018 population data from the UN. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines from TopoJSON, while `d3.scaleSqrt` maps population values to circle radii. A legend with `d3.scaleSqrt` ticks and a color legend for missing data accompany the visualization, which supports zooming via `d3.zoom`.

AAjit Singh

95% match

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized by 2018 population data from the UN. Country boundaries are drawn using `d3.geoPath` and TopoJSON, while missing population values appear as pink regions. A `d3.scaleSqrt` maps population to circle radius, and a custom legend shows the scale. The map supports pan and zoom via `d3.zoom`, with circle positioning computed from `d3.geoCentroid` and projected coordinates.

Sshanmango

95% match

Loading thumbnail…

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

ZZ-Richard

95% match

Loading thumbnail…

Circles on a map

This example uses a natural Earth projection to render a world map with circles sized by 2018 population estimates. The visualization displays countries in two colors, distinguishing those with population data from those without. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to project country boundaries and position circles at country centroids. A d3.scaleSqrt maps population values to circle radii, with a custom size legend and zoom interaction via d3.zoom. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Ssureshreddypr

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 as semi-transparent teal circles overlaid on a natural Earth projection map. The map uses a light gray sphere background, with countries colored light gray or pink to indicate missing data. Circle radius encodes population magnitude using a square-root scale, with a legend showing tick marks for population values. The example uses D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `geoCentroid`, loading data from the UN population estimates CSV and a TopoJSON world atlas. Hovering a country reveals its population in a tooltip.

AAjayyy

93% match

Loading thumbnail…

D3 Circles on a Map

This example visualizes global population estimates for 2018 using semi-transparent circles positioned over a natural Earth projection map. Countries with missing data appear in a different shade, while hover effects highlight individual nations. The visualization loads UN population data from a CSV file and country boundaries from a TopoJSON world atlas, then renders the map using `d3.geoPath` and `d3.geoNaturalEarth1`. Circle sizes are scaled with `d3.scaleSqrt`, positioned via `d3.geoCentroid` and `projection`, and the map supports zooming through `d3.zoom`. A custom legend is drawn using SVG circles and text.

Rrdeichert

93% match

Loading thumbnail…

Circles on a Map

This example visualizes global population estimates for 2018 using circles overlaid on a natural Earth projection map. Countries with missing data appear pink, while populated areas are gray with semi-transparent cyan circles sized by population via d3.scaleSqrt. The visualization includes an interactive size legend with formatted tick values and a color legend. It uses d3.geoPath, d3.geoCentroid, d3.zoom, and d3.scaleOrdinal, rendering with SVG. Population data comes from a UN CSV file joined to TopoJSON world geometry, with tooltips showing country names and population counts.

Ffloresh

93% match