Worldmap

100%

✓ Published0🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

This example displays a static world map of countries from the world-atlas TopoJSON dataset, rendered as SVG paths using D3.js. It uses the Natural Earth projection via `d3.geoNaturalEarth1()` and `d3.geoPath()` to draw country boundaries. Hovering over a country highlights it in red and shows a tooltip with the country’s ID and property count, implemented through D3 event handlers on the SVG paths. The map is fetched from a CDN and converted from TopoJSON to GeoJSON using the topojson library.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421

91% match

Loading thumbnail…

World Map

Hhm0421

91% match

Loading thumbnail…

world map

This example renders a world map using SVG paths generated from geographic data. The map visualizes country boundaries from the World Atlas TopoJSON dataset, projected using a natural Earth projection. The code employs D3 v5’s `geoPath` and `geoNaturalEarth1` for path generation and projection, while TopoJSON’s `feature` method converts the TopoJSON topology into GeoJSON features. Each country is drawn as an SVG path, with styling defined through CSS classes for the sphere background and country fills.

HHimanshu Chelani

91% match

Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan

90% match

Loading thumbnail…

world map with the world Topojson data

This example displays a world map using D3.js version 5 and TopoJSON data from the world-atlas dataset. The visualization projects geographic country boundaries onto a natural Earth projection within an SVG container, with a light blue sphere background and teal country fills. The code imports geoNaturalEarth1 and geoPath for projection and path generation, and applies the feature function from topojson to convert country data into GeoJSON features. Red strokes with low opacity outline the countries, creating a distinct visual separation against the pastel background.

Bbindusreeja

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

90% match

Loading thumbnail…

World Map

This example displays a world map with country boundaries rendered as SVG paths on a Natural Earth projection. It visualizes land masses, country interiors, graticules, and the globe’s sphere using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from d3-geo. The data comes from the World Atlas TopoJSON, processed with `feature` and `mesh` from topojson to generate land polygons and interior boundaries. Styling applies distinct fills and strokes for each layer.

Nnghosh319

90% match

Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, including graticule and country outlines. It loads GeoJSON data from the `visionscarto-world-atlas` package via `topojson-client`, then draws each country as a path. The visualization fetches the atlas asynchronously and re-renders once data arrives, with the SVG sized to the full viewport.

TTatyana Milanova

90% match