Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circles on a Map

Public visualization

Viewing a saved revision (read-only)

dd3fba7bbba549549459aa14f685b5f8

Circles on a Map

0 stars0🌍 Public
Yyuyang
Last edited Mar 7, 2020
Created on Mar 7, 2020
Forked from Circles on a Map

This example visualizes global population data for 2018 by placing semi-transparent circles on a natural Earth projection map, where each circle’s area corresponds to a country’s population. Users can pan and zoom the SVG scene, and hover over countries to see their name and exact population in a tooltip. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoCentroid, d3.zoom, d3.scaleSqrt, and d3.scaleOrdinal, with population data loaded from a CSV and country boundaries from TopoJSON. A custom size legend and color legend are implemented using SVG groups.

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.