Skip to main content
SimilarExport ZIP
100%

D3 Circles on a Map

✓ Published0🌍 Public
Ssaliha54
Last edited Dec 23, 2019
Created on Dec 23, 2019

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`.

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
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…

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