Skip to main content
SimilarExport ZIP
100%

Points on a Map

✓ Published1🌍 Public
Ppnlinyz
Last edited May 10, 2021
Created on May 10, 2021
Forked from Polished World 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.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

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

Points on a Map

This example displays a natural Earth projection map with country boundaries, graticules, and city points overlaid as semi-transparent teal circles. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and interior borders from World Atlas TopoJSON data, while a CSV of world cities is mapped through the projection to position each dot. The React component structure manages asynchronous data loading via useWorldAtlas and useCities hooks, with SVG rendering styled through CSS to create a clean, polished aesthetic.

Aaakarsh satyam
94% match
Loading thumbnail…

World Map with City Points

This example displays a world map with cities plotted as points using a Natural Earth projection. The visualization renders landmasses, country borders, graticules, and a sphere outline, with semi-transparent teal circles representing city locations. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for geographic projection, TopoJSON for world atlas data, and CSV-loaded city coordinates. City points are positioned through `d3.geoPath`'s projection function, converting latitude and longitude into SVG circle positions.

SSam Hege
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

Points on a Map

This example displays a world map with points marking cities. The visualization uses a Natural Earth projection, rendered as a sphere with graticules and landmasses, overlaid with semi-transparent teal circles representing city locations from a CSV dataset. The map is drawn using SVG paths generated by `d3.geoPath` and the `geoNaturalEarth1` projection, while city coordinates are projected and placed as circles. The React application loads the world atlas and city data via `d3.json` and `d3.csv` helpers, with the map and points updated upon data arrival.

PPeter Krevenets
94% match
Loading thumbnail…

Points on a Map

A world map rendered with a Natural Earth projection displays global cities as semi-transparent circles, sized by population. The visualization uses React and D3 v7, with `geoNaturalEarth1` and `geoPath` to draw landmasses, graticules, and country interiors from TopoJSON data. City coordinates are projected and plotted as SVG circles, with a sqrt scale mapping population to radius. Data comes from a CSV of world cities loaded via `d3.csv`.

BBen Seebeck
94% match