Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published2🌍 Public
Ggcappadaniel
Last edited Jun 3, 2020
Created on Jun 3, 2020
Forked from Circles on a Map

This interactive map uses circles of varying area to represent the population of each country, with data sourced from a UN dataset. Built with D3 v5, the visualization employs a square-root scale to size the circles and a natural Earth projection to render the countries. Users can pan and zoom, and hovering over a country reveals its exact population via a tooltip. The visualization also includes both a size legend and a categorical color legend, all rendered as SVG elements.

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 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
92% 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
91% 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
91% match
Loading thumbnail…

Circles on a Map

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.

Vvaynexie
91% match
Loading thumbnail…

Circles on a Map

This visualization shows global population by country, with circles positioned at each country’s centroid. Circle area encodes population size, while a size legend communicates the scale; hovering reveals exact values or “missing data.” Users can pan and zoom the map. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for area encoding. Country boundaries come from TopoJSON, with population data loaded via CSV.

LLittledevil7
90% match
Loading thumbnail…

Circles on a Map

This visualization uses the D3.js framework to display the global population of each country as a circle on a natural Earth projection map; the circle's area corresponds to the country's 2018 population, using a square-root scale for size. The map supports pan and zoom interactions via `d3.zoom`, and hovering over a country reveals its population and region via a tooltip. Countries lacking data are highlighted in red, and the visualization includes a color legend and a size legend built with SVG, with data sourced from a COVID-19 dataset and a TopoJSON world atlas.

SSarahKiyani
90% 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
90% 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
90% match