Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
Mmimimichelle
Last edited Oct 1, 2020
Created on Oct 1, 2020

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.

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

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.

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

A world map displays cities with populations exceeding 50,000, using circle size to encode population magnitude. The visualization renders geographic context via d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, graticules, and country boundaries. City positions are projected from latitude and longitude coordinates, with circle radii scaled by a d3.scaleSqrt function representing population values. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, while React components manage the SVG rendering.

Nnkohdatavis
94% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using circle size to encode population magnitude. The visualization renders geographic context via d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, graticules, and country boundaries. City positions are projected from latitude and longitude coordinates, with circle radii scaled by a d3.scaleSqrt function representing population values. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, while React components manage the SVG rendering.

Nnkohdatavis
94% match