Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Oct 25, 2021

Created on Oct 25, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

Circles on a map

This visualization shows a world map colored by each country's economy category, with a legend displaying the color scale on the left side. The map uses a natural Earth projection, rendered as SVG paths with a blue ordinal color scheme. The code loads geographic data from world-atlas TopoJSON and country metadata from a TSV file, merging them via ISO country codes. Interaction includes zooming via d3.zoom and a hover effect that turns countries red. The color legend is built with custom d3 selections, circles, and text labels.

Aankita1mit

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

88% match

Loading thumbnail…

Circles on a Map

This interactive map colors countries by economic classification using a diverging spectral color scale. Built with D3 v5, it renders a Natural Earth projection via `d3.geoPath` and loads data from the World Atlas TopoJSON and TSV files. A hover effect turns countries red, and the color legend with labeled circles is generated by a custom reusable function. Zooming is enabled through `d3.zoom`, transforming the map group on user interaction.

MMiss-Programmer

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

88% match