Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Oct 5, 2019

Created on Oct 5, 2019

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.

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, using circles sized by a square-root scale to represent population magnitude. The visualization employs a Natural Earth projection with graticules and country boundaries, rendered as SVG paths. City data comes from the Simplemaps World Cities Database, loaded via `d3.csv`, while country boundaries use TopoJSON from the World Atlas. The React app uses `d3.geoPath` for map geometry and `scaleSqrt` for circle radii, with semi-transparent teal circles overlaid on a light gray landmass.

EEric Ho

97% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations greater than 50,000 as sized circles, using a square-root scale to map population values to circle radii up to 15 pixels. The map is rendered in SVG with React, using D3’s geoNaturalEarth1 projection and geoPath to draw landmasses, country boundaries, and graticules. City coordinates and populations come from a Simplemaps dataset, loaded via d3.csv, while country geometries derive from World Atlas TopoJSON.

Aachintyatripathi

97% 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

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, where the area of each teal point is proportional to city population via a square-root scale. The map includes landmasses, country boundaries, and graticules, all rendered as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from the Simplemaps World Cities Database, loaded with `d3.csv` in React. Point sizes are computed with `d3.scaleSqrt`, with circles rendered at projected coordinates from `d3.geoPath`.

Llukastieber

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, with each city shown as a semi-transparent circle whose radius is proportional to population via a square-root scale. The map uses a natural Earth projection and includes graticules, country land masses, and interior boundaries. The visualization is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` for rendering the map, `d3.scaleSqrt` for the circle sizes, and data loaded from a Simplemaps world cities CSV.

TTatyana Milanova

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, with each city represented as a circle whose area encodes population using a square-root scale. The visualization uses d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render country boundaries and graticules, while React manages the SVG scene. City coordinates and populations come from a Simplemaps World Cities CSV, and country boundaries derive from the World Atlas TopoJSON, styled with subtle gray fills and strokes.

VVineel Gannu

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized proportionally using a square-root scale. The visualization layers Natural Earth landmasses, graticules, and a sphere outline, rendered via `d3.geoPath` with a `geoNaturalEarth1` projection. City coordinates and population data come from a CSV fetched using `d3.csv`, while country boundaries use TopoJSON converted with the `feature` API. React manages component state, with the SVG marks generated through the `Marks` component, combining `d3.scaleSqrt` for radius scaling and `d3.max` for domain calculation.

BBizmundo

96% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, sized proportionally to their population using a square-root scale. The visualization uses React for the user interface and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render country boundaries, graticules, and a sphere backdrop. City data comes from Simplemaps, while country shapes come from World Atlas TopoJSON. Circles are positioned via the projection and sized using `scaleSqrt` from D3, with opacity set through CSS.

Ssarabaghery76

96% match