Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Oct 12, 2021

Created on Oct 12, 2021

This example displays a world map with colored circles positioned over each country, where the circle color encodes the economy category from the UN World Population Prospects dataset. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to place the circles, with a d3.scaleOrdinal color scale and a custom color legend. The map renders in SVG, supports zooming via d3.zoom, and uses topojson for geographic data processing and CSV loading for population statistics.

AI-generated description

UN World Population Prospects

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This example displays a world map where each country is filled with a color based on its economy data from a UN dataset. Circles in a legend on the left indicate the color scale. The map uses the `geoPath` and `geoNaturalEarth1` projections from D3 v5, while the `topojson` library’s `feature` function processes the world atlas data. Country choropleth colors are set by a ternary, and the visualization supports zooming via the `zoom` API.

CCassie

92% match

Loading thumbnail…

Circles on a Map

This example displays world country outlines colored by population data from the UN, overlaid with a custom color legend. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to render geographic features, with zoom interaction via d3.zoom. Circles positioned using d3.geoCentroid appear on country centers. The legend demonstrates a reusable d3 module with SVG rendering, while data loads through d3.csv and d3.json with topojson.feature.

PPiotr Paszek

92% match

Loading thumbnail…

Circles on Map

This example displays a world map colored by each country's economy classification, with a color legend showing the categorical scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map from TopoJSON data loaded via topojson, while d3.scaleOrdinal with schemeSpectral assigns colors to economic categories. The map supports zooming through d3.zoom, and hovering highlights individual countries in red. A custom colorLegend component renders the legend as SVG circles with text labels, and the sphere background is filled with blue.

Mmaxthamt

91% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

KKazushige Okuma

90% match

Loading thumbnail…

Circles on the Map

This example displays a world map with countries colored according to their economic classification, using a categorical color scale with a legend rendered as circles. It loads world geometry from TopoJSON and metadata from TSV files, then projects the map with `d3.geoNaturalEarth1` and renders it as SVG paths via `d3.geoPath`. A `d3.zoom` behavior enables panning and zooming, while the color legend is built with a custom function that updates scales and ticks. The visualization uses `d3.scaleOrdinal` with the `schemeSpectral` palette and supports hover highlighting through CSS.

Pprincit

90% match

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

89% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data from the United Nations, using colored circles on a natural Earth projection map. D3’s `geoPath` and `geoCentroid` position each circle over its country’s centroid, while `scaleSqrt` encodes population magnitude through circle radius. A custom `sizeLegend` displays graduated population values, and `colorLegend` provides a color key. The map supports pan and zoom via `d3.zoom`, and country hover effects are styled in CSS. Data is loaded from CSV and TopoJSON, rendered as SVG.

Pprincit

89% match

Loading thumbnail…

Circles on a Map

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.

MMatthew Rubino

89% match