Circles on a Map
This visualization displays global population by country using proportional circles overlaid on a geographic map, with circle area scaled to 2018 population data. Users can pan and zoom the SVG scene, and hovering over a country reveals its exact population via a tooltip. The code combines d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and d3.zoom for interaction, while loading TopoJSON world boundaries and UN population data. A separate size legend and color legend communicate the visual encoding.