Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Oct 10, 2021

Created on Oct 10, 2021

This example displays two choropleth-style encoded variables on a world map. Country polygons are colored green or red based on a 2019 property, while circles sized with a square-root scale represent 2018 population data projected at each country’s centroid. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` to render SVG paths and circles, with TopoJSON from the visionscarto-world-atlas source. A zoom behavior from D3 enables interactive panning and scaling of the entire map group.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This example visualizes global population data by coloring each country on a world map based on its 2018 population estimate, with green indicating data availability and red for missing values. It uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to render the map, while `topojson.feature` converts the world-atlas TopoJSON data. The map supports zooming and panning through `d3.zoom`. A color legend, built with `scaleOrdinal` and `schemeSpectral`, is displayed alongside, and hovering over a country highlights it in red.

AArriannePandaraoan

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

Loading thumbnail…

Circles on a Map

This visualization combines a choropleth map with proportional circles to display population data by country. The map uses D3’s geoNaturalEarth1 projection and geoPath, while circles are positioned via pathGenerator.centroid and sized with a square-root scale. Population data from a CSV is joined to TopoJSON world boundaries, and countries missing 2018 data are shaded red. An interactive size legend is rendered using custom D3 components, and zooming is enabled through the event and zoom APIs.

Zzhangfa

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

89% match

Loading thumbnail…

Circles on a Map

This visualization maps population by country using circles positioned at each country’s centroid, with circle area proportional to 2018 population data loaded from a CSV and joined to TopoJSON world geometry via d3.csv and topojson.feature. d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid project the map, while d3.scaleSqrt sizes the circles. The map supports pan and zoom through d3.zoom, and hovering reveals country names and population values via SVG title elements. A custom size legend and a separate color legend are rendered as SVG groups.

CCurran Kelleher

89% match

Loading thumbnail…

Circles on Map

This example displays a natural Earth choropleth map with circles sized by population, colored by a categorical scale, and overlaid with a clickable legend. It uses TopoJSON world-atlas data and CSV population figures merged by country ID, rendered as SVG paths via `geoPath` and `geoNaturalEarth1`. Users can zoom with `d3.zoom` and filter countries by clicking legend colors, dimming non-matching regions. The code applies `scaleOrdinal` with `schemeSpectral` and projects centroids from geographic coordinates.

Iinroadings

89% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data for 2018 by coloring countries on a natural Earth projection map, with missing data highlighted in red. It uses D3 v5's `geoNaturalEarth1` and `geoPath` to render the map, `scaleSqrt` for proportional sizing, and `scaleOrdinal` with `schemeSpectral` for color encoding. The visualization supports zooming via `d3.zoom`, and tooltips appear on hover showing region names and population counts. Data comes from a CSV joined with TopoJSON world atlas geometry, loaded through `Promise.all` and processed with `topojson.feature`.

TTaheniataallah

89% match

Loading thumbnail…

Circles on a Map

This example visualizes global population by country, with circle area encoding 2018 population values on a natural Earth projection. Users can pan and zoom the map, and hovering over countries reveals more details via tooltips. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and d3.zoom for interactive navigation. Data comes from a CSV file joined with TopoJSON world geometry, while d3.scaleOrdinal and size legends explain the visual encoding.

Ssophburke

89% match