Skip to main content
SimilarExport ZIP
100%

Circles on a Map with D3.js!

✓ Published0🌍 Public
Fforcox43
Last edited Jul 21, 2020
Created on Jul 21, 2020

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.

AI-generated description

//deo-geo-projection on github: // need to include as src on index.html: <script src ='https://d3js.org/d3-geo-projection.v2.min.js"></script>

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
93% match
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
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
Loading thumbnail…

Circles on a Map

This visualization displays a natural Earth projection map with circles sized by 2018 population estimates at country centroids, colored by income group. It uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with schemeCategory10 for color encoding. Hovering highlights countries, while zoom interactions are handled via d3.zoom. Population data comes from a UN dataset merged with TopoJSON country boundaries, rendered as SVG with additional size and color legends.

MMatthew Rubino
93% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Pputrafandy
93% match
Loading thumbnail…

Circles on the map

This visualization displays global population estimates for 2018, projected onto a natural Earth map using d3.geoNaturalEarth1 and rendered with d3.geoPath. Circles positioned at country centroids via geoCentroid scale in size with population using d3.scaleSqrt. The map supports panning and zooming through d3.zoom, with tooltips showing population values. Data comes from UN population estimates merged with TopoJSON world atlas geometries, and both size and color legends are built using reusable d3 components.

LLongYuu
93% 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 circles, sized with a square root scale, represent population magnitudes, while a legend explains the scaling. A color legend and interactive zooming are also included. The code uses D3 v5 APIs like `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `topojson.feature`, with data loaded from a CSV file and a TopoJSON world atlas. The visualization is rendered as an SVG within a React framework.

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