Points on a Map

100%

Points on a Map

✓ Published1🌍 Public

Last edited May 6, 2024

Created on May 4, 2024

This visualization displays cities on a world map, with circle area encoding each city’s population. A natural Earth projection, rendered via `d3.geoPath`, draws land, country interiors, graticules, and a sphere backdrop in SVG. City coordinates are projected using `d3.geoNaturalEarth1`, and circle radii come from a `d3.scaleSqrt` scale. The map uses world-atlas TopoJSON data, while city populations come from a cleaned CSV of world cities sourced from the UN World Population Prospects 2019.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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

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

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

93% match

Loading thumbnail…

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

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

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

Points on a Map

This example visualizes the global distribution of cities, with circle size encoding each city’s population using a square-root scale. A Natural Earth projection renders landmasses, graticules, and country borders via `d3.geoPath` and `geoNaturalEarth1`, while city points are positioned using the same projection. Data comes from a CSV of world cities and TopoJSON world-atlas geometry, all drawn as SVG within a React component.

KKtuzinowski

93% match

Loading thumbnail…

Points on a map

This example displays a world map with cities plotted as semi-transparent circles, where circle size reflects each city’s population. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render land, graticules, and country borders from TopoJSON data. City coordinates and populations come from a CSV loaded with `d3.csv`, and circle radii are scaled with `d3.scaleSqrt`. The visualization is built with React hooks for data fetching and renders as SVG.

LLewis Ward

93% match