Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
Hharika-1929
Last edited Jul 9, 2022
Created on Jul 9, 2022
Forked from ICE8 World Map

This example displays a world map rendered as an SVG using D3.js v5. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw country boundaries from a TopoJSON file loaded via `topojson.feature`. The map includes a blue sphere outline and green country shapes with strokes. The code demonstrates fundamental data binding and path generation for geographic visualization.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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 world map rendered as an SVG, with each country filled in green and outlined with blue strokes. It projects the geographic data using the Natural Earth projection via `d3.geoNaturalEarth1` and generates paths with `d3.geoPath`. The code loads country boundaries from a TopoJSON file using `d3.json` and the `topojson.feature` API, then binds the resulting GeoJSON features to SVG path elements. The map is drawn on a static canvas without interactivity.

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

World map with D3.js!

This example displays a world map rendered in an SVG using D3.js v5. It projects country boundaries with the Natural Earth projection via `d3.geoNaturalEarth1` and draws them through `d3.geoPath`. The map’s ocean is a distinct blue sphere path, while countries appear as light green shapes with subtle black strokes. Geographic data comes from the world-atlas TopoJSON file, converted to GeoJSON using `feature` from the Topojson library.

TTatyana Milanova
93% match
Loading thumbnail…

World Map

This example renders a world map using D3.js version 5 and TopoJSON. It displays country boundaries as green-filled paths with a semi-transparent stroke, overlaid on a white sphere representing the globe. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to convert world-atlas data from TopoJSON to GeoJSON. Data is loaded asynchronously from the unpkg-hosted world-atlas dataset.

SSharankumar02
93% match
Loading thumbnail…

world map

This example displays a world map rendered as an SVG using D3 v5 and TopoJSON. It shows country boundaries and a green sphere representing the Earth’s surface. The code loads geographic data from a JSON file, processes it with the `feature` function from TopoJSON, and projects it using `geoNaturalEarth1`. Paths are generated with `d3.geoPath` and styled with blue country fills and black strokes.

Kkranthireddyskr
93% match
Loading thumbnail…

World Map

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.

VVishnu Sudireddy
93% match