Map with circles

100%

Map with circles

✓ Published0🌍 Public

Last edited Jul 20, 2020

Created on Jul 19, 2020

This visualization shows global population estimates for 2018 using a natural Earth projection, with circles sized proportionally to population overlaid on country boundaries. It renders in SVG with animation, combining a world map of countries from World Atlas topojson with UN population data. Using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid, it projects each country and draws scaled circles via d3.scaleSqrt, plus a size legend and zoom interaction via d3.zoom.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Circles on the map

This visualization displays global population estimates for 2018, projected onto a natural Earth map using d3.geoNaturalEarth1 and rendered with d3.geoPath. Circles positioned at country centroids via geoCentroid scale in size with population using d3.scaleSqrt. The map supports panning and zooming through d3.zoom, with tooltips showing population values. Data comes from UN population estimates merged with TopoJSON world atlas geometries, and both size and color legends are built using reusable d3 components.

LLongYuu

94% match

Loading thumbnail…

Circles on A Map

This visualization displays global population estimates for 2018 by drawing semi-transparent circles on a natural Earth projection map, with each circle positioned at a country's centroid and sized proportionally to its population. The map also includes a size legend and color legend for reference. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interactivity. Population data comes from a UN dataset, with geographic boundaries from TopoJSON, and all elements are rendered as SVG.

MMuhammad Jarir Kanji

93% match

Loading thumbnail…

Circles on a Map

This interactive visualization displays global population estimates for 2018 as proportional circles centered on each country, overlaid on a natural Earth projection map. The map uses D3 v5’s `geoPath` and `geoNaturalEarth1`, while circle radii are scaled with `scaleSqrt` based on UN population data. A zoom behavior lets viewers pan and scale the map, and a custom size legend with tick labels explains the scaling. Countries without data appear in a distinct color, and hovering reveals country names and population figures via SVG `<title>` elements.

PPeter S

93% match

Loading thumbnail…

Circles on a Map

This map visualizes global population estimates for 2018 by projecting country centroids onto a natural Earth projection. Circles sized proportionally to population via a square-root scale are placed at each centroid, while uniform circles represent countries lacking data. The visualization uses D3.js APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `scaleOrdinal`, rendering with SVG. Population data comes from a CSV of UN estimates, and country shapes from a TopoJSON world atlas.

Jjons288

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

92% match

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

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 the map

This map visualizes global population estimates for 2018 using circles sized by population, overlaid on a natural Earth projection. Country boundaries are drawn as SVG paths, with circles positioned at each country’s geographic centroid and scaled using a square-root scale. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and a custom size legend. Data comes from a UN population estimates CSV joined with a TopoJSON world atlas, processed with the topojson feature API.

YYedrup

92% match