Fork of Circles on a Map

100%

Fork of Circles on a Map

✓ Published0🌍 Public

Last edited Jul 21, 2021

Created on Jul 21, 2021

This visualization shows global population by country using scaled circles on a natural Earth projection map. Circle area corresponds to 2018 population data, while pan and zoom interactions allow exploration, and hovering reveals country names and population figures via tooltips. The implementation uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, d3.zoom for navigation, and TopoJSON for world geography. A color legend and size legend explain the encoding, with data loaded from a CSV file merged with the TopoJSON world atlas.

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…

Fork of Circles on a Map

This map visualizes global population by country, with circle area proportional to 2018 population figures. Users can pan and zoom, and hovering over countries reveals detailed population data with a tooltip. The visualization uses D3 v5 with `d3.geoPath` and `geoNaturalEarth1` projection to render world boundaries from TopoJSON, while `d3.scaleSqrt` sizes the circles. Population data comes from a CSV file merged with the geometry. A size legend and color legend provide reference, and SVG rendering supports interactive zoom events.

DDonald Bagwell

96% match

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population data as proportional circles positioned on a world map. Each circle's area corresponds to a country's 2018 population, with hover tooltips revealing specific values. The map supports pan and zoom interactions. Built with D3 v5, it uses `geoNaturalEarth1` for the projection, `geoPath` for rendering country boundaries, and `scaleSqrt` for circle sizing. Population data comes from a CSV dataset merged with TopoJSON world atlas geometries. A size legend and color legend are generated using custom D3 modules.

KKainsli

95% match

Loading thumbnail…

Fork of Circles on a Map

This visualization shows global population for 2018 using circles on a natural Earth projection map, with circle area proportional to population and hover tooltips revealing country names and values. Users can pan and zoom the map. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoCentroid, and d3.zoom, with population data from a CSV processed via d3.csv and country geometries from TopoJSON. A square-root size scale and a custom size legend with tick labels display the quantitative mapping.

Mmunpro2002

95% match

Loading thumbnail…

Fork of Circles on a Map

This visualization displays country populations as scaled circles on a natural Earth projection map, with each circle’s area representing the 2018 population data. Hovering reveals country names and exact population values, while the map supports pan and zoom. The implementation uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, d3.zoom for interaction, and TopoJSON data from the visionscarto-world-atlas. Two legends—a color legend using d3.scaleOrdinal with schemeSpectral and a size legend—explain the encoding. Population data comes from a CSV file, preprocessed to extract per-country figures.

Rrajeshathakur

95% match

Loading thumbnail…

Fork of Circles on a Map

This visualization shows global population by country, with the area of each circle proportional to that country's 2018 population. It uses a natural Earth projection with D3’s `geoPath` for the map. Pan and zoom via the `zoom` control, and hover reveals detailed population figures. Data is loaded from a CSV of UN population figures and a TopoJSON world atlas, processed with `topojson.feature`. Circles are drawn using SVG, with a size legend generated by `sizeLegend` and a color legend using `colorLegend`.

LLauranJade

95% match

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population by country with circles positioned at each nation’s centroid, where circle area encodes the 2018 population value. Users can pan and zoom the natural Earth projection, while hovering reveals country names and exact figures. The code uses D3 v5 APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `zoom`. A size legend with formatted tick labels explains the circle scaling, and countries lacking data appear in a distinct red shade. Population data loads from a CSV joined with TopoJSON world geometry, rendered as SVG.

Mmunpro2002

95% match

Loading thumbnail…

Fork of Fork of Circles on a Map

This visualization displays global population by country with proportional circles, where circle area corresponds to 2018 population data from a CSV file merged with TopoJSON world map geometry. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, with d3.zoom enabling pan and zoom interaction. Color and size legends built with custom d3 functions show population magnitudes, while hover tooltips reveal country names and exact values. The SVG rendering applies a natural earth projection with semi-transparent teal circles overlaying gray country boundaries.

AAbdouEnsaj

95% match

Loading thumbnail…

Fork of Circles on a Map

This visualization uses proportional circles on a natural Earth projection map to show population by country for 2018, with circle area scaled via d3.scaleSqrt and hover tooltips revealing exact figures. It integrates d3.zoom for panning and zooming, d3.geoPath for rendering country boundaries from TopoJSON, and d3.geoCentroid to position circles at country centers. A color legend and size legend annotate the view, while data is loaded via d3.csv and d3.json. Missing population data renders countries in light red, and hover highlights countries in teal.

Aashan521

94% match