Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Feb 14, 2020

Created on Feb 14, 2020

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.

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

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

94% match

Loading thumbnail…

Circles on a Map

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.

Jjons288

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population by country in 2018, with circles sized proportionally to population counts overlaid on a natural Earth projection map. The map supports pan and zoom interactions, and hovering over countries reveals population data or missing-data indicators. Built with D3 v5, the example uses `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for circle sizing, while styling and legend components are defined in separate JavaScript modules. Population data comes from a UN estimates CSV, with country boundaries from a TopoJSON world atlas.

GGerryLivermore

94% match

Loading thumbnail…

Circles on a Map

This map visualization displays global population estimates for 2020 using circles sized by population magnitude and overlaid on a geographic projection. Countries are colored green if they have population data, red otherwise. The visualization uses d3.geoNaturalEarth1 for the map projection, d3.geoPath to render country boundaries, and d3.scaleSqrt for circle radii based on population values. Data comes from UN Population Estimates 2017 Medium Variant, processed with TopoJSON and d3.csv, with zoom functionality via d3.zoom.

Nnkohdatavis

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The area of each circle is proportional to the country’s population, with missing data highlighted in red. Users can pan and zoom via d3.zoom, and hover over countries to see exact population figures. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON for world boundaries, with population data joined from a CSV file.

Ggcappadaniel

94% match

Loading thumbnail…

Circles on the Map

This visualization displays the global population distribution for 2018 using sized circles positioned over a natural Earth projection map. Each circle’s radius encodes population magnitude via a square-root scale, with a corresponding size legend and a categorical color legend for missing data. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `zoom`, and `scaleSqrt`, rendering SVG elements. Data comes from a CSV file merged with TopoJSON world atlas geometries, and interaction includes hover tooltips showing region names and formatted population values.

Pprincit

94% match