Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
EElena Dreosti
Last edited Sep 30, 2020
Created on Sep 30, 2020

This example displays a Natural Earth projection world map with semi-transparent red circles sized by population for cities exceeding 50,000 residents. The visualization uses React for component structure and D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for map rendering, plus a square root scale for circle sizing. City data comes from the Simplemaps World Cities Database, while country boundaries use the World Atlas TopoJSON dataset. The map shows graticules and styled land masses with interactive hover states on country boundaries.

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 city populations greater than 50,000 as semi-transparent red circles, with circle area scaled by population using a square-root scale. Natural Earth projection and geoPath render landmasses, country boundaries, and graticules from World Atlas TopoJSON. City coordinates from the Simplemaps World Cities Database project onto the map via d3.geoNaturalEarth1, while React manages the SVG rendering and loading states.

EElena Dreosti
95% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent red circles, with circle size scaled by population using a square-root scale. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, rendering landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations come from a Simplemaps CSV, processed with React hooks and D3’s `csv` loader, and the visualization is built with React and SVG.

EElena Dreosti
95% match
Loading thumbnail…

Sized Points on a Map

A natural Earth projection displays world cities with populations over 50,000 as semi-transparent teal circles, sized by population using a square root scale that caps the radius at 15 pixels. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses, country borders, and graticules, while React components load city data from a Simplemaps CSV and world topology from World Atlas Topojson. Circle positions are computed by projecting each city’s longitude and latitude, with SVG used for all rendering.

Mmahmud-tantoush
94% match
Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering sized circles for cities with populations exceeding 50,000. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw countries, graticules, and interiors from World Atlas TopoJSON data. City positions are projected from latitude and longitude coordinates, with circle radii scaled by population using `d3.scaleSqrt`. The React component fetches city data from a Simplemaps World Cities CSV.

CClement Yan
94% match
Loading thumbnail…

Sized Points on a Map

This example displays cities with populations over 50,000 as sized points on a world map, using a square-root scale to encode population by circle radius. The map renders with the `geoNaturalEarth1` projection and `geoPath` in React, showing graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps via CSV, loaded with `d3.csv`. Circles are drawn with SVG, styled with a teal fill and 0.3 opacity.

Eerahma
94% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
93% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
93% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
93% match