Points on the map original

Points on a Map

This visualization displays a world map with circles marking cities whose population exceeds 50,000, using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. The map includes graticules and country boundaries from World Atlas TopoJSON, with city data sourced from Simplemaps. Circle radii are scaled by population using `scaleSqrt`, rendered as semi-transparent SVG elements in React. The implementation leverages React hooks for data loading and D3 v5 for geographic projections and CSV parsing.

Zzyniax

Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. The map displays country boundaries, interiors, graticules, and a sphere outline, with circle size scaled by population using `d3.scaleSqrt`. The React-based visualization uses `d3.geoPath` for geographic rendering and `d3.geoNaturalEarth1` for projection, with city data loaded from Simplemaps via CSV and country shapes from World Atlas TopoJSON.

TToonysg

Points on a Map

A world map populated with semi-transparent circles representing the populations of cities from a cleaned World Cities dataset. The visualization uses a Natural Earth projection rendered with `d3.geoPath`, layering graticules, land masses, and country borders beneath the points. Circle radii are scaled with `d3.scaleSqrt` based on population, capped at a maximum radius of 15 pixels. The React component fetches TopoJSON world atlas data and CSV city data, then renders the SVG marks with D3 v5.

Wwindwaver

Points on a Map

This visualization displays a world map with circles representing the populations of cities, scaled using a square root scale from D3. The map, rendered as SVG in a React app, uses the D3 `geoNaturalEarth1` projection to place points. Geographic data comes from the world-atlas TopoJSON via `topojson.feature` and `topojson.mesh`, while city data loads from a CSV. The graticule, sphere, and land outlines are styled via CSS, and the semi-transparent teal circles have opacity set to 0.3.

Vvmonney

Points on a Map

This example displays a world map with cities whose populations exceed 50,000, plotted as semi-transparent circles. The map uses a Natural Earth projection via `d3.geoNaturalEarth1`, with landmasses, graticules, and country interiors drawn using `d3.geoPath` from the World Atlas TopoJSON dataset. City coordinates are projected from latitude and longitude into SVG circle positions, with the data loaded from a Simplemaps CSV via `d3.csv`. The rendering is handled in React, producing a clean, styled SVG visualization.

GGiovanniD_

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

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

This visualization layers city population data onto a world map using a natural Earth projection. Semi-transparent green circles, sized with a square-root scale, represent each city’s population, with larger circles indicating more populous urban centers. The map includes geographic graticules, land masses, and country interiors rendered via `d3.geoNaturalEarth1` and `d3.geoPath`. The React app loads TopoJSON world-atlas data and CSV city coordinates through custom hooks, with map features styled distinctly in light grays.

Ww.fukuyama@gmail.com