Skip to main content
SimilarExport ZIP
100%

Circles on a map

✓ Published0🌍 Public
Vvic126
Last edited Jul 2, 2020
Created on Jul 1, 2020
Forked from Choropleth Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The circles, sized with a square root scale, represent population magnitudes, while a legend explains the scaling. A color legend and interactive zooming are also included. The code uses D3 v5 APIs like `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `topojson.feature`, with data loaded from a CSV file and a TopoJSON world atlas. The visualization is rendered as an SVG within a React framework.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on the Map

This visualization displays the global population distribution for 2018 using sized circles positioned over a natural Earth projection map. Each circle’s radius encodes population magnitude via a square-root scale, with a corresponding size legend and a categorical color legend for missing data. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `zoom`, and `scaleSqrt`, rendering SVG elements. Data comes from a CSV file merged with TopoJSON world atlas geometries, and interaction includes hover tooltips showing region names and formatted population values.

Pprincit
95% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as colored circles positioned on a natural Earth projection map. Countries are shaded with a spectral color scale, while circle size encodes population magnitude using a square-root scale. The code loads CSV and TopoJSON data with d3.csv and d3.json, then renders the map using d3.geoPath and d3.geoNaturalEarth1, with circles placed via d3.geoCentroid and scaled by d3.scaleSqrt.

Hhannahwilson2
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Pputrafandy
94% match
Loading thumbnail…

Circles on a map

This example shows world population estimates for 2018, using circles sized by population on a natural Earth projection. Countries lacking data are colored pink, while those with data are gray and hover to teal. The visualization uses D3’s `geoPath` to render the map and `scaleSqrt` for circle radii, with a size legend built via D3’s `scaleOrdinal` and custom legend modules. Data is loaded from a CSV and a TopoJSON atlas, processed with `topojson.feature`, and rendered as SVG within a React starter.

Jjeelong
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah
94% 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
94% 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
93% 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
93% match