Skip to main content
SimilarExport ZIP
100%

Points on a Map

✓ Published1🌍 Public
NNikhil Reddy Manda
Last edited May 15, 2021
Created on May 15, 2021

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.

AI-generated description

Points on a Map

MIT Licensed

Similar vizzes

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
92% 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
91% match
Loading thumbnail…

Points on a Map

This visualization displays global city locations as small, semi-transparent points on a natural Earth projection. The map itself is rendered using SVG paths for landmasses, graticules, and interiors, computed via `d3.geoPath` and `d3.geoGraticule`. City coordinates from a CSV file are projected using `d3.geoNaturalEarth1` and plotted as circles. The React application loads world atlas TopoJSON and city data through custom `useWorldAtlas` and `useCities` hooks, illustrating a straightforward layered approach to geographic point mapping.

MMichael Bruno
91% match
Loading thumbnail…

Points On A Map 2

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.

Aadewole-top
91% 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 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
91% match
Loading thumbnail…

Points on a Map

This example displays a world map with city points overlaid, using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. The map includes land boundaries, graticules, and interiors rendered as SVG paths from World Atlas TopoJSON data. City locations, loaded from a CSV with d3.csv, are plotted as semi-transparent circles. The visualization is built with React and D3 v5, demonstrating a clean, styled cartographic composition with an equirectangular-like aesthetic.

Ppnlinyz
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