Circles on a Map

100%

Circles on a Map

✓ Published1🌍 Public

Last edited May 31, 2020

Created on May 17, 2020

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.

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 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

96% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using scaled circles positioned at country centroids on a natural Earth projection map. Circle area encodes population magnitude, while hovering reveals exact population figures and regional names. The map supports pan and zoom interactions through d3.zoom. Built with d3.geoNaturalEarth1 and d3.geoPath for map rendering, it uses d3.scaleSqrt for circle sizing and d3.scaleOrdinal with a spectral scheme for the categorical color legend. Population data comes from a CSV file processed alongside TopoJSON world boundaries.

EElena Dreosti

96% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The area of each circle is proportional to the country’s population, with missing data highlighted in red. Users can pan and zoom via d3.zoom, and hover over countries to see exact population figures. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON for world boundaries, with population data joined from a CSV file.

Ggcappadaniel

95% match

Loading thumbnail…

Circles on a Map

This map visualization displays global population data for 2018, using scaled circles positioned at country centroids to represent population size. A legend with circles and labels explains the size-to-population mapping, while hovering over a country reveals its name and exact population. The visualization is built with d3.js, using d3.geoNaturalEarth1 for the map projection, d3.geoPath to render country boundaries, and d3.scaleSqrt for circle sizing. It loads population estimates from a CSV file and country shapes from a TopoJSON atlas, rendering everything as SVG.

TToooooooT

95% match

Loading thumbnail…

Circles on a Map

This example visualizes global population by country, with circle area encoding 2018 population values on a natural Earth projection. Users can pan and zoom the map, and hovering over countries reveals more details via tooltips. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and d3.zoom for interactive navigation. Data comes from a CSV file joined with TopoJSON world geometry, while d3.scaleOrdinal and size legends explain the visual encoding.

Ssophburke

95% 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

95% match

Loading thumbnail…

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.

Yyuyang

95% match