Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published2🌍 Public
AArriannePandaraoan
Last edited May 2, 2020
Created on Apr 24, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

Circles on a map

This map visualization displays global population data for 2018 using circles sized by population magnitude and colored by data availability. The geographic map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, while circle radii are scaled with `scaleSqrt`. The code uses TopoJSON world atlas data merged with CSV population figures. A size legend and a color legend are drawn as SVG elements, and zoom interaction is enabled via `d3.zoom`. Countries missing data appear red, while those with values are green.

NNkwachi Abel
93% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, using a natural Earth projection with circles sized by population at each country’s centroid. Countries with missing data appear in light red, while mapped regions are gray and populating circles use a teal fill. The map supports zooming via d3.zoom, and the code employs d3.geoPath for rendering country boundaries, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for the color legend. Data comes from a CSV file joined to TopoJSON world geometries, with both size and color legends implemented as reusable D3 modules.

Ffbudwill
92% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The area of each circle is proportional to the country’s population, with missing data highlighted in red. Users can pan and zoom via d3.zoom, and hover over countries to see exact population figures. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON for world boundaries, with population data joined from a CSV file.

Ggcappadaniel
91% match
Loading thumbnail…

Circles on a map

This example visualizes global population data as semi-transparent circles positioned at the geographic centroid of each country on a Natural Earth map. Countries with missing data appear in light red, while the circles’ radii encode 2018 population figures using a square-root scale. The visualization uses d3.geoPath with the geoNaturalEarth1 projection, d3.zoom for panning and scaling, and d3.scaleSqrt for sizing. Data is loaded from a CSV file and a TopoJSON world atlas, processed via topojson.feature, with a custom legend built using d3.scaleSqrt.

PPotikorn
91% match
Loading thumbnail…

Circles on a map

This visualization displays world population data for 2018 using circles positioned at country centroids on a natural Earth projection map. Countries lacking data are tinted pink, while those with values appear gray with teal, semi-transparent circles scaled by square-root transformation. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and interactive zoom via D3's `zoom` event. Population figures are loaded from a CSV via `d3.csv`, joined to TopoJSON country shapes transformed with `topojson.feature`, and a custom legend illustrates circle size.

SSiddhartha Gupta
91% 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
91% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for the year 2018, using sized circles positioned on a natural Earth projection map. Countries are colored green or red to indicate whether they have available data. The circles are scaled using `scaleSqrt()` to map population values to radii. The code uses `geoPath` with `geoNaturalEarth1()` for the map projection, and loads data from a CSV file merged with TopoJSON world atlas features.

Ccheeson
91% match