Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published1🌍 Public
Jjesramyep1263
Last edited Apr 1, 2020
Created on Apr 1, 2020
Forked from Circles on a Map

This map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

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 map visualization depicts world population by country, with circle area scaled to the 2020 population figures. Users can pan and zoom across the interactive SVG, and hovering over a country highlights it while revealing a tooltip with the region name and population. The visualization is built with d3.v5, using geoNaturalEarth1, geoPath, and geoCentroid for the map projection, while loadAndProcessData merges CSV population data with TopoJSON world atlas shapes. A square-root scale controls circle size, and custom legends render the data encoding.

Jjesramyep1263
100% match
Loading thumbnail…

Circles on a Map

This visualization shows world population by country using scaled circles over a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see regional names and exact population figures. The code uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom`, rendering SVG paths for country borders and semi-transparent circles. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

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

This visualization displays global population by country, with circle area scaled proportionally to 2018 population data from a CSV file. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath with TopoJSON world atlas data, while hover tooltips reveal precise population figures. Interactive features include d3.zoom for panning and zooming, with circles positioned using geoCentroid. Population values drive a d3.scaleSqrt sizing scale, and a custom sizeLegend component visualizes the quantitative mapping alongside a color legend using d3.scaleOrdinal.

YYounes Mohamed ABDAT
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population by country using circles overlaid on a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see region names and population figures. The implementation uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, while loading data from a CSV file and TopoJSON world atlas. Circle positions derive from projected centroids, and a custom size legend communicates the population scale.

EElena Dreosti
94% 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
94% match
Loading thumbnail…

Circles on a Map

This visualization maps global population data by country, using circle area to represent population size for 2018. Users can pan and zoom across a natural Earth projection, and hover to reveal exact population counts. The visualization uses d3.geoPath, d3.geoNaturalEarth1, d3.scaleSqrt, and d3.zoom, with data from a CSV joined to TopoJSON world atlas geometry. A size legend and color legend are rendered as SVG, with circles and country borders styled for clarity.

LLeandro Souza
94% match