Skip to main content
SimilarExport ZIP
100%

30. Sized Points on a Map

✓ Published0🌍 Public
PPrashish Paudel
Last edited Apr 1, 2021
Created on Apr 1, 2021

A world map displays cities with populations over 50,000 as semi-transparent points sized by population using a square-root scale. The rendering combines country landmasses, interiors, and graticules from the World Atlas TopoJSON data, projected via `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. City coordinates are projected and plotted as SVG circles whose radii derive from the population values loaded from a Simplemaps CSV.

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

A world map displays cities with populations over 50,000 as sized points, using a square-root scale to map population to circle radius up to 15 pixels. The visualization is rendered as SVG via React, with geographic features drawn using `d3.geoPath` and a Natural Earth projection from `d3.geoNaturalEarth1`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations load from a Simplemaps CSV. The map uses `d3.scaleSqrt` for point sizing and an opacity of 0.3 for the city circles.

Mmkt-ds
93% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, with radius encoding population magnitude via a square-root scale. The visualization uses a Natural Earth projection and geo paths from d3.geoPath to render land, graticules, and country boundaries from World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with data sourced from the Simplemaps World Cities Database. The React-based SVG rendering leverages D3 v5 for geographic and scaling operations, presenting city population distributions across the globe.

Mmtabaka
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, with circle size scaled proportionally to population using a square-root scale. The visualization renders geographic boundaries, graticules, and a sphere outline via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` within a React component using SVG. City population data comes from the Simplemaps World Cities Database, while country shapes derive from TopoJSON world-atlas data, processed with topojson’s `feature` and `mesh` functions.

Mmoinamazon123
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, with point size scaled by population using a square-root scale. The map renders SVG paths via `d3.geoPath` with a natural Earth projection, including graticules, land masses, and country interiors from TopoJSON world-atlas data. City coordinates are projected from latitude and longitude, with React components managing the visualization and D3 modules handling data loading and scales.

Ssophburke
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented by a semi-transparent circle whose radius encodes population size via a square-root scale. The visualization uses React for rendering SVG elements, with d3’s geoNaturalEarth1 projection and geoPath to draw land boundaries, country interiors, graticules, and the sphere. City coordinates are projected from latitude and longitude, while data comes from a CSV sourced from Simplemaps’ World Cities Database, processed through d3.csv. Topology for country boundaries is loaded via d3.json from World Atlas TopoJSON.

JJunyanL
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent, sized circles, using a square-root scale to encode population values with circle radius. Natural Earth projection and geospatial paths render the sphere, graticules, landmasses, and country boundaries from TopoJSON data, styled in dark grays and greens. City coordinates come from a CSV dataset, projected via `d3.geoPath` to SVG circles, with React managing the component state and D3 utilities handling data loading and scaling.

LLaurentVuillon
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent, sized circles, using a square-root scale to encode population values with circle radius. Natural Earth projection and geospatial paths render the sphere, graticules, landmasses, and country boundaries from TopoJSON data, styled in dark grays and greens. City coordinates come from a CSV dataset, projected via `d3.geoPath` to SVG circles, with React managing the component state and D3 utilities handling data loading and scaling.

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