Skip to main content
SimilarExport ZIP
100%

world map

✓ Published0🌍 Public
HHimanshu Chelani
Last edited Apr 8, 2020
Created on Apr 8, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

world map projection

This example displays a world map with country boundaries, graticules, and interior borders rendered as SVG paths. The map uses a Natural Earth projection via `d3.geoNaturalEarth1` and draws geographic features with `d3.geoPath`. Data comes from the World Atlas TopoJSON, processed through `feature` and `mesh` from the TopoJSON library. React manages the component structure, while CSS styling defines the land, sphere, graticule, and interior stroke colors.

SSharanya1307
92% match
Loading thumbnail…

world map

This example shows a world map of all countries rendered as grey SVG paths with black borders on a yellow background. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from a TopoJSON file loaded from the world-atlas dataset via a URL, processed with the `topojson.feature` API. The code fetches the data asynchronously with `json()`, then appends each country as a `path` element to the SVG canvas.

Ppavankalyan1507
92% 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
92% match
Loading thumbnail…

world map

A world map visualization displays global landmasses and country boundaries using a natural Earth projection rendered as SVG. The map shows land areas in teal, country interior borders in a lighter stroke, and background graticule lines. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to generate the projection and paths. TopoJSON data from the World Atlas dataset provides the land and country mesh features, which are processed through the `feature` and `mesh` APIs.

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

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

This example displays a world map rendered as an SVG using the Natural Earth 1 projection. Land masses appear in coral with pink country borders, while graticules and the sphere outline provide geographic context. The visualization fetches TopoJSON data from the World Atlas and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. React manages the component structure, while D3 utilities like `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the projection and path generation. The code also loads data asynchronously via `d3.json`.

Aadapavaishnavi12
91% match