Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
AAdriana Rodriguez Sanabria
Last edited Oct 16, 2021
Created on Oct 16, 2021
Forked from Polished World Map

This example visualizes world country boundaries and landmasses using a natural Earth projection, rendered as SVG paths. It displays graticules and interior borders alongside a styled sphere, with land and water distinguished by teal and blue fills. The visualization uses React with D3 v5, specifically `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic projections. Data comes from the World Atlas TopoJSON, processed via `topojson.feature` and `topojson.mesh` to extract land polygons and country boundaries.

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…

World Map

This example displays a world map using a natural Earth projection, with graticules and country borders drawn as SVG paths. The visualization colors land masses in teal, uses a light sphere background, and highlights internal country boundaries while omitting external ones. Built with React and D3 v6, the code leverages `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for projection and path generation, while TopoJSON's `feature` and `mesh` methods process the world-atlas dataset for land and interior boundaries.

TTaweewat Somboonpanyakul
96% match
Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, showing landmasses in teal with graticules and country borders overlaid in contrasting strokes. The example demonstrates geographic mapping with React and D3 v5, utilizing `geoNaturalEarth1` for projection and `geoPath` for rendering shapes. Data comes from the World Atlas TopoJSON dataset (countries-50m.json), processed through `topojson.feature` and `topojson.mesh` to extract land polygons and interior boundaries. The SVG output includes a sphere outline, graticule grid, land fills, and interior borders, with a loading state while fetching data.

LLuke Hayes
95% match
Loading thumbnail…

World Map

This example visualizes world countries with a natural Earth projection, displaying landmasses in teal, graticules as light gray lines, and country borders in a darker teal. The SVG rendering uses React state to load geographic data from the World Atlas TopoJSON file via `json` and `feature`/`mesh` from TopoJSON, then draws the sphere, graticule, land polygons, and interior borders with `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3.

Yyejichun@naver.com
95% match
Loading thumbnail…

World Map

This example displays a natural Earth projection of the world, rendering land masses in teal with graticule lines and country borders overlaid on a light gray sphere. Using React and D3 v7, it applies `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw the map, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from a World Atlas TopoJSON file. The SVG output includes distinct paths for the sphere, graticules, land, and borders, with styling applied via CSS classes.

SSerind Joshua McCue
95% match
Loading thumbnail…

World Map

This world map visualizes global land masses and country boundaries using a natural Earth projection. The code renders geographic features as SVG paths, with a light blue sphere, graticules, and land areas colored via CSS. It uses React to manage state and render components, while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection and path generation. TopoJSON data from the World Atlas (`countries-50m.json`) is loaded with `d3.json` and processed using `feature` and `mesh` to extract land polygons and interior borders.

AAlex Gomes
95% match
Loading thumbnail…

World Map

This example visualizes a world map using a natural Earth projection. It displays continents in teal, graticules as light gray lines, and a sphere background, with interior country boundaries emphasized in a darker stroke. The visualization loads GeoJSON world-atlas data and uses React for rendering with D3 v5 APIs such as `geoNaturalEarth1`, `geoPath`, and `geoGraticule`. TopoJSON processes the source data to extract land and interior meshes, all output as SVG paths.

Llefat92
95% match
Loading thumbnail…

World Map

This example displays a world map with country boundaries rendered as SVG paths on a Natural Earth projection. It visualizes land masses, country interiors, graticules, and the globe’s sphere using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo. The data comes from the World Atlas TopoJSON, processed with `feature` and `mesh` from topojson to generate land polygons and interior boundaries. Styling applies distinct fills and strokes for each layer.

Nnghosh319
95% match
Loading thumbnail…

World Map

This map depicts world landmasses and country borders using a Natural Earth projection. The visualization renders geographic features as SVG paths, with graticules and interior boundaries drawn as styled strokes. It loads GeoJSON and topology data from the World Atlas Topojson collection, processed with `feature` and `mesh`. The code builds paths using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo, while React manages the component state and rendering. The sphere, landmasses, and borders are each styled distinctly to clarify spatial relationships.

Wwindwaver
95% match