Circles on a map

100%

Circles on a map

✓ Published0🌍 Public

Last edited Jan 15, 2021

Created on Jan 15, 2021

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

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Circles on a Map

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.

KKazushige Okuma

95% match

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

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

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

93% match

Loading thumbnail…

Circles on Map

This example displays a world map with circles positioned at the centroids of countries, sized to reflect their 2018 population estimates. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic boundaries with `d3.geoPath`, while circle radii are scaled with `d3.scaleSqrt`. Populated countries appear with teal circles, and gray or pink fills indicate data availability. The visualization loads population data from a CSV and country geometries from TopoJSON, and supports zooming through `d3.zoom`. Hovering reveals a tooltip with the region name and population count.

Aankita1mit

93% match

Loading thumbnail…

Circles on a Map

This visualization displays a world map with semitransparent circles overlaid on each country, sized proportionally to population data from 2018. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath, while circle sizes are scaled with d3.scaleSqrt. Zooming is enabled via d3.zoom. The code includes color and size legends built with reusable functions, and loads data from a CSV and TopoJSON world atlas using d3.csv and topojson.feature.

NNeepaB

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

93% match