Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
HHe Jianfeng
Last edited Apr 15, 2021
Created on Apr 15, 2021
Forked from Choropleth Map

This visualization displays global population estimates for 2018 as proportional circles positioned at country centroids on a natural Earth projection map. Country boundaries are rendered as paths using d3.geoPath, while circle radii scale with population via d3.scaleSqrt. Two legends—a size legend and a color legend—communicate the quantitative mapping, with colors assigned through d3.scaleOrdinal. The map supports zooming through d3.zoom, and data comes from United Nations population estimates loaded as CSV and TopoJSON, processed with topojson.feature.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles positioned at country centroids on a natural Earth projection. The map uses d3.geoPath and d3.geoCentroid to render countries and place scaled symbols, with d3.scaleSqrt determining circle radii. Hovering reveals country names and population values via SVG titles. Pan and zoom are enabled through d3.zoom, while a d3.scaleSqrt-based legend indicates population magnitudes. Data comes from a CSV file of UN population estimates joined with TopoJSON world geometry, rendered as SVG with color coding for missing values.

Bbprokopowicz
96% match
Loading thumbnail…

Circles on a Map

This visualization maps global population by country using proportional circles centered on each nation’s geographic centroid. The area of each circle encodes the 2018 population estimate, with missing data shown in red on a gray map. Users can pan and zoom via d3.zoom, and hover over countries to reveal population values in tooltips. The code uses d3.geoPath, d3.geoNaturalEarth1, and topojson for map rendering, with a d3.scaleSqrt for circle sizing and a custom size legend.

Pputrafandy
95% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263
95% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263
95% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles centered on each country, with area encoding population size. The map supports pan and zoom, and hovering reveals a tooltip with the country name and exact population. It uses a natural Earth projection via d3.geoNaturalEarth1, with d3.geoPath for country boundaries and d3.scaleSqrt for circle sizing. A custom size legend and color legend (d3.scaleOrdinal with schemeSpectral) provide context. Data comes from a CSV file merged with world topology from TopoJSON, rendered as SVG. The implementation uses d3.zoom for interaction and d3.geoCentroid to position circles.

KKevinw97
95% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles positioned at country centroids on a natural Earth projection map, with circle area scaled by population via d3.scaleSqrt. Countries lacking data appear in pink, while those with data are gray, and hovering shows a tooltip with the region name and population. Users can pan and zoom the map using d3.zoom, and a size legend generated with d3.ticks communicates the population scale. The visualization relies on d3.geoPath and d3.geoCentroid for geographic rendering, TopoJSON for world boundaries, and CSV data joined by country code to populate each feature.

RRaymond Li
95% match
Loading thumbnail…

Circles on a map

This map visualizes global population estimates for 2018 using proportional circles overlaid on a geographic projection of the world. The visualization layers semi-transparent teal circles at each country’s centroid, with circle radius scaled by the square root of population via a legend. It employs D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` for map geometry, alongside `scaleSqrt` for sizing and `scaleOrdinal` for color. Data combines UN population CSV estimates with TopoJSON country boundaries, processed through local modules `loadAndProcessData` and `sizeLegend`.

MMauradion
95% match
Loading thumbnail…

Circles on a Map

This visualization shows global population estimates for 2018 as colored circles positioned at the geographic centroid of each country on a natural Earth projection. A size legend encodes population magnitudes, while a color legend maps a categorical scale, with countries lacking data highlighted in a different shade. The code uses d3.geoPath and d3.geoCentroid for map rendering, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for colors. Population data comes from a UN CSV dataset, joined to country geometries from a TopoJSON world atlas. Users can pan and zoom via d3.zoom, with hover tooltips showing region names and formatted population counts.

NNita
95% match