Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published1🌍 Public
DD2552
Last edited May 27, 2020
Created on May 27, 2020

This visualization displays a world map with cities of populations exceeding 50,000, using circle size to represent population magnitude. The map is rendered with D3.js, using `d3.geoPath` for country boundaries and graticules from TopoJSON data, while city points are projected and scaled based on the Simplemaps database. The visualization is polished with a Poppins font and a clean, minimal aesthetic, presenting global population distribution at a glance.

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 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
92% match
Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with cities whose population exceeds 50,000, using sized circles to represent population magnitude. The map includes country borders and graticules, styled with a clean, minimal aesthetic. Built with React and D3 v6, it uses `d3.geoPath` for map rendering, `d3.scaleSqrt` to size circles by population, and loads geographic data from World Atlas TopoJSON and city data from Simplemaps via `d3.csv` and `d3.json`.

Yyilan
92% 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
91% 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
91% 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
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
90% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using scaled circle radius to encode population size. The visualization combines a Natural Earth projection rendered through d3.geoPath with graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps’ World Cities Database, loaded via d3.csv and projected onto the map. Circle sizes use d3.scaleSqrt for area encoding, with React managing the SVG rendering and d3.v5 providing the geographic and data utilities.

Nnnminh199914
90% 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
90% match