Sized Points on a Map

100%

Sized Points on a Map

✓ Published1🌍 Public

Last edited Feb 12, 2023

Created on Feb 12, 2023

This visualization displays the world’s most populous cities as semi-transparent points sized proportionally to their population using a square-root scale. A natural Earth projection renders landmasses, graticules, and country interiors via d3.geoPath. City data is loaded from a CSV using d3.csv, while geographic features come from the world-atlas TopoJSON, processed with topojson.feature and topojson.mesh. React components manage the SVG rendering.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a map

This visualization displays global cities as sized points on a natural Earth projection map, with circle radii scaled proportionally to population using d3.scaleSqrt. The map renders landmasses, graticules, and country interiors as SVG paths generated via d3.geoPath, while city positions are projected from longitude and latitude coordinates. The React component loads world atlas TopoJSON and city CSV data asynchronously, then applies semi-transparent teal circles to highlight population distribution across continents.

SSong Tao Chen

93% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with points sized proportionally to city populations, showing cities with over 50,000 residents. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for rendering country boundaries and graticules. City coordinates and populations come from a CSV loaded from Simplemaps, while country shapes use TopoJSON from World Atlas. The point radii are scaled with d3.scaleSqrt, and React manages component rendering.

KKhalid

92% 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.

支支良

92% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using sized points to encode population via a d3.scaleSqrt square-root scale. The visualization renders a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with graticules and country boundaries from World Atlas TopoJSON. City data from Simplemaps is plotted as semi-transparent circles. The React-based code loads TopoJSON and CSV data asynchronously, then applies d3.geoPath to project coordinates and d3.scaleSqrt to determine circle radii.

Aakp21

92% match

Loading thumbnail…

Sized Points on a Map

This visualization presents a world map with circular points sized proportionally to city populations, showing all cities with over 50,000 residents. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render land boundaries, graticules, and the globe sphere from World Atlas TopoJSON data, while city coordinates come from a CSV database. Point sizes are scaled using d3.scaleSqrt, with React managing the SVG rendering and D3 v5 handling geographic and data processing tasks.

Mmimimichelle

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

92% match

Loading thumbnail…

Sized Points on a Map

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.

SSabin Bhandari

92% match

Loading thumbnail…

Points on a Map

This visualization displays the world’s most populous cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The map renders landmasses, country interiors, graticules, and a sphere outline via d3.geoPath and geoNaturalEarth1. City positions are projected from latitude and longitude coordinates, with data loaded from a CSV of world cities using the d3.csv function. The SVG marks are built as React components, while the atlas topology comes from the world-atlas package.

Bbsolomon103

92% match