Skip to main content
SimilarExport ZIP
100%

Fork of Sized Points on a Map

✓ Published0🌍 Public
Hhenry c
Last edited Apr 2, 2022
Created on Apr 1, 2022

This example displays a world map with cities over 50,000 in population, represented by semi-transparent circles scaled by population using a sqrt scale. It uses React for component structure and d3’s geoNaturalEarth1 projection, geoPath, and geoGraticule to render land, country interiors, and graticule lines from World Atlas TopoJSON data. City coordinates and populations come from a CSV loaded via d3.csv, with circle radii capped at 15 pixels.

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…

Fork of Sized Points on a Map

This example displays a world map with cities over 50,000 inhabitants, where each city is represented by a semi-transparent circle sized proportionally to its population using a square-root scale. The map renders in SVG via React, using `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw landmasses, graticules, and country boundaries from TopoJSON. City coordinates and population values come from a CSV dataset, with circle radii mapped from population via `scaleSqrt`.

Cchar0496
97% match
Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized proportionally to population using a square-root scale. The visualization uses React for component structure, with d3-geo’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country boundaries from World Atlas TopoJSON. City coordinates and populations come from Simplemaps’ World Cities Database, loaded via d3.csv. The SVG rendering iterates over city data, projecting longitude and latitude to screen positions and setting circle radii through the `scaleSqrt` domain and range.

YYedrup
97% match
Loading thumbnail…

Fork of Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and country interiors, while circles are positioned with the projection and scaled using d3.scaleSqrt. City data comes from a CSV loaded via d3.csv, and country boundaries derive from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. The React component structure manages state with hooks and renders SVG elements.

Wwaqcas
96% match
Loading thumbnail…

Fork of Sized Points on a Map

This example presents a world map with a point for every city whose population exceeds 50,000, using a square-root scale to size each circle proportionally to its population. The map is rendered with SVG using React and D3 v5, employing `geoNaturalEarth1` for the projection and `geoPath` for drawing land, interiors, and graticules. City data comes from the Simplemaps World Cities Database, while country boundaries derive from World Atlas TopoJSON, with circles styled in teal at partial opacity.

Jjchen6912
96% match
Loading thumbnail…

Fork of Sized Points on a Map

This example presents a world map with a point for every city whose population exceeds 50,000, using a square-root scale to size each circle proportionally to its population. The map is rendered with SVG using React and D3 v5, employing `geoNaturalEarth1` for the projection and `geoPath` for drawing land, interiors, and graticules. City data comes from the Simplemaps World Cities Database, while country boundaries derive from World Atlas TopoJSON, with circles styled in teal at partial opacity.

Jjchen6912
96% match
Loading thumbnail…

Fork of Sized Points on a Map

This example displays a world map with cities exceeding 50,000 in population, using circles sized and colored by population via a square-root scale. The map uses a natural Earth projection with graticules and land boundaries from the World Atlas TopoJSON, styled with CSS. Data is loaded from Simplemaps' World Cities Database using d3.csv. The visualization is built with React, rendering SVG paths for geography and circles for cities, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for the map projection and graticule lines.

AAiden Kwong
96% match
Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized by population using a square-root scale. The visualization uses React to render SVG marks, with d3.geoNaturalEarth1 and d3.geoPath for the map projection and country boundaries. City data comes from the Simplemaps World Cities Database, and the map includes graticules and interior borders from World Atlas TopoJSON, styled with light gray fills and strokes.

Bbigstonecompany
96% match
Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays a world map with cities over 50,000 population represented by semi-transparent circles, whose radii encode population via a square-root scale. Country boundaries, graticules, and the sphere outline are drawn using `d3.geoNaturalEarth1` and `d3.geoPath` in SVG. React manages the component state, fetching city data from a CSV via `d3.csv` and country topology from the World Atlas TopoJSON using `d3.json` and `topojson.feature`. The squared-sized points highlight population distribution across the globe.

PPiotr Paszek
96% match