Circles on a map with D3.js!

100%

Circles on a map with D3.js!

✓ Published0🌍 Public

Last edited Aug 5, 2022

Created on Aug 3, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Circles on a Map

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.

Rrdeichert

94% match

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

94% match

Loading thumbnail…

Circles on a Map with D3.js!

This visualization displays world population estimates for 2018 as semi-transparent circles positioned at country centroids on a Natural Earth projection map. Circle size encodes population magnitude, while a color legend categorizes countries by income group. The code uses D3.js v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus TopoJSON data from world-atlas and UN population CSV data. Interactive zooming is implemented via `d3.zoom`, with SVG rendering and custom color and size legends.

Fforcox43

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

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

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

92% match

Loading thumbnail…

Circles on a map

This map visualization displays the global population distribution for 2018 using circles sized by population count, placed at each country's geographic centroid over a natural Earth projection. The map uses `d3.geoPath` for rendering country boundaries and `d3.scaleSqrt` for circle sizing, with a legend showing population ranges. Users can zoom and pan using `d3.zoom`. Population data comes from a UN dataset (medium variant estimates), joined with TopoJSON world geometry via `d3.json` and `d3.csv`. A color legend marks missing data countries in red.

Ccornshoots

92% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data from 2018 using scaled circles overlaid on a natural Earth projection map. The area of each circle corresponds to a country’s population, while hover tooltips show exact values and region names. The visualization supports pan and zoom via the `d3.zoom` behavior. The map and circles are rendered as SVG, using `d3.geoPath` for geographic outlines, `d3.geoNaturalEarth1` for projection, and `d3.scaleSqrt` for circle sizing. A separate size legend and color legend are generated with custom D3 modules.

AAPIvahnenko

92% match