Fork of Sized Points on a Map

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

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized proportionally using a square-root scale. The map uses a natural Earth projection via d3.geoPath, with graticules and country boundaries rendered from World Atlas TopoJSON data. City coordinates and population figures come from Simplemaps, loaded as CSV. The visualization is built with React, d3.v5, and SVG, using hooks for data fetching and rendering marks.

RRoberto

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized using a square-root scale that maps population to radius. The map includes natural Earth landmasses with graticules and country interiors, styled in muted grays. The visualization is built with React, using d3's `geoNaturalEarth1` projection and `geoPath` for rendering, while city data comes from Simplemaps and country boundaries from the World Atlas TopoJSON.

Ddr-rompecabezas

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

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 d3.geoNaturalEarth1 projection, d3.geoPath, graticules, and country boundaries from World Atlas TopoJSON, with city data from a Simplemaps CSV. React manages state and rendering, while d3.scaleSqrt maps population values to circle radii. The SVG output includes styled landmasses, sphere background, and interior borders.

VVishwanath Hegde

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, each represented by a semi-transparent circle whose radius is scaled by population using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and country boundaries from World Atlas TopoJSON, with data sourced from Simplemaps. React components manage state and rendering, while D3 loads the data via csv and json requests.

SSteven Pearce

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, sized proportionally to their population using a square root scale. The visualization renders a natural Earth projection with graticules, landmasses, and country borders in light gray tones. React manages the component structure while D3 v5 handles geographic projection via `geoNaturalEarth1`, path generation with `geoPath`, and CSV data loading from the Simplemaps World Cities Database. Semi-transparent teal circles overlay each city location, with their radii scaled to population values.

JJean David

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