Points on a Map

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

EEFezerKW

Points on a Map

This example displays a world map with points representing cities, with circle sizes scaled by population using a square-root scale. It shows a natural Earth projection with graticules and country boundaries overlaid. The visualization uses React to manage state and rendering, while D3 v5 provides `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. City data comes from a CSV file, and world geography is loaded as TopoJSON. Circles are semi-transparent teal, plotted via projected longitude and latitude coordinates.

Aazharahmad0

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

KK3zter

Points on a Map

A world map displays cities as semi-transparent, radius-scaled circles proportional to population, using a Natural Earth projection. The visualization, built with React and D3 (v5), renders SVG paths for land, graticules, and sphere outlines via `geoPath`, while circles are projected using `geoNaturalEarth1`. City data comes from a CSV of world cities, and the map’s geographic basemap is provided by the `world-atlas` TopoJSON, processed through `topojson.feature` and `topojson.mesh`.

RRajat Dangat

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu

Points on a Map

A world map displays cities as semi-transparent teal circles, sized proportionally to population using a square-root scale with a maximum radius of 15 pixels. The visualization combines a Natural Earth projection with graticules, land masses, and country borders, rendered via `d3.geoPath` and TopoJSON from the world-atlas dataset. Point positions are calculated using `d3.geoNaturalEarth1`, while city data comes from a CSV loaded with `d3.csv`. React manages the component state, and SVG circles represent each urban center.

KKevin McMorrow

Points on a Map

This map visualization plots world city populations using circles projected onto a Natural Earth base. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors, while a sqrt scale maps population values to circle radii. The React-based component loads city data from a CSV and renders SVG marks, using a world atlas TopoJSON for geographic context.

Ttrissentety

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