Skip to main content
SimilarExport ZIP
100%

25 - circles on a map - dataviz 2018

✓ Published0🌍 Public
Zzach b.
Last edited Jan 12, 2022
Created on Jan 12, 2022

A world map displays population data from the UN World Population Data, with circles sized by population using a square root scale. Countries are colored green or red to indicate whether 2018 population data exists, with missing data shown in red. The visualization uses D3 v5's `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` to position circles on the map, along with `scaleSqrt` for sizing and zoom functionality. TopoJSON from world-atlas provides country boundaries, while a custom size legend shows population values.

AI-generated description

datraviz 2018 #25 - world population

UN World Population Data
world atlas topojson
unpk: topojson.js

MIT Licensed

Similar vizzes

Loading thumbnail…

25_Circle on a Map

A world map displays population estimates for 2018 using circles sized by a square-root scale, positioned at each country’s geographic centroid via `d3.geoPath` and `geoCentroid`. The choropleth base distinguishes missing data in pink, while hover reveals country names and populations. Built with D3 v5, it layers a zoomable natural Earth projection, a color legend for categorical fills, and a size legend using `d3.scaleSqrt`, with data from UN population estimates and TopoJSON world atlas.

FFMajid-ops
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
91% match
Loading thumbnail…

Circles on a Map

This visualization shows world population data from the UN Population Estimates 2017 medium variant, with each country colored green or red based on population presence and scaled circles representing 2018 population values. The map uses D3’s geoNaturalEarth1 projection with geoPath to render countries, and geoCentroid to position circles at country centers. Circle sizes are determined by a d3.scaleSqrt radius scale, while a color legend is generated using custom update patterns. The visualization supports zooming via d3.zoom and includes hover highlighting on countries. Data is loaded and processed from CSV and TopoJSON sources using d3.csv and topojson.feature.

JJuyeonee
90% 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
90% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, using a natural Earth projection with circles sized by population at each country’s centroid. Countries with missing data appear in light red, while mapped regions are gray and populating circles use a teal fill. The map supports zooming via d3.zoom, and the code employs d3.geoPath for rendering country boundaries, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for the color legend. Data comes from a CSV file joined to TopoJSON world geometries, with both size and color legends implemented as reusable D3 modules.

Ffbudwill
90% match
Loading thumbnail…

Circles on a Map

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.

MMatthiasVanCampen
90% 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
89% match
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
89% match