Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Dec 30, 2019

Created on Dec 30, 2019

Circles on a Map visualizes global population by country, where the area of each circle corresponds to the 2018 population from UN data. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render world map features, with circles positioned at country centroids using d3.geoCentroid. It supports pan and zoom via d3.zoom, hover tooltips via SVG title elements, and includes a d3.scaleSqrt-based size legend. Countries missing data appear in a distinct pink color.

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…

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.

Jjesramyep1263

94% match

Loading thumbnail…

Circles on a Map

This visualization uses a D3.js geoPath and geoNaturalEarth1 projection to render a world map, overlaid with circles sized by population data from a 2018 UN dataset. Countries with missing data are filled in dark red, while those with data are light beige. The sizing and color legends are implemented via custom modules, and the map supports zooming through D3's zoom event. Hovering over a country reveals its name and population, formatted with D3's format function.

Aannadehtiarova

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

93% match

Loading thumbnail…

Circles on a Map

Circles on a Map visualizes country population for 2018 using sized circles positioned at each country’s centroid on a natural Earth projection. The visualization uses d3.geoPath to render the map and d3.geoCentroid to place the circles, with d3.scaleSqrt mapping population values to circle area. Users can pan and zoom via d3.zoom, and hover over countries to see pop-up tooltips with population details. Data comes from a UN population CSV and TopoJSON world atlas, loaded asynchronously via d3.csv and d3.json. A size legend is built with d3.scaleSqrt’s ticks.

Ttasqon

93% match

Loading thumbnail…

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.

Jjesramyep1263

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

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

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, with each country represented by a circle whose area corresponds to population size. Pan and zoom interactions use d3.zoom. The map is rendered with d3.geoNaturalEarth1 and d3.geoPath, while circle radii are scaled by d3.scaleSqrt. Hovering reveals country names and population counts via SVG title elements. Data comes from a CSV joined with TopoJSON world atlas geometry, and a d3.scaleOrdinal color legend and size legend are included.

NNikhil

93% match