Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Nov 21, 2018

Created on Nov 21, 2018

This visualization uses a natural Earth projection to display country boundaries and population data. Circles sized with `d3.scaleSqrt` are positioned at each country's centroid using `d3.geoCentroid`, with circle area proportional to 2018 population estimates from the UN. Users can pan and zoom via `d3.zoom`, while hovering reveals a tooltip with country name and population. The code employs `d3.geoPath`, `topojson.feature`, and a custom size legend rendered in SVG.

AI-generated description

Visualizing population by country using circles on a map! The area of each circle corresponds to the population of the country it represents. You can also pan & zoom, and hover over each country for more information.

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display the population of each country as a circle, where the circle's area is proportional to the country's 2018 population. Users can pan and zoom the map, and hovering over a country reveals its name and population in a tooltip. The D3 code loads data from a UN CSV and a TopoJSON world atlas, computing circle sizes with `d3.scaleSqrt` and rendering the map using `d3.geoPath`. A size legend and a color legend for missing data are also included.

Ddtd-amiele

94% match

Loading thumbnail…

Circles on a Map

This visualization maps population by country using circles positioned at each country’s centroid, with circle area proportional to 2018 population data loaded from a CSV and joined to TopoJSON world geometry via d3.csv and topojson.feature. d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid project the map, while d3.scaleSqrt sizes the circles. The map supports pan and zoom through d3.zoom, and hovering reveals country names and population values via SVG title elements. A custom size legend and a separate color legend are rendered as SVG groups.

CCurran Kelleher

94% match

Loading thumbnail…

Circles on a Map

This visualization displays the population of each country as a circle on a natural Earth projection map, with the circle’s area proportional to the 2018 population data. Hovering over a country reveals its name and population, while pan and zoom are enabled. The map is rendered as SVG using `d3.geoPath` with a `geoNaturalEarth1` projection, and population data is joined from a CSV to country geometries using `topojson`. A square-root size scale, implemented with `d3.scaleSqrt`, drives the circle radii, and a legend is built through custom `sizeLegend` and `colorLegend` functions.

Hhannahwilson2

94% match

Loading thumbnail…

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

93% match

Loading thumbnail…

Circles on a Map

This visualization displays the population of countries as circles on a natural Earth projection map, with the area of each circle proportional to the country's 2018 population. It uses d3.geoPath for geographic boundaries and d3.scaleSqrt for sizing circles, while enabling pan and zoom through a zoom event handler. Hovering reveals tooltips with population details via title elements. The visualization sources data from a CSV file merged with TopoJSON geometries, rendering through d3 and SVG, and includes a custom size legend with tick marks for population values.

Nnoura94

93% match

Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles positioned on a natural Earth projection map, with circle area proportional to 2018 population data loaded from CSV. The map supports panning and zooming via d3.zoom, and hovering over a country reveals its name and population in a tooltip. The visualization uses d3.geoPath and topojson for rendering country boundaries, d3.scaleSqrt for sizing circles, and d3.scaleOrdinal with schemeSpectral for a color legend, all rendered as SVG with d3 v5.

GGiovanniD_

93% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection map to display the population of each country for 2018, with the area of each circle proportional to its population. The map supports pan, zoom, and hover interactions for additional details. The code employs d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with d3.scaleSqrt for sizing the circles. Population data comes from a CSV file, while country boundaries are sourced from TopoJSON. Legends for both color and size are rendered using SVG, with hover effects revealing population figures.

CCarloGato

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