Points On A Map 2

100%

Points On A Map 2

✓ Published1🌍 Public

Last edited Aug 14, 2021

Created on Aug 14, 2021

This visualization displays over four million cities and towns worldwide as individual points on a natural Earth projection. The map renders land masses, graticules, and country borders in gray tones, with semi-transparent blue circles marking each city’s latitude and longitude coordinates. Built with React and D3 v5, it uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map elements, projecting city data from a Simplemaps CSV file onto the SVG canvas.

AI-generated description

Points on the world map using d3 Up-to-date: It was last refreshed in July 2021. Comprehensive: Over 4 million unique cities and towns from every country in the world. Accurate: Cleaned and aggregated from official sources. Includes latitude and longitude coordinates. Simple: A single CSV file, concise field names, only one entry per city. A dataset of cities of the world from Simplemaps Constructed by Niran Software Solution

MIT Licensed

Similar vizzes

Loading thumbnail…

Points_on_a_Map

This visualization displays a world map with hundreds of cities, each represented as a small circle with a soft opacity. It uses a Natural Earth projection via `geoNaturalEarth1` and renders geographic features through `d3.geoPath`, including graticules, land masses, and country borders. City coordinates are projected from longitude and latitude data, and the circles are drawn as SVG elements. The map aggregates city data from the Simplemaps World Cities Database and World Atlas TopoJSON, with React managing the component state and data loading.

Mmartin

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

91% match

Loading thumbnail…

Points on a Map

This visualization displays cities as semi-transparent points on a natural Earth projection map. The map is rendered as SVG using React, with geographic features generated via `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3. Country landmasses are drawn from TopoJSON data loaded with `feature` and `mesh`, while city coordinates come from a CSV file processed with `csv`. The points are positioned by projecting each city's longitude and latitude through the projection function.

NNikhil Reddy Manda

91% match

Loading thumbnail…

Points on a Map

A natural Earth projection world map displays cities with populations over 50,000 as semi-transparent teal dots, layered over light gray landmasses and graticules. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for the projection, while city coordinates are converted through the projection function to position SVG circles. City data originates from Simplemaps' World Cities Database, with country boundaries from the World Atlas TopoJSON, and the map includes subtle interior country borders for geographic context.

Ddanrhymes

91% match

Loading thumbnail…

Points on a Map

A world map rendered with a natural Earth projection displays city locations as circular points, using teal landmasses with graticules and gray interior borders. The visualization loads geographic data from a TopoJSON world-atlas file and city coordinates from a CSV dataset, processing both through React hooks. D3’s `geoPath` and `geoNaturalEarth1` project the map, while the points are positioned by projecting each city’s longitude and latitude. SVG circles with a radius of four pixels mark each city, and axes are absent, keeping the focus on spatial distribution.

OOlof Ollerstam

91% match

Loading thumbnail…

Points on a Map

This example visualizes the geographic distribution of cities as small, semi-transparent points overlaid on a world map. The map is rendered using React and D3, with landmasses and graticules drawn via `d3.geoPath` and `d3.geoGraticule` from a Natural Earth TopoJSON source. City coordinates are loaded from a CSV file and projected using `d3.geoNaturalEarth1`, with each point plotted as an SVG circle. The styling uses a light gray for land and graticules, contrasting with the teal city points.

CChris Briggs

91% match

Loading thumbnail…

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu

90% match

Loading thumbnail…

Points on a Map

This map visualizes the locations of cities as semi-transparent teal points overlaid on a world map rendered with a Natural Earth projection. The landmasses are filled with a light gray, while graticules and country interiors are drawn with subtle strokes. Built with React and D3, the example uses `geoNaturalEarth1` for projection, `geoPath` for geographic shapes, and `geoGraticule` for the grid. City data is loaded from a CSV, and world geography comes from a TopoJSON source, with points positioned using the projection function.

CChris Knight

90% match