Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Jun 1, 2021

Created on Jun 1, 2021

This example visualizes global population distribution by rendering cities with over 50,000 inhabitants as semi-transparent circles, sized with a square-root scale to reduce visual disparity. The map uses an equal-area natural Earth projection with graticules and political interiors drawn from the World Atlas TopoJSON. The React app uses `d3.geoPath` for geographic features and `d3.scaleSqrt` for proportional sizing, with city data sourced from the Simplemaps World Cities Database.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations exceeding 50,000 as semi-transparent circles sized proportionally to population using a square-root scale. The map uses a natural Earth projection, with country boundaries, interiors, and graticules rendered via d3.geoPath from TopoJSON world-atlas data. City coordinates are projected using d3.geoNaturalEarth1, with population data loaded from a Simplemaps CSV. The React component applies the size scale to each circle’s radius, creating an immediate visual comparison of urban population distribution across continents.

FFelipe Oyarzún Ramos

94% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using circles sized by a square-root scale to represent population magnitude. The visualization employs a Natural Earth projection with graticules and country boundaries, rendered as SVG paths. City data comes from the Simplemaps World Cities Database, loaded via `d3.csv`, while country boundaries use TopoJSON from the World Atlas. The React app uses `d3.geoPath` for map geometry and `scaleSqrt` for circle radii, with semi-transparent teal circles overlaid on a light gray landmass.

EEric Ho

94% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering sized circles for cities with populations exceeding 50,000. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw countries, graticules, and interiors from World Atlas TopoJSON data. City positions are projected from latitude and longitude coordinates, with circle radii scaled by population using `d3.scaleSqrt`. The React component fetches city data from a Simplemaps World Cities CSV.

CClement Yan

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

94% match

Loading thumbnail…

Sized Points on a Map

This example renders a world map with circles sized by population for cities over 50,000 inhabitants, using a square-root scale to encode the data. The map is drawn with React and SVG, projecting geographic coordinates through D3’s `geoNaturalEarth1` and `geoPath`, with graticules and country boundaries from the World Atlas TopoJSON. City data comes from Simplemaps, and each point’s radius is determined by `scaleSqrt` mapping maximum population to a 15-pixel radius.

IIbrahim Hussain

94% match

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using a square-root scale to encode population by circle radius. The map renders with the `geoNaturalEarth1` projection and `geoPath` in React, showing graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps via CSV, loaded with `d3.csv`. Circles are drawn with SVG, styled with a teal fill and 0.3 opacity.

Eerahma

94% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global cities with populations above 50,000, using a square-root size scale to encode population magnitude as circle radius on an equirectangular projection. The map renders with a light-styled sphere, graticules, and country boundaries, with semi-transparent teal circles overlaid at city coordinates. Built with React, the visualization uses D3's `geoNaturalEarth1` projection, `geoPath` for map geometries, and `geoGraticule` for the grid. Country shapes come from the World Atlas TopoJSON, while city data is loaded via D3's `csv` parser from Simplemaps' public dataset.

GGokulkrishnan1996

94% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, with each city shown as a semi-transparent circle whose radius is proportional to population via a square-root scale. The map uses a natural Earth projection and includes graticules, country land masses, and interior boundaries. The visualization is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` for rendering the map, `d3.scaleSqrt` for the circle sizes, and data loaded from a Simplemaps world cities CSV.

TTatyana Milanova

94% match