Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Apr 7, 2020

Created on Apr 7, 2020

A world map rendered with SVG paths uses proportional circles to visualize each country's 2018 population, with circle area scaled via `d3.scaleSqrt` and positioned by `d3.geoCentroid` under a `d3.geoNaturalEarth1` projection. The visualization supports pan and zoom through `d3.zoom`, and hovering over a country reveals its population in a tooltip. Missing-data countries appear in a lighter shade. A size legend built from `d3.scaleSqrt` ticks and a color legend accompany the map, with data loaded from a CSV and TopoJSON using `d3.csv` and `d3.json`.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization uses proportional circles to show each country’s population, with circle area scaled by the 2018 population data from a CSV file. The map renders with `d3.geoNaturalEarth1` projection and `d3.geoPath`, while a square-root scale (`d3.scaleSqrt`) determines circle radii. Users can pan and zoom via `d3.zoom`, and hovering a country reveals its name and population in a tooltip. A color legend and size legend are built with reusable D3 functions, and the map data comes from the visionscarto world atlas TopoJSON.

Yyakupermurat

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

93% match

Loading thumbnail…

Circles on a Map

This visualization displays population by country using proportional circles on a natural Earth projection map, with circle area corresponding to each nation's 2018 population. Users can pan and zoom the map via d3.zoom and hover over countries to reveal population details in a tooltip. The code uses d3.geoPath, d3.geoCentroid, and d3.scaleSqrt to position and size circles, while a custom size legend and color legend are built with D3 selections. Population data originates from a CSV file, joined with TopoJSON world geometry using topojson.feature.

Jjesramyep1263

93% match

Loading thumbnail…

Circles on a Map

This visualization depicts global population data for 2018, using proportional circles on a natural Earth projection map. Country boundaries are rendered as SVG paths via `d3.geoPath`, while circle areas encode population using `d3.scaleSqrt`. Pan and zoom are enabled through a custom `zoom` event handler. Data is loaded from a CSV file and a TopoJSON world atlas, merged by country code. A size legend clarifies the scaling, and hovering on a country reveals its name and population via a tooltip.

MMartin Palanca

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population by country using scaled circles on a natural Earth projection map, with circle area proportional to each country's 2018 population. Users can pan and zoom via d3.zoom and hover over countries to see exact population figures through SVG title tooltips. The example uses d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and topojson for world geometry. Population data is loaded from a CSV file, and countries lacking data appear in red rather than gray.

Jjesramyep1263

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles centered on each country, with area encoding population size. The map supports pan and zoom, and hovering reveals a tooltip with the country name and exact population. It uses a natural Earth projection via d3.geoNaturalEarth1, with d3.geoPath for country boundaries and d3.scaleSqrt for circle sizing. A custom size legend and color legend (d3.scaleOrdinal with schemeSpectral) provide context. Data comes from a CSV file merged with world topology from TopoJSON, rendered as SVG. The implementation uses d3.zoom for interaction and d3.geoCentroid to position circles.

KKevinw97

93% match

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using proportional circles overlaid on a natural Earth projection map. The area of each circle represents the population of its corresponding country, with circles positioned at the centroid of each nation. The map uses d3.geoPath for rendering country boundaries and a d3.scaleSqrt for sizing circles. Users can pan and zoom through the d3.zoom API, and hovering over a country reveals its population via a title tooltip. Data comes from a CSV joined with a TopoJSON world atlas, and a custom size legend communicates the circle-to-population mapping.

Jjesramyep1263

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

93% match