Size Bubbles

100%

✓ Published1🌍 Public

Last edited May 18, 2022

Created on May 18, 2022

A world map displays cities as semi-transparent bubbles, with bubble area scaled by population using a sqrt scale and a maximum radius of 15 pixels. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and interiors from TopoJSON world-atlas data, while city coordinates and populations come from a cleaned CSV. React manages the component state and rendering, with SVG circles positioned by projecting each city’s longitude and latitude. The map’s styling uses light gray fills for land and graticules, with teal, translucent circles for urban centers.

AI-generated description

A map of the world with cities using Topojson data from: 'https://unpkg.com/world-atlas@2.0.2/countries-50m.json';

MIT Licensed

Similar vizzes

Loading thumbnail…

Using Size

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude with area. The map renders landmasses, interiors, graticules, and the sphere via d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleSqrt maps population values to circle radii up to 15 pixels. Data comes from a CSV of world cities loaded with d3.csv, and the map uses TopoJSON from world-atlas. React manages the SVG rendering, with circles styled semi-transparent teal.

NNikhil Reddy Manda

88% match

Loading thumbnail…

Using Size

A world map displays cities with populations over 50,000, using circle size to encode population magnitude with a square-root scale. The map includes country boundaries, graticules, and a sphere outline, rendered as SVG via React. It uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, with data from the Simplemaps World Cities Database and World Atlas TopoJSON, processed through `topojson.feature` and `mesh`.

MMichael Bergerson

87% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles, sized proportionally to population using a square root scale. The visualization renders geographic context—landmasses, country interiors, graticules, and a sphere—using d3.geoNaturalEarth1 and d3.geoPath, with city data loaded via d3.csv from the Simplemaps World Cities Database and country boundaries from TopoJSON. React manages the component state, while d3-scale and d3-geo handle projection and sizing.

WWhitney Hung

87% match

Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

LLove Wessman

87% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized proportionally using a square-root scale. The visualization layers Natural Earth landmasses, graticules, and a sphere outline, rendered via `d3.geoPath` with a `geoNaturalEarth1` projection. City coordinates and population data come from a CSV fetched using `d3.csv`, while country boundaries use TopoJSON converted with the `feature` API. React manages component state, with the SVG marks generated through the `Marks` component, combining `d3.scaleSqrt` for radius scaling and `d3.max` for domain calculation.

BBizmundo

86% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented by a semi-transparent circle whose radius encodes population size via a square-root scale. The visualization uses React for rendering SVG elements, with d3’s geoNaturalEarth1 projection and geoPath to draw land boundaries, country interiors, graticules, and the sphere. City coordinates are projected from latitude and longitude, while data comes from a CSV sourced from Simplemaps’ World Cities Database, processed through d3.csv. Topology for country boundaries is loaded via d3.json from World Atlas TopoJSON.

JJunyanL

86% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal points, sized proportionally to population using a square-root scale. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and sphere geometry from World Atlas TopoJSON, while city coordinates are projected from a Simplemaps CSV. React components manage the asynchronous data loading via d3.csv and d3.json, with SVG circles positioned by the projection and radii mapped from the scale.

支支良

86% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, sized proportionally to their population using a square-root scale. The visualization uses React for the user interface and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render country boundaries, graticules, and a sphere backdrop. City data comes from Simplemaps, while country shapes come from World Atlas TopoJSON. Circles are positioned via the projection and sized using `scaleSqrt` from D3, with opacity set through CSS.

Ssarabaghery76

86% match