Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

GGokulkrishnan1996

Last edited Jul 10, 2022

Created on Jul 10, 2022

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.

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

95% match

Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. Circle radius encodes population magnitude using a square-root scale, making larger metropolitan areas visually prominent. The map renders country boundaries, graticules, and sphere outlines via d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while React manages the SVG markup. City data originates from Simplemaps, loaded through d3.csv, and geographical boundaries come from World Atlas TopoJSON, processed with topojson.feature and topojson.mesh.

MMari Roberts

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

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

93% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude. The map includes landmasses, graticules, and country interiors rendered via d3.geoPath and a geoNaturalEarth1 projection. City coordinates and population data come from a CSV dataset, with React managing the component lifecycle and d3.v5 handling data loading and scaling. Semi-transparent teal circles are positioned using the projection and scaled up to a maximum radius of 15 pixels.

KKhalid

93% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global cities with populations over 50,000 using sized points on a natural Earth projection. City locations and population data come from a Simplemaps world cities CSV, while country boundaries are rendered from World Atlas TopoJSON. The React app uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw graticules, landmasses, and interiors as SVG paths, then scales circle radii with `d3.scaleSqrt` based on population. Semi-transparent circles encode population density, creating a clear global distribution pattern.

TTexGal

93% match

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

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

93% match