World Map

100%

✓ Published0🌍 Public

Last edited Aug 25, 2021

Created on Aug 25, 2021

This example displays a natural Earth projection of the world, highlighting landmasses in teal against a light gray sphere with graticules and country borders. It uses React with D3 v7, employing geoNaturalEarth1 and geoPath to render the map from TopoJSON data loaded from world-atlas. The visualization distinguishes land, interiors, and graticules through styled SVG paths.

AI-generated description

A fun World Map

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection, with landmasses rendered in teal and graticules drawn as light gray lines. It shows a sphere outline and country border lines derived from the world-atlas TopoJSON dataset. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project geographic features into SVG paths, while d3.geoGraticule generates the latitude and longitude grid. React handles rendering through a Marks component, and TopoJSON’s feature and mesh functions extract land polygons and interior boundaries from the source data.

Jj-PGi

97% match

Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection, rendering landmasses in teal against a light gray sphere with graticule lines. The visualization is built with React and D3 v5, using `d3.geoPath` and `geoNaturalEarth1` to project geographic features, while `topojson` converts the World Atlas dataset into GeoJSON. Country borders appear as thin interior lines, and the map loads asynchronously from a remote TopoJSON source.

AAndrea Picciau

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

96% match

Loading thumbnail…

World map

This example displays a world map using a Natural Earth projection, showing landmasses in teal, graticules in gray, and country boundaries as lighter strokes. The visualization renders geographic data from the world-atlas TopoJSON dataset using React and D3 v6, with `d3.geoNaturalEarth1` and `d3.geoPath` projecting the features. The map fills the browser window and is drawn entirely as SVG paths, with a light gray sphere background and an italic Poppins font for the loading message.

BbeauMarko

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

96% match

Loading thumbnail…

World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with graticule lines and country borders overlaid. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the world-atlas TopoJSON dataset via `d3.json` and processed through `topojson.feature` and `topojson.mesh`. A React component orchestrates the visualization, applying CSS styling for the sphere, land, and boundary strokes.

AAmir

96% match

Loading thumbnail…

World Map

This example shows a world map rendered with landmasses in teal and country borders in a lighter teal, overlaid with graticules and a sphere outline. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 to draw geographic features. TopoJSON data from the world-atlas package is loaded with `d3.json` and converted to GeoJSON using `feature` and `mesh`. React manages the component structure, and the map is rendered as SVG elements styled with CSS.

CCarlos Caballero

96% match

Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection, rendering landmasses in teal with graticules and a light gray sphere background. Country borders appear as thin gray lines, with interiors drawn separately. The visualization loads GeoJSON from the world-atlas TopoJSON source, converting it with topojson’s `feature` and `mesh` APIs. React manages the component structure, while d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection, path generation, and grid lines. The SVG output is styled via CSS classes, with a loading state before data arrives.

KKtuzinowski

96% match