Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Nov 7, 2018

Created on Oct 24, 2018

This map visualizes global population estimates for 2018 by projecting country centroids onto a natural Earth projection. Circles sized proportionally to population via a square-root scale are placed at each centroid, while uniform circles represent countries lacking data. The visualization uses D3.js APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `scaleOrdinal`, rendering with SVG. Population data comes from a CSV of UN estimates, and country shapes from a TopoJSON world atlas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on A Map

This visualization displays global population estimates for 2018 by drawing semi-transparent circles on a natural Earth projection map, with each circle positioned at a country's centroid and sized proportionally to its population. The map also includes a size legend and color legend for reference. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interactivity. Population data comes from a UN dataset, with geographic boundaries from TopoJSON, and all elements are rendered as SVG.

MMuhammad Jarir Kanji

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

This map visualizes global population estimates for 2018 using circles sized by population, overlaid on a natural Earth projection. Country boundaries are drawn as SVG paths, with circles positioned at each country’s geographic centroid and scaled using a square-root scale. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and a custom size legend. Data comes from a UN population estimates CSV joined with a TopoJSON world atlas, processed with the topojson feature API.

YYedrup

95% match

Loading thumbnail…

Circles on a 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.

HHe Jianfeng

95% match

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 by placing semi-transparent blue circles at the geographic centroids of each country on a natural Earth projection. The map supports zooming and panning via d3.zoom, with a size legend showing population values scaled using d3.scaleSqrt. Data combines UN population CSV with TopoJSON world boundaries, processed using d3.csv, d3.json, and topojson.feature. The code uses d3.geoPath, d3.geoCentroid, and d3.geoNaturalEarth1, alongside SVG rendering to show the choropleth-like country fills and legend components.

CCarloGato

95% match

Loading thumbnail…

Circles on a Map

CCarloGato

95% match

Loading thumbnail…

Circles on a Map

This map visualization displays global population by country using semi-transparent circles sized proportionally to 2018 population data from the UN, with a square-root scale for area encoding. The code uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to position circles at country centroids, while d3.zoom enables panning and zooming. Hovering reveals country names and population values via SVG title elements, and a custom size legend explains the circle scaling. Data sources include UN population CSV and TopoJSON world atlas geometry.

Jjesramyep1263

95% match

Loading thumbnail…

Circles on a Map

This map visualizes global population estimates for 2022, with each country represented by a circle sized by its population and positioned at its centroid. The visualization uses D3's `geoNaturalEarth1` projection and `geoPath` to render the map, while `scaleSqrt` scales the circle radii. A size legend and color legend, built with reusable D3 modules, explain the encoding. Population data comes from a UN CSV file, and the map uses TopoJSON from the VisionsCarto World Atlas.

HHasideluxe

95% match