Skip to main content
SimilarExport ZIP
100%

Circles on a map

✓ Published0🌍 Public
Jjeelong
Last edited Jul 12, 2020
Created on Jul 12, 2020
Forked from Choropleth 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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a map

This example visualizes world population data by mapping 2018 population estimates as scaled circles positioned at country centroids. Using a natural Earth projection, countries are rendered as SVG paths with color coding—gray for data availability and pink for missing data. The visualization supports hover effects, zooming via the `zoom` event, and includes a size legend built with a custom `sizeLegend` component. Data processing combines CSV population statistics with TopoJSON geometries using `topojson.feature`, while circle radii are scaled through `d3.scaleSqrt`.

LLuiz André Carvalho Tavares
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 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.

Vvic126
94% match
Loading thumbnail…

Circles on a Map

This example visualizes global population estimates for 2018 using circles overlaid on a natural Earth projection map. Countries with missing data appear pink, while populated areas are gray with semi-transparent cyan circles sized by population via d3.scaleSqrt. The visualization includes an interactive size legend with formatted tick values and a color legend. It uses d3.geoPath, d3.geoCentroid, d3.zoom, and d3.scaleOrdinal, rendering with SVG. Population data comes from a UN CSV file joined to TopoJSON world geometry, with tooltips showing country names and population counts.

Ffloresh
93% match
Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 as semi-transparent teal circles overlaid on a natural Earth projection map. The map uses a light gray sphere background, with countries colored light gray or pink to indicate missing data. Circle radius encodes population magnitude using a square-root scale, with a legend showing tick marks for population values. The example uses D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `geoCentroid`, loading data from the UN population estimates CSV and a TopoJSON world atlas. Hovering a country reveals its population in a tooltip.

AAjayyy
93% 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
93% 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
93% 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
92% 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
92% match