World population - bubbles on map

100%

World population - bubbles on map

✓ Published0🌍 Public

Last edited Feb 11, 2018

Created on Feb 11, 2018

A world map in the Winkel III projection displays semi-transparent bubbles scaled by the square root of each country’s 2016 population, with colors assigned by continent via `d3.scaleOrdinal`. Country outlines, graticule, and labels are drawn using `d3.geoPath` and `d3.geoGraticule`, with zoom support from `d3.zoom()` that adjusts label visibility based on zoom level. Population data comes from the World Bank’s World Development Indicators. The visualization also includes hover tooltips showing the country name and formatted population.

AI-generated description

This example shows bubbles with area proportional to each country's population (2016) superimposed on a world map. Bubbles are also colored according to the continent.

Showing population and geography together, this map could probably be better redesigned as a choropleth of population density. This example is an exercise to prepare for different kinds of data, for which a geographical density would not make sense.

Population data is obtained from data.worldbank.org. The name of the source is "World Development Indicators" and was last updated on 2017, August 2nd.

Based on this example about implementing a map of the world and this one about population bubbles.

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/b66b6e352187c836c1f53b091f7a1b05'>World population - bubbles on map</a>

mit Licensed

Similar vizzes

Loading thumbnail…

World Map

This interactive world map visualizes population data by country for 2018, using color and size to distinguish between regions with and without reported figures. The visualization employs a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with countries rendered as SVG paths. Population values are mapped to circle sizes using `d3.scaleSqrt`, and a size legend with tick marks displays the scale. Users can pan and zoom through `d3.zoom`, and hovering over a country reveals its population via a tooltip. Data comes from a CSV file joined to TopoJSON world atlas geometry.

Rrohit181099

83% match

Loading thumbnail…

World Map

This interactive visualization displays global population data for 2018 on a natural Earth projection world map. It uses D3 v5’s `geoPath` and `geoNaturalEarth1` to render country boundaries from a TopoJSON world atlas, with hovering highlighting each nation. A color legend and a square-root size legend encode population values via `scaleOrdinal` and `scaleSqrt`, while a `zoom` handler enables panning and zooming. Data comes from a CSV merged with the atlas, and animated transitions update the legends.

Jjitendrashahiitb

80% match

Loading thumbnail…

Population worldmap

This worldmap visualization displays global population estimates for 2018, overlaying semi-transparent circles on each country’s centroid, sized by population using a square-root scale. The map supports zooming and panning, with a color legend and size legend for reference. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `geoCentroid` for circle placement, and `zoom` for interactivity. Population data comes from a UN CSV dataset, merged with country geometries from a TopoJSON world atlas.

Hhxc20060903

80% match

Loading thumbnail…

World Map Visualization

This visualization presents a choropleth world map showing population counts by country, using a blue sequential color scale on an SVG-rendered Natural Earth projection. The code loads CSV population data and GeoJSON country boundaries, then applies d3.geoNaturalEarth1 and d3.geoPath to draw each nation. Countries without matching data appear in black. Population values are converted to numbers and mapped through d3.scaleQuantize with d3.schemeBlues[5] to encode magnitude visually across the geographic layout.

NNukaShravanKumar

79% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data on an interactive world map, with circular markers sized proportionally to each country’s 2018 population via a square-root scale. Hovering over a country reveals its exact population in a tooltip. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection and rendering, while d3.zoom enables pan and zoom. Circles are positioned using d3.geoCentroid, and data merges CSV population figures with TopoJSON world boundaries using topojson.feature, with legends built through custom colorLegend and sizeLegend modules.

KKarkG

79% match

Loading thumbnail…

World population|Circles on a Map

This map of world population for 2020 uses blue circles overlaid on a natural Earth projection to show country-level population sizes, with each circle’s area scaled proportionally. The visualization uses d3.geoPath and d3.geoCentroid to project country polygons and place circles at centroid positions, while d3.scaleSqrt maps population counts to radii. A custom legend with formatted tick labels explains the scaling. Data comes from the UN population estimates, and tooltips reveal exact country names and population figures on hover. The renderer is SVG.

Vvladvaculin

79% match

Loading thumbnail…

World population|Circles on a Map

Vvladvaculin

79% match

Loading thumbnail…

Circles on a Map

This visualization shows world population by country using scaled circles over a natural Earth projection map, with circle area proportional to 2018 population data. Users can pan and zoom the map and hover over countries to see regional names and exact population figures. The code uses D3 v5 with `geoNaturalEarth1`, `geoPath`, `geoCentroid`, `scaleSqrt`, and `zoom`, rendering SVG paths for country borders and semi-transparent circles. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Yyakupermurat

78% match