Circles on a map

Circles on a map

This map visualization displays global population data for 2018 using circles sized by population magnitude and colored by data availability. The geographic map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, while circle radii are scaled with `scaleSqrt`. The code uses TopoJSON world atlas data merged with CSV population figures. A size legend and a color legend are drawn as SVG elements, and zoom interaction is enabled via `d3.zoom`. Countries missing data appear red, while those with values are green.

NNkwachi Abel

Circles on a map

This example uses a natural Earth projection to render a world map with circles sized by 2018 population estimates. The visualization displays countries in two colors, distinguishing those with population data from those without. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to project country boundaries and position circles at country centroids. A d3.scaleSqrt maps population values to circle radii, with a custom size legend and zoom interaction via d3.zoom. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Ssureshreddypr

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

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

ZZ-Richard

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

Circles on a Map

This visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah

Circles on a Map

This map visualization displays global population by country using semi-transparent circles sized proportionally to 2018 population data from the UN, with a square-root scale for area encoding. The code uses d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoCentroid to position circles at country centroids, while d3.zoom enables panning and zooming. Hovering reveals country names and population values via SVG title elements, and a custom size legend explains the circle scaling. Data sources include UN population CSV and TopoJSON world atlas geometry.

Jjesramyep1263

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