Circles on a map

100%

Circles on a map

✓ Published1🌍 Public

Last edited Feb 21, 2020

Created on Feb 21, 2020

This example visualizes global population data as semi-transparent circles positioned at the geographic centroid of each country on a Natural Earth map. Countries with missing data appear in light red, while the circles’ radii encode 2018 population figures using a square-root scale. The visualization uses d3.geoPath with the geoNaturalEarth1 projection, d3.zoom for panning and scaling, and d3.scaleSqrt for sizing. Data is loaded from a CSV file and a TopoJSON world atlas, processed via topojson.feature, with a custom legend built using d3.scaleSqrt.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays global population data on a natural Earth projection map. Countries with missing data appear in red, while the rest are gray, and semi-transparent circles sized by population are placed at country centroids. A custom legend shows the population scale. The code uses D3 v5 functions like `geoPath`, `geoCentroid`, `geoNaturalEarth1`, and `scaleSqrt`, along with a custom `sizeLegend` for the bubble chart. Data is loaded from a CSV file and a TopoJSON world atlas.

RRoger Yu-Hsiang Lo

93% 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 visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah

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

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…

Circles on a Map

This example visualizes global population data on an interactive world map, with circular markers sized proportionally to each country’s 2018 population via a square-root scale. Hovering over a country reveals its exact population in a tooltip. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection and rendering, while d3.zoom enables pan and zoom. Circles are positioned using d3.geoCentroid, and data merges CSV population figures with TopoJSON world boundaries using topojson.feature, with legends built through custom colorLegend and sizeLegend modules.

KKarkG

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