Circles on a Map

100%

Circles on a Map

✓ Published1🌍 Public

Last edited Mar 26, 2020

Created on Mar 26, 2020

This example visualizes population by country using scaled circles overlaid on a natural Earth projection map, with circle area proportional to each country’s 2018 population. Pan and zoom are enabled via d3.zoom, and hovering over a country reveals its exact population through a title tooltip. The map is rendered as SVG using d3.geoPath and topojson, while a d3.scaleSqrt maps population values to circle radii. A size legend generated with custom d3 code displays population ticks, and the data is loaded from a CSV and a TopoJSON world atlas file.

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

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

96% match

Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles on a world map, with circle area proportional to 2018 population data. Users can pan and zoom the map, and hover over countries to see detailed figures. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath for map outlines, d3.scaleSqrt for circle sizing, and a custom size legend. Population data is loaded from a CSV file, while country boundaries come from TopoJSON, and map interactions are enabled through d3.zoom.

Hhannahwilson2

95% 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 the population of countries as circles on a natural Earth projection map, with the area of each circle proportional to the country's 2018 population. It uses d3.geoPath for geographic boundaries and d3.scaleSqrt for sizing circles, while enabling pan and zoom through a zoom event handler. Hovering reveals tooltips with population details via title elements. The visualization sources data from a CSV file merged with TopoJSON geometries, rendering through d3 and SVG, and includes a custom size legend with tick marks for population values.

Nnoura94

95% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Circles on a Map

This visualization shows global population distribution for 2018 by placing semi-transparent circles at the centroid of each country on a natural Earth projection map, with circle area scaled to population. Users can pan and zoom via d3.zoom, and hovering over a country reveals its exact population in a tooltip. The visualization uses d3.geoPath to render country boundaries from TopoJSON and couples them with CSV data, while a custom size legend with d3.scaleSqrt and d3.format communicates the circle sizes.

Wwaqastufail

95% match

Loading thumbnail…

Circles on a Map

This visualization maps population by country using circles positioned at each country’s centroid, with circle area proportional to 2018 population data loaded from a CSV and joined to TopoJSON world geometry via d3.csv and topojson.feature. d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid project the map, while d3.scaleSqrt sizes the circles. The map supports pan and zoom through d3.zoom, and hovering reveals country names and population values via SVG title elements. A custom size legend and a separate color legend are rendered as SVG groups.

CCurran Kelleher

95% match