D3 Circles on a Map

100%

D3 Circles on a Map

✓ Published1🌍 Public

Last edited Dec 17, 2019

Created on Dec 17, 2019

This example visualizes global population estimates for 2018 using semi-transparent circles positioned over a natural Earth projection map. Countries with missing data appear in a different shade, while hover effects highlight individual nations. The visualization loads UN population data from a CSV file and country boundaries from a TopoJSON world atlas, then renders the map using `d3.geoPath` and `d3.geoNaturalEarth1`. Circle sizes are scaled with `d3.scaleSqrt`, positioned via `d3.geoCentroid` and `projection`, and the map supports zooming through `d3.zoom`. A custom legend is drawn using SVG circles and text.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Circles on a Map

This visualization displays global population estimates for 2018 using circles positioned at country centroids on a natural Earth projection, rendered as an SVG. It uses `d3.geoPath` for map geography, `d3.geoCentroid` for circle placement, and `d3.scaleSqrt` to encode population via circle area. The code loads UN population data from a CSV and country boundaries from a TopoJSON file, styling countries and circles with CSS. A legend shows size scaling, and missing data is highlighted in red. Interactivity includes hover highlighting and zooming via `d3.zoom`.

Ssaliha54

95% match

Loading thumbnail…

Circles on a map with D3.js!

This example displays global population estimates for 2018 as circles positioned on a natural Earth projection map using D3.js v5. Countries with missing data appear in red, while circles scale in radius according to population via `d3.scaleSqrt`. The visualization includes zoom functionality via `d3.zoom`, a size legend generated with custom tick formatting, and tooltips using SVG `<title>` elements. Geographic boundaries are rendered from TopoJSON data, while population statistics come from a CSV file of UN estimates, with `d3.geoPath` and `d3.geoCentroid` handling map geometry.

CCarloWK1202

94% match

Loading thumbnail…

D3 Course 12: Circles on a Map

This example visualizes global population estimates for 2018 as semi-transparent circles projected onto a natural Earth map. It uses d3.geoNaturalEarth1 and d3.geoPath to render countries from TopoJSON, while d3.geoCentroid computes each country’s center for circle placement. The data comes from a UN population CSV, merged by country code, with missing or unmatched values highlighted in red. Circles are sized using d3.scaleSqrt, and interactive zoom is enabled via d3.zoom. A custom legend displays population value ticks.

GGabrz

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 by country in 2018, with circles sized proportionally to population counts overlaid on a natural Earth projection map. The map supports pan and zoom interactions, and hovering over countries reveals population data or missing-data indicators. Built with D3 v5, the example uses `d3.geoPath` for map rendering, `d3.geoNaturalEarth1` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for circle sizing, while styling and legend components are defined in separate JavaScript modules. Population data comes from a UN estimates CSV, with country boundaries from a TopoJSON world atlas.

GGerryLivermore

94% match

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018, using a natural Earth projection to map countries. The map uses semi-transparent circles sized by population magnitude, while a color legend and size legend clarify the encoding. Built with D3 v5, the code leverages `geoNaturalEarth1` and `geoPath` for map projection, `scaleSqrt` for circle sizing, and `scaleOrdinal` for the color scheme. Data is sourced from UN population estimates joined with a TopoJSON world atlas. A tooltip on each country provides its name and population count, with missing data highlighted in light red.

MMatthiasVanCampen

94% match

Loading thumbnail…

Circle on a Map

This example visualizes global population data by overlaying semi-transparent circles on a natural Earth projection map. The circles are sized using `d3.scaleSqrt` based on 2018 population figures, and hovering over countries reveals their population via a tooltip. The visualization uses `d3.geoPath` with `geoNaturalEarth1` for map projection, `d3.zoom` for panning and zooming, and includes both a color legend and a size legend built from `d3.scaleOrdinal` and `d3.scaleSqrt`. Data is loaded from a CSV file and TopoJSON world atlas using `d3.csv` and `d3.json`.

Ggabcoderboi

93% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

KKazushige Okuma

93% match