Points on a World MAP

100%

Points on a World MAP

✓ Published0🌍 Public

Last edited Apr 13, 2021

Created on Apr 13, 2021

This visualization displays the world’s cities as small circles positioned on an equal Earth projection, with country boundaries drawn from TopoJSON and a plain gray sphere backdrop. The map itself is rendered using D3’s `geoEqualEarth` and `geoPath`, while city coordinates are projected into screen space and drawn as SVG circles. The data comes from a CSV of world cities, and the example intentionally mixes a polished geographic base with minimalist, unlabeled point marks.

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 map shows the locations of major world cities as circular points overlaid on a globe, with country borders, graticule lines, and a shaded sphere providing geographic context. City coordinates from a CSV file are projected using the `geoEqualEarth` projection, and their positions are rendered as SVG circles with a specified radius. The visualization is built using React, D3 v5, and the TopoJSON library for processing country boundaries and interior lines, with styling applied via CSS.

MMATTE-blz

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

90% match

Loading thumbnail…

Points on My World Map

This example displays a world map using a spherical projection with landmasses, graticules, and city points plotted as circles. The map is rendered as an SVG using React, with the D3 library's `geoEqualEarth` projection and `geoPath` for geographic shapes. City coordinates are loaded from a CSV file via D3's `csv` function, while geographic data comes from the world-atlas TopoJSON. Each city is positioned by projecting its longitude and latitude through the D3 projection, creating a global scatterplot overlay.

Bbootshine2

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

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

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

89% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

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

89% match