World Map

100%

✓ Published2🌍 Public

Last edited Oct 25, 2024

Created on Oct 24, 2024

This example presents a stylized world map using an equirectangular-like natural Earth projection, displaying country boundaries, graticules, and landmasses in a teal color scheme with interactive zoom and hover effects. The visualization uses React with D3 v5, leveraging `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while loading land and interior mesh data from the World Atlas TopoJSON source. The map features SVG rendering with CSS transitions for hover states and implements zoom functionality via D3's zoom behavior.

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

93% match

Loading thumbnail…

World Map

This example renders a natural Earth projection world map using D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs, with React managing the SVG output. Landmasses fill in teal, while graticules and interior boundaries appear as light and darker strokes, respectively. The map’s data comes from the `world-atlas` package, loaded via D3’s JSON fetcher and processed with TopoJSON’s `feature` and `mesh` functions to distinguish country interiors. The visualization presents a clean, stylized globe with a subtle sphere outline and a muted background.

Qqtrfx

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

93% match

Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection via D3.js (v5) and React. The visualization renders landmasses, a sphere outline, graticule lines, and interior boundaries as SVG paths, with D3’s `geoNaturalEarth1` projection and `geoPath` generating the geometry. The map is styled with a purple land fill and teal graticule/interior strokes, while the underlying data comes from the `world-atlas` package’s countries-50m GeoJSON topology, processed using `topojson`’s `feature` and `mesh` functions.

Bbsolomon103

93% match

Loading thumbnail…

World Map

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.

LLisa Wagner

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

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

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

93% match