Skip to main content
SimilarExport ZIP
100%

World map

✓ Published1🌍 Public
Llaplantalaplanta
Last edited Feb 3, 2022
Created on Feb 3, 2022

This example presents a world map with countries and landmasses rendered in a stylized SVG projection. The visualization uses a geoNaturalEarth1 projection and d3.geoPath to draw sphere, graticules, land, and interior boundaries, with data sourced from world-atlas. The React app fetches topology via d3.json, then processes it with topojson's feature and mesh functions. A Poppins font and teal color scheme distinguish land and interiors.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map rendered with SVG, showing landmasses, country borders, graticules, and a sphere outline. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, with data loaded from the TopoJSON world-atlas dataset via `topojson.feature` and `topojson.mesh`. React manages the asynchronous data loading, and CSS styling separates land, interiors, graticules, and sphere appearances.

NNikita Toropov
94% match
Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection and SVG paths. The visualization displays landmasses in teal, national borders as thin lines, graticules, and a light gray sphere background. Data comes from the world-atlas TopoJSON dataset, processed with topojson.feature and topojson.mesh. The React component uses D3’s geoPath and geoGraticule to generate the geographic shapes, while the app dynamically sizes the SVG to fit the browser window.

Mmbooch22
94% match
Loading thumbnail…

World map

This example displays a world map using the Natural Earth projection, rendered as a static SVG. The visualization presents landmasses in a teal color over a light gray sphere, with graticule lines and interior boundaries drawn in contrasting strokes. Built with React and D3’s geoNaturalEarth1, geoPath, and geoGraticule functions, it layers the sphere, graticules, land features, and interior meshes. The data is sourced from the world-atlas TopoJSON, processed using the topojson library’s feature and mesh functions.

AAlex Stulov
94% match
Loading thumbnail…

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.

AAdriana Rodriguez Sanabria
94% match
Loading thumbnail…

World Map

This example displays a global landmass map rendered as an SVG, with continent interiors outlined and a graticule grid overlaid. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath for geographic shapes, while topojson's feature and mesh functions process the world-atlas@2.0.2 GeoJSON data. The map’s sphere and graticules are drawn alongside land features, all styled through CSS to distinguish ocean, terrain, and boundary elements.

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

World Map

A world map rendered in SVG using the D3 geoNaturalEarth1 projection, with graticules and country borders. The visualization displays land masses in teal against a light gray sphere, using data from the world-atlas TopoJSON dataset. The React component loads the data via D3's json function and applies topojson feature and mesh operations. A d3.geoPath generator traces the projected land, interiors, and graticule paths.

RRajat Dangat
94% 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
94% match