Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
Qqhfzwyx
Last edited Apr 28, 2020
Created on Apr 28, 2020

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.

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

Sized Points on a Map

This example presents a world map with cities sized proportionally to their population, using a square-root scale to encode the data. The visualization renders geographic features like landmasses, graticules, and country boundaries using `geoNaturalEarth1` and `geoPath`, while city points are drawn as SVG circles positioned via the projection. The map is built with React and D3 v5, pulling city data from a CSV of the Simplemaps World Cities Database and country topology from World Atlas TopoJSON.

CCurran Kelleher
96% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

RRochelle
96% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population. It uses a Natural Earth projection via D3's `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors. The map’s cities, sourced from a Simplemaps database, are drawn as SVG circles with radii scaled by the square root of population using D3’s `scaleSqrt`. The visualization is built with React and D3, with styles for the land, sphere, and graticules defined in CSS, and data loaded asynchronously from external files.

Fftjyangf
96% 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
95% match
Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude. The map includes landmasses, graticules, and country interiors rendered via d3.geoPath and a geoNaturalEarth1 projection. City coordinates and population data come from a CSV dataset, with React managing the component lifecycle and d3.v5 handling data loading and scaling. Semi-transparent teal circles are positioned using the projection and scaled up to a maximum radius of 15 pixels.

KKhalid
95% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and interiors. City data is loaded from a CSV using `d3.csv`, with circle radii scaled by a square root scale (`d3.scaleSqrt`). The visualization is built with React and rendered as SVG, styled with soft teal, semi-transparent points.

SSam
95% match