Points On A Map

100%

Points On A Map

✓ Published1🌍 Public

Last edited Feb 26, 2022

Created on Feb 25, 2022

This example plots thousands of world cities as a cloud of semi-transparent points on an interactive SVG map. Using a stereographic projection, D3’s geoPath renders the sphere, graticule, landmasses, and country borders, while circle elements position each city according to its latitude and longitude. The city data comes from a clean CSV sourced via simplemaps.com. React components manage data fetching with hooks, and D3’s csv and topojson helpers load and parse the datasets.

AI-generated description

Points On A Map with Simple Maps Database using [a clean csv of world cities data] (https://gist.github.com/curran/13d30e855d48cdd6f22acdf0afe27286)

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays a world map with points marking cities, rendered as an SVG using D3’s geoNaturalEarth1 projection and geoPath. The map shows landmasses, graticules, and country borders from the world-atlas TopoJSON, while city locations from a CSV file are plotted as semi-transparent circles. React manages the component state, fetching the data with useWorldAtlas and useCities hooks, and the d3.geoPath calculates the projected coordinates for each circle.

Rrstrauss127

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

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

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

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

This example displays a world map with points representing cities, sized by population. The map is rendered as SVG using React, with D3's `geoNaturalEarth1` projection and `geoPath` drawing landmasses, graticules, and sphere outlines. City coordinates are projected onto the map, and circles are scaled with `scaleSqrt`. The code loads world topology from a JSON via `useWorldAtlas` and city data from a CSV using the `csv` utility, styling land areas and points with CSS.

SSai Phaltankar

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 country boundaries and graticules, with hundreds of semi-transparent points marking city locations. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses and interiors from World Atlas Topojson, while city coordinates are projected and drawn as SVG circles. React manages the component state, fetching data via `useEffect` and D3’s `csv` and `json` loaders.

FFloorNummer

89% match