Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited May 3, 2021

Created on May 3, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Circles on a Map

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.

Jjlspangl

92% 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

91% match

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized according to estimated 2018 population data from the UN. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines from TopoJSON, while `d3.scaleSqrt` maps population values to circle radii. A legend with `d3.scaleSqrt` ticks and a color legend for missing data accompany the visualization, which supports zooming via `d3.zoom`.

AAjit Singh

91% match

Loading thumbnail…

Circles on a Map

This visualization uses a D3.js geoPath and geoNaturalEarth1 projection to render a world map, overlaid with circles sized by population data from a 2018 UN dataset. Countries with missing data are filled in dark red, while those with data are light beige. The sizing and color legends are implemented via custom modules, and the map supports zooming through D3's zoom event. Hovering over a country reveals its name and population, formatted with D3's format function.

Aannadehtiarova

90% match

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized by 2018 population data from the UN. Country boundaries are drawn using `d3.geoPath` and TopoJSON, while missing population values appear as pink regions. A `d3.scaleSqrt` maps population to circle radius, and a custom legend shows the scale. The map supports pan and zoom via `d3.zoom`, with circle positioning computed from `d3.geoCentroid` and projected coordinates.

Sshanmango

90% match

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

90% match

Loading thumbnail…

Circles on the Map

This example displays a natural Earth projection world map where each country is filled with a light gray or pink color based on whether population data exists for 2020. Circles sized by population are placed at each country’s centroid using `geoCentroid` and scaled with `scaleSqrt`. The visualization uses `d3.geoPath` to render the map, `d3.zoom` for panning and zooming, and includes size and color legends built from reusable components. Data comes from UN population CSV files and TopoJSON world atlas geometry, processed with `topojson.feature`.

MMunTatt Yap

90% match