Circles on a Map

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

Circles on a Map

This visualization displays global population data for 2018 using circles positioned on a natural Earth projection map. The area of each circle encodes a country’s population, and hovering reveals exact values alongside the country name, while pan and zoom controls allow exploration. The map is rendered as SVG using d3.geoPath with TopoJSON world data, while population values are loaded from a CSV. Circle sizes derive from a d3.scaleSqrt, and a custom legend communicates scaling. The example also includes a color legend component and employs d3.zoom for interactivity.

PPhilRG

Circles on a Map

This example visualizes global population data from 2018 using scaled circles overlaid on a natural Earth projection map. The area of each circle corresponds to a country’s population, while hover tooltips show exact values and region names. The visualization supports pan and zoom via the `d3.zoom` behavior. The map and circles are rendered as SVG, using `d3.geoPath` for geographic outlines, `d3.geoNaturalEarth1` for projection, and `d3.scaleSqrt` for circle sizing. A separate size legend and color legend are generated with custom D3 modules.

AAPIvahnenko

Circles on a Map

This visualization displays global population data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Pputrafandy

Circles on a Map

This example visualizes global population data on an interactive world map, with circular markers sized proportionally to each country’s 2018 population via a square-root scale. Hovering over a country reveals its exact population in a tooltip. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection and rendering, while d3.zoom enables pan and zoom. Circles are positioned using d3.geoCentroid, and data merges CSV population figures with TopoJSON world boundaries using topojson.feature, with legends built through custom colorLegend and sizeLegend modules.

KKarkG

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_

Circles on a Map

This visualization uses a natural Earth projection to display global population data for 2018, with each country represented by a circle whose area is proportional to its population. The map supports pan and zoom interactions, and hovering over a country reveals its population through a tooltip. Built with D3.js, it uses `d3.geoPath` for map rendering, `d3.scaleSqrt` for the size scaling, and custom legends to explain both the color scheme and circle sizes. Population data comes from a CSV file joined to a TopoJSON world atlas.

GGamue-cmd

Circles on a Map

This visualization displays global population data for 2018, with each country represented by a circle whose area corresponds to population size. Pan and zoom interactions use d3.zoom. The map is rendered with d3.geoNaturalEarth1 and d3.geoPath, while circle radii are scaled by d3.scaleSqrt. Hovering reveals country names and population counts via SVG title elements. Data comes from a CSV joined with TopoJSON world atlas geometry, and a d3.scaleOrdinal color legend and size legend are included.

NNikhil