Size by population

Population worldmap

This worldmap visualization displays global population estimates for 2018, overlaying semi-transparent circles on each country’s centroid, sized by population using a square-root scale. The map supports zooming and panning, with a color legend and size legend for reference. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `geoCentroid` for circle placement, and `zoom` for interactivity. Population data comes from a UN CSV dataset, merged with country geometries from a TopoJSON world atlas.

Hhxc20060903

Circles on a map

A world map rendered in SVG displays projected population estimates for 2050 as semi-transparent black circles sized by value and positioned at each country’s centroid. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw the map, `d3.scaleSqrt` for proportional circle radii, and `d3.zoom` for panning and zooming. Animated circle transitions appear sequentially, while a static legend from `colorLegend.js` lists population values. Data comes from a CSV joined to TopoJSON country geometries.

Aarieltonglet

Circles on a Map

This visualization displays global population by country using scaled circles on a natural Earth projection map, with circle area proportional to each country's 2018 population. Users can pan and zoom via d3.zoom and hover over countries to see exact population figures through SVG title tooltips. The example uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and topojson for world geometry. Population data is loaded from a CSV file, and countries lacking data appear in red rather than gray.

Circles on a Map

This map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

Circles on a Map

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.

80% match

Circles on a Map

This visualization displays the world’s population by country, with circle area scaled to each nation’s 2018 population, mapped onto a natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath. A square-root scale (d3.scaleSqrt) determines circle radii, while a separate size legend communicates the mapping. Users can pan and zoom via d3.zoom, and hover over countries to reveal a tooltip with the region and population count. The code uses D3 v5, TopoJSON for world geometry, and CSV data from the United Nations, with an SVG rendering approach.

CCrisAbxs

80% match