Sized Points on a Map

100%

Sized Points on a Map

✓ Published1🌍 Public

Last edited Dec 19, 2019

Created on Dec 19, 2019

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.

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

96% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with cities of populations exceeding 50,000, using sized points to represent population magnitude. Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` render landmasses, graticules, and country interiors from TopoJSON data. Circles are positioned through projection of latitude and longitude coordinates, with radius determined by a square-root scale (`d3.scaleSqrt`) mapping population values to a maximum radius of 15 pixels. The React-based implementation loads city data from a CSV using `d3.csv` and renders all elements as SVG marks.

JJCarpenter-WPI

95% match

Loading thumbnail…

Sized Points on a Map

This example displays cities with populations exceeding 50,000 as sized points on a world map, using the natural Earth projection. Country boundaries and graticules appear beneath the points. The visualization uses React with D3 v5, including `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. City population data is loaded from a CSV via `d3.csv`, while land and interior boundaries come from World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`. Circle radii are scaled by population values.

Fftjyangf

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

95% match

Loading thumbnail…

Sized Points on a Map

This visualization displays world cities with populations exceeding 50,000 as sized points on a natural Earth projection. Circle radii encode population using a square root scale, with data sourced from the Simplemaps World Cities Database. The map renders via React and SVG, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw country boundaries and graticules, while TopoJSON provides land and interior mesh geometry.

Kknut_ivar_osvoll@hotmail.com

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

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

94% match

Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering points for cities over 50,000 inhabitants on a Natural Earth projection, with point radius scaled using d3.scaleSqrt to reflect population. The map is drawn in SVG using d3.geoNaturalEarth1, d3.geoPath, and graticules generated by d3.geoGraticule, while country boundaries and interiors come from World Atlas TopoJSON. City data is sourced from Simplemaps’ World Cities Database, loaded via d3.csv. Semi-transparent teal circles emphasize densely populated regions, with styling handled through CSS.

Mmanalhilali

94% match