Skip to main content
SimilarExport ZIP
100%

circles on a map

✓ Published1🌍 Public
Jjlongwellchc
Last edited Sep 19, 2019
Created on Sep 18, 2019

This map uses D3 v5 to display country populations in 2020 as circles overlaid on a geographic projection. The base map is drawn with `d3.geoPath` and a natural Earth projection, while circle radii are scaled using `d3.scaleSqrt` based on population data. Countries lacking population data are filled red. Data comes from a United Nations population CSV joined with TopoJSON world map geometry. An interactive zoom feature is implemented via the `d3.zoom` API.

AI-generated description

This one is just hosed because, I think, the data he had is different than the data I have. not just the values but the layout. some things are not numbers and I can't seem to coorce them unless I want to spend all day on it and I really don't. We'll just chalk it up to this one not being complete and call it that.

// Uncaught (in promise) TypeError: d.properties.2020.replace is not a function

//sizeScale .range is all kinds of hosed //console.log(radiusValue); // // == // d => d.properties['2020'] // (above that): const radiusValue = d => d.properties['2020']; // so I think that has something to do with it. Maybe an update in js?

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a map

This map visualization displays the global population distribution for 2018 using circles sized by population count, placed at each country's geographic centroid over a natural Earth projection. The map uses `d3.geoPath` for rendering country boundaries and `d3.scaleSqrt` for circle sizing, with a legend showing population ranges. Users can zoom and pan using `d3.zoom`. Population data comes from a UN dataset (medium variant estimates), joined with TopoJSON world geometry via `d3.json` and `d3.csv`. A color legend marks missing data countries in red.

Ccornshoots
92% 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
92% match
Loading thumbnail…

Circles on a Map

This interactive map visualizes global population by country in 2018, using circles whose area scales with population size. Users can pan, zoom, and hover over countries to see population details or a missing-data note. The visualization uses D3 v5, with `d3.geoPath` and the Natural Earth projection to render country outlines, while `d3.scaleSqrt` maps population to circle radii. Interactive zoom is handled via the `d3.zoom` module, and a custom size legend provides scale reference. Data comes from a UN population CSV merged with TopoJSON world atlas geometry.

0007ebey
92% 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
92% match
Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display the population of each country as a circle, where the circle's area is proportional to the country's 2018 population. Users can pan and zoom the map, and hovering over a country reveals its name and population in a tooltip. The D3 code loads data from a UN CSV and a TopoJSON world atlas, computing circle sizes with `d3.scaleSqrt` and rendering the map using `d3.geoPath`. A size legend and a color legend for missing data are also included.

Ddtd-amiele
92% match
Loading thumbnail…

Circles on a map

This visualization displays a world map with circles sized by population estimates for 2018, using a square-root scale to encode magnitude. Countries without data appear in red, while those with values are green. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country boundaries, and `d3.geoCentroid` to position circles. A size legend and a color legend are generated with custom D3 functions, while zoom interaction is implemented via `d3.zoom`. Population data comes from a CSV of UN estimates, merged with TopoJSON world atlas geometry.

SSagar Malviya
92% match
Loading thumbnail…

Circles on a map

This map visualization displays global population data for 2018 using circles sized by population magnitude and colored by data availability. The geographic map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, while circle radii are scaled with `scaleSqrt`. The code uses TopoJSON world atlas data merged with CSV population figures. A size legend and a color legend are drawn as SVG elements, and zoom interaction is enabled via `d3.zoom`. Countries missing data appear red, while those with values are green.

NNkwachi Abel
91% match
Loading thumbnail…

Circles on a Map

This visualization maps global population data by country, using circle areas scaled with `d3.scaleSqrt` to represent each nation’s population. The world map is rendered with the Natural Earth projection via `d3.geoPath`, and users can pan and zoom using `d3.zoom`. Hovering over a country reveals its name and population, while circles are positioned at geographic centroids computed with `d3.geoCentroid`. Data comes from a CSV file loaded and processed alongside TopoJSON world geometry.

Iinroadings
91% match