Points on My World Map

100%

Points on My World Map

✓ Published0🌍 Public

Last edited Oct 10, 2019

Created on Oct 10, 2019

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.

AI-generated description

A geoEqualEarth representation from geoJSON and topoJSON (https://unpkg.com/world-atlas@2.0.2/countries-50m.json).

MIT Licensed

Similar vizzes

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

93% match

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

92% match

Loading thumbnail…

World Map points

A world map displays city points scaled by population, with country boundaries, graticules, and a sphere outline rendered as SVG. Using React and D3 v5, the visualization employs d3.geoNaturalEarth1 for projection, d3.geoPath for drawing land and graticule geometry, and d3.scaleSqrt for radius mapping. City data comes from a CSV of world cities, while country shapes load from World Atlas TopoJSON. Semi-transparent teal circles overlay the map, with land filled light gray and interiors shown as thin strokes.

Mmarianamartins87

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

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 Map

This example displays a world map with city points overlaid, using a Natural Earth projection. The map shows country boundaries, graticules, and a sphere outline, with city locations plotted as circles. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the geographic features, while city data is loaded from a CSV via d3.csv. The visualization is built with React, rendering SVG elements, and uses TopoJSON from the World Atlas for country polygons and interior borders.

MMark Lam

91% match

Loading thumbnail…

Points on a Map

This example displays a world map with points representing cities, with circle sizes scaled by population using a square-root scale. It shows a natural Earth projection with graticules and country boundaries overlaid. The visualization uses React to manage state and rendering, while D3 v5 provides `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. City data comes from a CSV file, and world geography is loaded as TopoJSON. Circles are semi-transparent teal, plotted via projected longitude and latitude coordinates.

Aazharahmad0

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

91% match