Circles on a map

100%

Circles on a map

✓ Published2🌍 Public

Last edited Mar 22, 2020

Created on Mar 21, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% 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 visualizes global population data for 2018, overlaying semi-transparent circles on a natural Earth projection. Countries without data appear in light red, while those with values are gray and display proportional circles positioned at their centroids. The visualization uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, and `scaleSqrt` for sizing, plus `topojson` for world geometry. Hovering reveals a tooltip with the region name and formatted population. A size legend explains circle scaling, and zooming is enabled via `d3.zoom`.

AAnShed

94% match

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 scaled circles positioned at country centroids on a natural Earth projection map. Circle area encodes population magnitude, while hovering reveals exact population figures and regional names. The map supports pan and zoom interactions through d3.zoom. Built with d3.geoNaturalEarth1 and d3.geoPath for map rendering, it uses d3.scaleSqrt for circle sizing and d3.scaleOrdinal with a spectral scheme for the categorical color legend. Population data comes from a CSV file processed alongside TopoJSON world boundaries.

EElena Dreosti

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

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

Loading thumbnail…

Circles on a map

This visualization displays a world map with circles sized by population estimates for 2018, using a square-root scale to encode magnitude. Countries without data appear in red, while those with values are green. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country boundaries, and `d3.geoCentroid` to position circles. A size legend and a color legend are generated with custom D3 functions, while zoom interaction is implemented via `d3.zoom`. Population data comes from a CSV of UN estimates, merged with TopoJSON world atlas geometry.

SSagar Malviya

93% match