Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
AAntonio Rungo
Last edited Feb 17, 2020
Created on Feb 17, 2020
Forked from Circles on a Map

This visualization shows global population distribution using proportional circles on a natural Earth projection map. Circle size encodes each country’s 2018 population, with missing data shown in a distinct color. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render borders. A `scaleSqrt` size legend and an ordinal color legend are included, and the interaction is a zoomable, event-driven map. Data comes from a UN CSV and a TopoJSON world atlas, processed via `topojson.feature`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 as proportional circles positioned at country centroids on a natural Earth projection map. Country boundaries are rendered as paths using d3.geoPath, while circle radii scale with population via d3.scaleSqrt. Two legends—a size legend and a color legend—communicate the quantitative mapping, with colors assigned through d3.scaleOrdinal. The map supports zooming through d3.zoom, and data comes from United Nations population estimates loaded as CSV and TopoJSON, processed with topojson.feature.

HHe Jianfeng
94% match
Loading thumbnail…

Circles on a Map

This visualization shows world population by country using proportional circles on a natural Earth projection map, with circle area corresponding to 2018 population data from a UN dataset. Users can pan and zoom, while hovering reveals a country’s name and population. The code uses `d3.geoPath` with `topojson` for map features, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interaction. A size legend displays tick marks, and a color legend is also implemented, with SVG rendering throughout.

NNikkor
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles centered on each country, with area encoding population size. The map supports pan and zoom, and hovering reveals a tooltip with the country name and exact population. It uses a natural Earth projection via d3.geoNaturalEarth1, with d3.geoPath for country boundaries and d3.scaleSqrt for circle sizing. A custom size legend and color legend (d3.scaleOrdinal with schemeSpectral) provide context. Data comes from a CSV file merged with world topology from TopoJSON, rendered as SVG. The implementation uses d3.zoom for interaction and d3.geoCentroid to position circles.

KKevinw97
94% match
Loading thumbnail…

Circles on a map

This map visualizes global population estimates for 2018 using proportional circles overlaid on a geographic projection of the world. The visualization layers semi-transparent teal circles at each country’s centroid, with circle radius scaled by the square root of population via a legend. It employs D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` for map geometry, alongside `scaleSqrt` for sizing and `scaleOrdinal` for color. Data combines UN population CSV estimates with TopoJSON country boundaries, processed through local modules `loadAndProcessData` and `sizeLegend`.

MMauradion
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263
94% match
Loading thumbnail…

Circles on a Map

This visualization depicts global population data for 2018, using proportional circles on a natural Earth projection map. Country boundaries are rendered as SVG paths via `d3.geoPath`, while circle areas encode population using `d3.scaleSqrt`. Pan and zoom are enabled through a custom `zoom` event handler. Data is loaded from a CSV file and a TopoJSON world atlas, merged by country code. A size legend clarifies the scaling, and hovering on a country reveals its name and population via a tooltip.

MMartin Palanca
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263
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
93% match