points on a map

100%

points on a map

✓ Published1🌍 Public

Last edited Apr 12, 2021

Created on Apr 12, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a World MAP

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.

Zzyniax

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

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

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

88% match

Loading thumbnail…

Points on a Map

A world map rendered in SVG displays city points overlaid on landmasses and graticules. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from World Atlas TopoJSON data. Each city is plotted as a semi-transparent circle positioned via the projection function. City coordinates come from a CSV dataset loaded with d3.csv, while topography is handled with topojson.feature and topojson.mesh.

OOleg Zhernovoy

88% match

Loading thumbnail…

points on a map

This map visualization displays global city locations as semi-transparent dots overlaid on a natural Earth projection of the world. The geographic context is rendered using d3.geoNaturalEarth1 with d3.geoPath for land masses, graticules, and sphere outlines. City coordinates from a world cities CSV dataset are projected onto the SVG using the same projection function, with each point drawn as a small circle. The React component structure manages asynchronous data loading for both world atlas TopoJSON data and city coordinates.

BBlake McCarty

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

88% match

Loading thumbnail…

Points on a map

A world map rendered in SVG displays all cities from a CSV dataset as small translucent red points. The map is built with React and D3, using the `geoEqualEarth` projection, `geoPath`, and `geoGraticule` to draw land masses and graticules from a TopoJSON atlas, while the points are plotted by projecting each city’s longitude and latitude with `projection([d.lng, d.lat])`. The visualization highlights the global distribution of urban centers through a sparse scatterplot overlay.

FFrederick O'Brien

88% match