World Map

100%

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

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.

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

95% match

Loading thumbnail…

World Map

Hhm0421

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

94% match

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as an SVG with D3 version 5 and TopoJSON. It highlights country boundaries with pink fills and maroon strokes, overlaid on a green sphere outline that represents the globe. The map is drawn using `d3.geoPath` with `geoNaturalEarth1` projection, while country geometries are loaded from a remote TopoJSON file and converted via the `feature` method from TopoJSON. The data source is a gist containing country coordinates.

Mmandadi1999

94% match

Loading thumbnail…

World Map Example

This example renders a natural Earth world map in an SVG using D3.js v5. It draws a blue sphere backdrop and then loads country boundaries from a TopoJSON file via `d3.json` and the `topojson` library’s `feature` method. The projection uses `d3.geoNaturalEarth1` with `d3.geoPath` to generate the country paths, which are filled light green with semi-transparent black strokes. The map displays static country outlines without interaction or additional data layers.

DDeepanshuu

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

94% match

Loading thumbnail…

World Map

This example displays a natural Earth projection world map using SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`. It renders the globe’s sphere in aqua and country boundaries as coral polygons with black strokes, loaded from a TopoJSON file via `topojson.feature`. Hovering a country turns it white. The code imports from D3 v5 modules and fetches world-atlas data from unpkg.

CChathurya

93% match

Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection, displaying countries as violet landmasses with white borders against a light yellow sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the spherical outline and country boundaries from TopoJSON data loaded from the world-atlas package. The map is rendered as SVG paths, with the TopoJSON converted to GeoJSON via the `feature` method from topojson.

Rrushithareddyy

93% match