Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited Mar 9, 2023

Created on Mar 9, 2023

A world map displays cities as semitransparent red circles, with area proportional to population using a square-root scale. The map uses a natural Earth projection with graticules, landmasses, and interiors rendered as SVG paths via `d3.geoPath`. The React application loads world atlas TopoJSON and city data from CSV, using `d3.csv` and `topojson.feature`/`topojson.mesh`. Sizes are computed with `d3.scaleSqrt` powered by the population field, with a maximum radius of 15 pixels.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

94% match

Loading thumbnail…

Points on a Map (cities)

A world map displays cities as semi-transparent circles sized by population, with landmasses, graticules, and interior borders rendered via d3.geoPath and geoNaturalEarth1. The projection maps latitude and longitude to SVG coordinates, while a d3.scaleSqrt converts population values to circle radii. Data comes from a CSV of world cities, and the map uses React hooks to load TopoJSON world-atlas geometry.

AAnthony Ynami

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent teal circles, with circle size encoding population via a square-root scale. The map uses a Natural Earth projection with land masses, graticules, and country interiors rendered via `geoPath` and `geoGraticule` from D3. The React app loads TopoJSON from World Atlas and CSV city data, then projects coordinates through `geoNaturalEarth1` to position the SVG circles.

AAnkit-Ian-53787

93% match

Loading thumbnail…

Points on a Map with Size

A world map displays cities as semi-transparent circles, with circle size encoding each city’s population using a square-root scale. The map renders geographic landmasses, graticules, and country borders from the World Atlas TopoJSON, projected with `d3.geoNaturalEarth1`. City data loads from a CSV via `d3.csv`, while React components manage state and render the SVG, using `d3.geoPath` to draw map features and `d3.scaleSqrt` for sizing.

CChris Knight

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

Points on a Map

A world map displays country boundaries and graticules over a light gray sphere, with semi-transparent teal circles sized by city population. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render land, interiors, and sphere outlines from TopoJSON data. City coordinates are projected and drawn as SVG circles, with radii scaled using d3.scaleSqrt applied to population values from a CSV dataset. The React component structure manages state for both world atlas and city data.

Jj-PGi

93% match