Skip to main content
SimilarExport ZIP
100%

Dataviz 10 - Points on map with sizes

✓ Published1🌍 Public
RRyAlpha
Last edited Nov 26, 2021
Created on Nov 26, 2021

A world map displays global cities with populations over 50,000, using circle size to encode each city’s population. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, country interiors, graticules, and a sphere backdrop. City coordinates are projected onto the map, and circle radii are scaled with `scaleSqrt` based on population data from Simplemaps. Built with React and d3.v5, the SVG rendering includes styled land, sphere, and interior boundary paths for a polished cartographic appearance.

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…

Dataviz 10 - Points on map

This visualization displays a world map with points marking cities that have populations exceeding 50,000, using data from the Simplemaps World Cities Database. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, featuring graticules, land masses, and interior boundaries from the World Atlas TopoJSON. City locations are plotted as semi-transparent teal circles positioned via the projection function. The visualization is built with React and D3 v5, loading geographic and city datasets asynchronously through custom hooks before rendering.

RRyAlpha
93% 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
90% 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
90% 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
90% match
Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with points sized by city population, using data from the Simplemaps World Cities Database for cities with over 50,000 residents. D3’s `geoNaturalEarth1` projection and `geoPath` render the sphere, graticules, and land boundaries from the World Atlas TopoJSON. A `scaleSqrt` maps population values to circle radii up to 15 pixels, while React composes the SVG elements. The semi-transparent teal circles overlay a light gray landmass, with country borders and graticules providing geographic context.

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

Size and Points on a Map

This map shows the population of cities worldwide as scaled symbols overlaid on a geographic projection. Using React with D3 v6, it renders a Natural Earth projection with graticules and land boundaries via `geoNaturalEarth1` and `geoPath`. City populations are encoded as circle radii using a square root scale (`scaleSqrt`) ranging up to 15 pixels, with the data sourced from a cleaned world cities CSV file. The visualization demonstrates a hybrid React-D3 approach, where D3 handles the mathematical projection and scaling while React manages the SVG markup and component lifecycle.

HHollyClarke19
90% match