Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
Ffloresh
Last edited Nov 9, 2018
Created on Oct 16, 2018
Forked from Choropleth 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization shows global population estimates for 2018 as colored circles positioned at the geographic centroid of each country on a natural Earth projection. A size legend encodes population magnitudes, while a color legend maps a categorical scale, with countries lacking data highlighted in a different shade. The code uses d3.geoPath and d3.geoCentroid for map rendering, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for colors. Population data comes from a UN CSV dataset, joined to country geometries from a TopoJSON world atlas. Users can pan and zoom via d3.zoom, with hover tooltips showing region names and formatted population counts.

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

Circles on a Map

This visualization displays global population estimates for 2018 by placing semi-transparent blue circles at the geographic centroids of each country on a natural Earth projection. The map supports zooming and panning via d3.zoom, with a size legend showing population values scaled using d3.scaleSqrt. Data combines UN population CSV with TopoJSON world boundaries, processed using d3.csv, d3.json, and topojson.feature. The code uses d3.geoPath, d3.geoCentroid, and d3.geoNaturalEarth1, alongside SVG rendering to show the choropleth-like country fills and legend components.

CCarloGato
95% match
Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 by placing semi-transparent blue circles at the geographic centroids of each country on a natural Earth projection. The map supports zooming and panning via d3.zoom, with a size legend showing population values scaled using d3.scaleSqrt. Data combines UN population CSV with TopoJSON world boundaries, processed using d3.csv, d3.json, and topojson.feature. The code uses d3.geoPath, d3.geoCentroid, and d3.geoNaturalEarth1, alongside SVG rendering to show the choropleth-like country fills and legend components.

CCarloGato
95% 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 estimates for 2018 by drawing semi-transparent circles on a natural Earth projection map, with each circle positioned at a country's centroid and sized proportionally to its population. The map also includes a size legend and color legend for reference. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interactivity. Population data comes from a UN dataset, with geographic boundaries from TopoJSON, and all elements are rendered as SVG.

MMuhammad Jarir Kanji
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 as proportional circles positioned at country centroids on a natural Earth projection map. Country boundaries are rendered as paths using d3.geoPath, while circle radii scale with population via d3.scaleSqrt. Two legends—a size legend and a color legend—communicate the quantitative mapping, with colors assigned through d3.scaleOrdinal. The map supports zooming through d3.zoom, and data comes from United Nations population estimates loaded as CSV and TopoJSON, processed with topojson.feature.

HHe Jianfeng
94% match