25_Circle on a Map

100%

25_Circle on a Map

✓ Published0🌍 Public

Last edited Dec 23, 2020

Created on Dec 22, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

25 - circles on a map - dataviz 2018

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.

Zzach b.

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

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

88% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display the population of each country as a circle, where the circle's area is proportional to the country's 2018 population. Users can pan and zoom the map, and hovering over a country reveals its name and population in a tooltip. The D3 code loads data from a UN CSV and a TopoJSON world atlas, computing circle sizes with `d3.scaleSqrt` and rendering the map using `d3.geoPath`. A size legend and a color legend for missing data are also included.

Ddtd-amiele

88% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah

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

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

88% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

KKazushige Okuma

88% match