World Map

100%

World Map - Natural Earth Projection

✓ Published0🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

Forked from Map

This example displays a world map using the Natural Earth projection, with countries rendered as blue vector paths on an ocean-colored sphere. It visualizes geographic boundaries with a graticule grid and hover highlighting, loading country data from the world-atlas TopoJSON dataset and converting it to GeoJSON with topojson.feature. The map is drawn with D3 v7’s d3.geoPath and d3.geoNaturalEarth1, with the sphere background generated from a GeoJSON Sphere geometry.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

This example renders a world map using a Natural Earth projection, displaying country boundaries as green shapes on a light blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from GeoJSON data converted from TopoJSON via the topojson.feature API. World country data is loaded from the world-atlas package, and the SVG includes a sphere outline to emphasize the spherical projection. The map is static, with no interactive elements or animations.

Llibramanju

95% match

Loading thumbnail…

World Map

This example displays a world map with light green countries set against a blue ocean sphere, using a natural Earth projection. It renders the globe as an SVG path and then loads country boundaries from a TopoJSON dataset via the world-atlas package. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project geographic coordinates, and applies the topojson.feature method to extract country geometries. The sphere is drawn first as a full-world path, followed by individual country paths with subtle black strokes.

Ddev-snip

93% match

Loading thumbnail…

World Map practice

This example displays a world map rendered with a natural Earth projection, showing countries filled in light green against a blue sphere backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate SVG paths, and appends country and sphere elements to the SVG canvas. The code applies styling through CSS classes for fills and strokes, with stroke opacity set to 0.1.

Ddankvader1

93% match

Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat

93% match

Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses filled in light green against a sky-blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The map is rendered as SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`, with the sphere drawn first as a background path using a constructed sphere geometry.

LLG0498

92% match

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223

92% match

Loading thumbnail…

World Map

This example renders a natural Earth projection world map as an SVG, showing country boundaries in black with red outlines against a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and landmasses, with TopoJSON’s `feature` method converting world-atlas data (110m resolution) into GeoJSON. The map is generated asynchronously, fetching the TopoJSON from a CDN and appending each country path to the SVG.

VVishnu Sudireddy

92% match

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as yellow landmasses with black borders on a light blue sphere. It loads world country boundaries from the World Atlas TopoJSON data and converts it to GeoJSON using the `feature` function from TopoJSON. The map is drawn with D3’s `geoNaturalEarth1` projection and `geoPath` generator, appending SVG paths for both the background sphere and individual countries, styled via CSS classes.

Kkottenikhil

92% match