world map

100%

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This example displays a world map using a Natural Earth projection, with each country rendered as a purple SVG path. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. D3’s geoNaturalEarth1 projection and d3.geoPath handle the coordinate transformation and path generation, while hover effects change country colors and tooltips reveal each country’s ID.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example renders a world map using the Natural Earth projection, displaying country boundaries as green SVG paths with yellow strokes on a green background. It fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from topojson. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project and draw the paths, while d3.json loads the remote dataset asynchronously before appending the country shapes to the SVG canvas.

Ddivyagunuguntla

93% match

Loading thumbnail…

world map

This example displays a world map using a natural Earth projection. It renders the globe’s sphere and country boundaries as SVG paths, with countries highlighted in yellow on hover. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection, alongside the `topojson` library’s `feature` function to process GeoJSON data from the `world-atlas` package. The map is drawn with SVG elements, with the sphere filled in blue and countries in light gray.

SSai Hemanth Babu Sunkari

92% match

Loading thumbnail…

worldmap

This example displays a world map using a natural Earth projection, with countries rendered as light green paths against a blue spherical backdrop. It loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using the topojson feature function. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate the SVG path data, styling the sphere and country shapes through CSS classes.

Mmarianamartins87

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 world map visualization displays countries using a purple color scheme, with each country highlighted in a darker shade on hover. The map is rendered as an SVG using D3’s `geoNaturalEarth1` projection, with country boundaries generated via `d3.geoPath`. TopoJSON data from the world-atlas package is converted to GeoJSON using the TopoJSON client library, and the map is centered with a title at the top.

AAparna Desi Reddy

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

92% match

Loading thumbnail…

world map

This visualization displays a world map of countries, rendered as orange-filled SVG paths on a lime background using a Natural Earth projection. It fetches GeoJSON-derived country boundaries from the world-atlas TopoJSON dataset and converts them with topojson’s `feature` method. The map is generated with d3.geoPath and d3.geoNaturalEarth1, while standard d3 selections append each country path to the SVG canvas.

Nnagarjuna1968

91% match

Loading thumbnail…

World Map

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

91% match