Points on a Map

100%

Points on a Map

✓ Published0🌍 Public

Last edited Oct 6, 2021

Created on Oct 6, 2021

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.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Points On a Map

This visualization displays a world map with cities rendered as circles, where the radius of each circle is proportional to the city's population using a square-root scale. The map uses an equal-area natural Earth projection with graticules and land masses drawn via `d3.geoPath`, while city coordinates are projected through the same projection. City population data comes from a CSV file, and the visualization is built with React and D3 v6, rendering all elements as SVG.

AAndres de la Garza

95% match

Loading thumbnail…

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

95% match

Loading thumbnail…

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

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

95% match

Loading thumbnail…

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

95% match

Loading thumbnail…

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

95% match