Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Jun 18, 2021

Created on Jun 15, 2021

This visualization displays a natural Earth projection map with circles sized by 2018 population estimates at country centroids, colored by income group. It uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for color encoding. Hovering highlights countries, while zoom interactions are handled via d3.zoom. Population data comes from a UN dataset merged with TopoJSON country boundaries, rendered as SVG with additional size and color legends.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

ZZ-Richard

94% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection map to display the population of each country for 2018, with the area of each circle proportional to its population. The map supports pan, zoom, and hover interactions for additional details. The code employs d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with d3.scaleSqrt for sizing the circles. Population data comes from a CSV file, while country boundaries are sourced from TopoJSON. Legends for both color and size are rendered using SVG, with hover effects revealing population figures.

CCarloGato

93% match

Loading thumbnail…

Circles on a Map with D3.js!

This visualization displays world population estimates for 2018 as semi-transparent circles positioned at country centroids on a Natural Earth projection map. Circle size encodes population magnitude, while a color legend categorizes countries by income group. The code uses D3.js v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus TopoJSON data from world-atlas and UN population CSV data. Interactive zooming is implemented via `d3.zoom`, with SVG rendering and custom color and size legends.

Fforcox43

93% match

Loading thumbnail…

Circles on a map

This example uses a natural Earth projection to render a world map with circles sized by 2018 population estimates. The visualization displays countries in two colors, distinguishing those with population data from those without. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to project country boundaries and position circles at country centroids. A d3.scaleSqrt maps population values to circle radii, with a custom size legend and zoom interaction via d3.zoom. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Ssureshreddypr

93% match

Loading thumbnail…

Circles on the map

This visualization displays global population estimates for 2018, projected onto a natural Earth map using d3.geoNaturalEarth1 and rendered with d3.geoPath. Circles positioned at country centroids via geoCentroid scale in size with population using d3.scaleSqrt. The map supports panning and zooming through d3.zoom, with tooltips showing population values. Data comes from UN population estimates merged with TopoJSON world atlas geometries, and both size and color legends are built using reusable d3 components.

LLongYuu

92% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection map with semi-transparent teal circles sized by each country’s 2018 population, drawn from UN population estimates and world atlas TopoJSON data. A square-root size scale encodes population values, with a corresponding size legend and an ordinal color legend for missing data. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map geometry, d3.geoCentroid to position circles, and d3.zoom for panning and zooming. Hovering a country reveals a tooltip with its region and formatted population.

MMukund Khandelwal

92% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as colored circles positioned on a natural Earth projection map. Countries are shaded with a spectral color scale, while circle size encodes population magnitude using a square-root scale. The code loads CSV and TopoJSON data with d3.csv and d3.json, then renders the map using d3.geoPath and d3.geoNaturalEarth1, with circles placed via d3.geoCentroid and scaled by d3.scaleSqrt.

Hhannahwilson2

92% match

Loading thumbnail…

Circles on A Map

This visualization displays global population estimates for 2018 by drawing semi-transparent circles on a natural Earth projection map, with each circle positioned at a country's centroid and sized proportionally to its population. The map also includes a size legend and color legend for reference. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interactivity. Population data comes from a UN dataset, with geographic boundaries from TopoJSON, and all elements are rendered as SVG.

MMuhammad Jarir Kanji

92% match