Skip to main content
SimilarExport ZIP
100%

Fork of Circles on a Map

✓ Published2🌍 Public
AAbdouEnsaj
Last edited Jul 26, 2022
Created on Jul 26, 2022
Forked from Circles on a Map

This visualization displays global population by country using proportional circles overlaid on a natural Earth projection map. Circle area corresponds to each country’s 2018 population, with missing data marked in red. Users can pan and zoom via d3.zoom, while hovering reveals country names and population counts. Built with D3 v5, it uses d3.geoPath, d3.geoCentroid, and d3.scaleSqrt to position and size circles, sourced from a CSV of UN population data and TopoJSON world boundaries.

AI-generated description

Visualizing population by country using circles on a map! The area of each circle corresponds to the population of the country it represents. You can also pan & zoom, and hover over each country for more information.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Circles on a Map

This visualization displays global population by country with proportional circles, where circle area corresponds to 2018 population data from a CSV file merged with TopoJSON world map geometry. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, with d3.zoom enabling pan and zoom interaction. Color and size legends built with custom d3 functions show population magnitudes, while hover tooltips reveal country names and exact values. The SVG rendering applies a natural earth projection with semi-transparent teal circles overlaying gray country boundaries.

AAbdouEnsaj
96% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays world population by country using proportional circles on a natural Earth projection map. The area of each circle corresponds to the country’s 2018 population, with data sourced from a UN CSV and a 50m world atlas TopoJSON. The visualization supports pan and zoom interactions, and hovering over a country reveals its name and population. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and custom sizeLegend and colorLegend components to create legends, with SVG as the rendering format.

Yyouness-cyber
95% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays world population by country using proportional circles on a natural Earth projection map. The area of each circle corresponds to the country’s 2018 population, with data sourced from a UN CSV and a 50m world atlas TopoJSON. The visualization supports pan and zoom interactions, and hovering over a country reveals its name and population. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and custom sizeLegend and colorLegend components to create legends, with SVG as the rendering format.

Yyouness-cyber
95% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population by country with circles positioned at each nation’s centroid, where circle area encodes the 2018 population value. Users can pan and zoom the natural Earth projection, while hovering reveals country names and exact figures. The code uses D3 v5 APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `zoom`. A size legend with formatted tick labels explains the circle scaling, and countries lacking data appear in a distinct red shade. Population data loads from a CSV joined with TopoJSON world geometry, rendered as SVG.

Mmunpro2002
94% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population data for 2018 using proportional circles positioned at country centroids on a natural Earth projection. A square-root scale encodes population values as circle areas, with a color legend indicating missing data. Users can pan and zoom the map, and hover over countries for detailed population figures sourced from UN data. The implementation uses d3.geoPath for map rendering, d3.scaleSqrt for sizing, and d3.zoom for interactive navigation.

Mmoslem-tg
94% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population data for 2018 using proportional circles positioned over a natural Earth projection map. The area of each circle corresponds to a country’s population, and hovering over a country reveals its name and population count, while missing data appears in red. Pan and zoom interactions are enabled via d3.zoom. The map is rendered using SVG with d3.geoPath and topojson for world geometries, while population data is loaded from a CSV file. A size legend built with d3.scaleSqrt explains the circle scaling, and d3.schemeSpectral is used for the color legend.

LLiu2021311512
94% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population data as proportional circles positioned on a world map. Each circle's area corresponds to a country's 2018 population, with hover tooltips revealing specific values. The map supports pan and zoom interactions. Built with D3 v5, it uses `geoNaturalEarth1` for the projection, `geoPath` for rendering country boundaries, and `scaleSqrt` for circle sizing. Population data comes from a CSV dataset merged with TopoJSON world atlas geometries. A size legend and color legend are generated using custom D3 modules.

KKainsli
94% match
Loading thumbnail…

Fork of Circles on a Map

This visualization displays the population of each country in 2018 using green circles overlaid on a geographic map. The area of each circle is proportional to the country’s population, using a square-root scale. Users can pan and zoom the map, and hover over a country to see its name and population, or “Missing data” if unavailable. The map is rendered with SVG using D3 v5, leveraging `geoPath` and `geoNaturalEarth1` for the projection, with data from the UN and a world atlas TopoJSON.

Ppplomith
94% match