Skip to main content
SimilarExport ZIP
100%

Circles on a map

✓ Published2🌍 Public
ZZ-Richard
Last edited Jun 22, 2020
Created on Jun 21, 2020
Forked from Choropleth Graph

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection map to display the population of each country for 2018, with the area of each circle proportional to its population. The map supports pan, zoom, and hover interactions for additional details. The code employs d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with d3.scaleSqrt for sizing the circles. Population data comes from a CSV file, while country boundaries are sourced from TopoJSON. Legends for both color and size are rendered using SVG, with hover effects revealing population figures.

CCarloGato
95% 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
95% 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
95% 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
95% match
Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection map with semi-transparent teal circles sized by each country’s 2018 population, drawn from UN population estimates and world atlas TopoJSON data. A square-root size scale encodes population values, with a corresponding size legend and an ordinal color legend for missing data. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map geometry, d3.geoCentroid to position circles, and d3.zoom for panning and zooming. Hovering a country reveals a tooltip with its region and formatted population.

MMukund Khandelwal
95% 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
95% 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
95% 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
95% match