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 map visualization plots world cities with populations exceeding 50,000 as sized points, using a square-root scale to encode population via circle radius. The map uses `geoNaturalEarth1` projection with `geoPath` for land, graticules, and country interiors. City data comes from Simplemaps’ World Cities Database, rendered in React with SVG circles. The visualization is built with d3.v5, featuring a clean, light-styled map with semi-transparent teal circles showing population distribution globally.

DDonald Bagwell

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles whose radii are scaled linearly by population. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to render landmasses and country borders, and d3.geoGraticule for background grid lines. React manages the component state, with d3.csv fetching city data from Simplemaps and d3.json loading world-atlas TopoJSON. Circles are sized via d3.scaleLinear, capped at a 15-pixel radius.

TTrang Nguyen

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

This visualization displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The map includes land masses, country borders, graticules, and a sphere outline, rendered with `geoNaturalEarth1` projection and `geoPath` from d3. City data comes from the Simplemaps World Cities Database, filtered to populations above 50,000. The React app loads TopoJSON world atlas data and CSV city data, then renders SVG circles with transparency over the geographic features.

KKunkgg

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

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