World Map with City Points Sized

Points on world map

This visualization displays world cities as scaled circles on a natural Earth projection, with marker size encoding population using a square-root scale. The map renders land masses, graticules, and country borders in muted grays, while semi-transparent teal points overlay major urban centers. Built with React and D3 v7, it uses `geoNaturalEarth1` with `geoPath` for geographic projection, TopoJSON for world atlas data, and `scaleSqrt` to map population values to circle radii. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` function.

AAlex Stulov

Sized Points on a Map

This example displays a world map with sized points representing cities, where the circle radius encodes each city's population using a square root scale with a maximum radius of 15 pixels. It renders the Natural Earth projection via d3.geoPath, including graticules and land boundaries from Topojson World Atlas data. City coordinates and population values come from a CSV dataset, and the visualization uses React for component structure alongside D3 v6 for geographic projections and scales, with all marks drawn as SVG elements.

WWolfgang

Points on a Map

A world map displays the geographic distribution of cities, with circles sized by population. The visualization uses a natural Earth projection with graticules, land masses, and country borders. Built with React and D3 v6, it employs `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the SVG. City data comes from a CSV of world cities, while country boundaries derive from World Atlas TopoJSON. Circle radii are scaled using `scaleSqrt` based on population values.

Ee-ines

Points on a Map

This visualization displays a world map with cities plotted as scaled circles representing population. The map uses the Natural Earth projection with graticules, country boundaries, and interiors rendered via D3's `geoPath` and `geoNaturalEarth1` projection. City positions come from a CSV file, and circle radii are scaled using D3's square-root scale (`scaleSqrt`) based on population data. The visualization is built with React and renders SVG marks, including land masses, a sphere outline, and graticule lines, all styled with a clean grayscale aesthetic.

Ccshm407

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke

Points on a Map with Size

A world map displays city populations as semi-transparent circles, with point size encoding each city’s population value via a square-root scale. The visualization uses the Natural Earth projection via d3.geoNaturalEarth1 and renders graticules, land masses, and country interiors with d3.geoPath. City coordinates are projected from longitude and latitude, while the map geometry comes from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. React components manage the SVG rendering, and the data is loaded asynchronously from a CSV of world cities using d3.csv.

FFloorNummer

Points on a Map

This example displays world cities as scaled circles on a natural Earth projection, with each circle’s radius proportional to its population. The map renders landmasses, graticules, and interiors using `d3.geoPath` and `d3.geoNaturalEarth1`, while the city points are drawn as SVG circles with a square-root scale for size encoding. The visualization loads geographic topology from `world-atlas` and city CSV data via `d3.csv`, using React hooks (`useState`, `useEffect`) to manage the asynchronous data fetching and triggering re-renders.

NNikita Toropov

World Atlas with Points

This example displays a world map using a natural Earth projection, with graticules and country boundaries rendered as SVG paths. City populations are shown as semi-transparent circles scaled by the square root of their population, creating a proportional symbol map. The visualization uses React with D3.js v5, employing `geoNaturalEarth1` and `geoPath` for the map projection, while city data is loaded from a CSV file.

Jjulesgentry