Skip to main content
SimilarExport ZIP
100%

Simple World Map

✓ Published0🌍 Public
JJunying Li
Last edited Sep 27, 2021
Created on Sep 19, 2021

This example displays a simple world map using D3.js v5 and TopoJSON, rendering countries as green polygons against a blue sphere background. It uses `d3.geoPath` with the `geoNaturalEarth1` projection to convert geographic coordinates into SVG paths, and `topojson.feature` to extract country boundaries from the world-atlas dataset. The visualization is static, with no interaction or zoom enabled, focusing solely on the geographic outline of continents and national borders.

AI-generated description

Draw a simple world map using D3.js

MIT Licensed

Similar vizzes

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

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.

Ppei9223
90% match
Loading thumbnail…

World Map

This example displays a world map with countries rendered as light green polygons on a blue sphere. It uses D3’s `geoPath` and `geoNaturalEarth1` projection to draw geographic features, and the TopoJSON `feature` function to convert country outlines from a remote 110m dataset. The SVG output includes a background sphere and country paths, with styling applied via CSS classes.

Ffaquora
89% match
Loading thumbnail…

Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue sphere representing the Earth. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to generate the map geometry, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas 110m dataset. The visualization highlights the geographic layout without interactive features, focusing on static rendering of global landmasses.

Bbideckerz
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates a basic world map visualization created with D3.js v5 and TopoJSON. It renders a natural Earth projection of countries as SVG paths, with a blue sphere background and light green country fillings with subtle black strokes. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate path data, and `topojson.feature` to extract country geometries from the world-atlas dataset. Country boundaries are drawn from the 110m resolution world-atlas TopoJSON file fetched via `d3.json`.

JJohn Wambua
89% 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
89% 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
89% 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
89% match