Sized Points On A Map

100%

Sized Points On A Map

✓ Published1🌍 Public

Last edited Feb 26, 2022

Created on Feb 26, 2022

This example shows a world map with circles sized by city population, where each city is positioned by its latitude and longitude. The map uses a stereographic projection and includes graticules, land masses, and country borders. React manages the component state while D3’s `csv` loader fetches city data from a GitHub gist, and `scaleSqrt` maps population values to circle radii. The visualization renders in SVG, with semi-transparent blue circles over a light gray map.

AI-generated description

Sized Points On A Map with Simple Maps Database using [a clean csv of world cities data] (https://gist.github.com/curran/13d30e855d48cdd6f22acdf0afe27286)

MIT Licensed

Similar vizzes

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 displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

RRochelle

92% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using data from the Simplemaps World Cities Database. The map renders geographic features with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while country boundaries load from World Atlas TopoJSON. City points are placed via projection coordinates and scaled with d3.scaleSqrt, all built within a React component using SVG. The visualization includes graticules and styled land, sphere, and interior paths for a polished cartographic look.

GGustavoRiveraM

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

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

91% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using data from Simplemaps and country boundaries from World Atlas TopoJSON. The map is rendered with SVG and React, employing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while a d3.scaleSqrt maps population values to circle radii. The visualization includes graticules and land/interior boundaries, with semi-transparent teal circles marking cities with populations over 50,000.

Ggilbertlmw

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

91% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, showing all cities with populations greater than 50,000. The visualization uses React for rendering, combined with d3.v5 for geographic projections and data handling, including d3.geoPath to draw country boundaries and graticules from World Atlas TopoJSON. City coordinates and population data come from Simplemaps, with circle size encoded through a d3.scaleLinear function. The map uses a light, polished color scheme with semi-transparent teal circles over gray landmasses.

SSalmanHamdouchi

91% match