Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
AAbdouEnsaj
Last edited Jul 28, 2022
Created on Jul 28, 2022

This example uses a natural Earth projection to visualize population by country with scaled circles. The area of each circle corresponds to the country’s 2018 population, rendered as SVG paths and circles via `d3.geoPath` and `d3.geoNaturalEarth1`. Users can pan and zoom with `d3.zoom`, hover for country details, and read a square-root size legend built from `d3.scaleSqrt`. Data combines UN population CSV values with TopoJSON world geometry through `d3.csv` and `d3.json`.

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 example displays world population estimates for 2018 using circles sized proportionally to population on a Natural Earth map. Country boundaries are rendered with `d3.geoPath` and a `geoNaturalEarth1` projection, while population data is loaded from a UN CSV file and topojson. A `scaleSqrt` size legend and `d3.zoom` for panning are included. Hovering reveals country names and formatted population values via SVG titles.

Jjlspangl
93% 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
93% match
Loading thumbnail…

Circles on a Map

This visualization displays the population of each country as a circle on a natural Earth projection map, with the circle’s area proportional to the 2018 population data. Hovering over a country reveals its name and population, while pan and zoom are enabled. The map is rendered as SVG using `d3.geoPath` with a `geoNaturalEarth1` projection, and population data is joined from a CSV to country geometries using `topojson`. A square-root size scale, implemented with `d3.scaleSqrt`, drives the circle radii, and a legend is built through custom `sizeLegend` and `colorLegend` functions.

Hhannahwilson2
93% match
Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles positioned on a natural Earth projection map, with circle area proportional to 2018 population data loaded from CSV. The map supports panning and zooming via d3.zoom, and hovering over a country reveals its name and population in a tooltip. The visualization uses d3.geoPath and topojson for rendering country boundaries, d3.scaleSqrt for sizing circles, and d3.scaleOrdinal with schemeSpectral for a color legend, all rendered as SVG with d3 v5.

GGiovanniD_
92% match
Loading thumbnail…

Circles on a Map

This example visualizes the population of each country using circle markers overlaid on a natural Earth projection map. The area of each circle is proportional to the country's population, allowing for quick comparison. Users can pan and zoom the map, and hovering over a country reveals its name and population, with missing data shown in red. The implementation uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for sizing, and `d3.zoom` for interaction. Population data comes from a UN dataset, with map outlines from the VisionsCarto World Atlas.

BBrandon Lehr
92% match
Loading thumbnail…

Circles on a Map

This example visualizes the population of each country using circle markers overlaid on a natural Earth projection map. The area of each circle is proportional to the country's population, allowing for quick comparison. Users can pan and zoom the map, and hovering over a country reveals its name and population, with missing data shown in red. The implementation uses `d3.geoPath` and `d3.geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for sizing, and `d3.zoom` for interaction. Population data comes from a UN dataset, with map outlines from the VisionsCarto World Atlas.

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