circles on the map

100%

circles on the map

✓ Published1🌍 Public

Last edited May 6, 2020

Created on May 5, 2020

This example displays global population data for 2018 on a natural Earth projection map, with semi-transparent teal circles sized by population magnitude at each country’s centroid. Countries lacking data appear in pink, while those with values are gray; hovering highlights a country and a tooltip shows its name and formatted population. The visualization uses D3 v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, and TopoJSON for world boundaries, rendering in SVG. Two legends—a color legend and an interactive size legend—communicate the encoding, and zooming is enabled via `d3.zoom`.

AI-generated description

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

Circles on a map

This map visualizes global population data for 2018, overlaying semi-transparent circles on a natural Earth projection. Countries without data appear in light red, while those with values are gray and display proportional circles positioned at their centroids. The visualization uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, plus `topojson` for world geometry. Hovering reveals a tooltip with the region name and formatted population. A size legend explains circle scaling, and zooming is enabled via `d3.zoom`.

AAnShed

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

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018, using a natural Earth projection to map countries. The map uses semi-transparent circles sized by population magnitude, while a color legend and size legend clarify the encoding. Built with D3 v5, the code leverages `geoNaturalEarth1` and `geoPath` for map projection, `scaleSqrt` for circle sizing, and `scaleOrdinal` for the color scheme. Data is sourced from UN population estimates joined with a TopoJSON world atlas. A tooltip on each country provides its name and population count, with missing data highlighted in light red.

MMatthiasVanCampen

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

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

93% match

Loading thumbnail…

Circles on a map

This visualization displays world population data for 2018 using circles positioned at country centroids on a natural Earth projection map. Countries lacking data are tinted pink, while those with values appear gray with teal, semi-transparent circles scaled by square-root transformation. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and interactive zoom via D3's `zoom` event. Population figures are loaded from a CSV via `d3.csv`, joined to TopoJSON country shapes transformed with `topojson.feature`, and a custom legend illustrates circle size.

SSiddhartha Gupta

93% match