Skip to main content
SimilarExport ZIP
100%

world map

✓ Published1🌍 Public
Ppei9223
Last edited Sep 16, 2022
Created on Sep 16, 2022
Forked from d3js

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

world map

This example displays a natural Earth projection of the world, with landmasses rendered in green on a light blue spherical backdrop. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code converts the TopoJSON country features to GeoJSON via the `feature` method from Topojson, then appends each path to the SVG. The sphere outline is drawn first to establish the globe’s boundary.

Kkottenikhil
95% 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
94% 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
94% 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
94% match
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
94% 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
94% 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
93% match