Skip to main content
SimilarExport ZIP
100%

draw a world map

✓ Published2🌍 Public
Wwyh1029
Last edited May 27, 2020
Created on Apr 2, 2020
Forked from D3.js introduce

This example displays a world map using the Equal Earth projection within an SVG canvas. The map shows country boundaries as light green shapes with dark blue oceans, rendered using `d3.geoEqualEarth` and `d3.geoPath`. It loads geographic data from the world-atlas TopoJSON file, converts it with `topojson.feature`, and appends each country path to the SVG. The visualization relies on D3 v5 and uses simple CSS classes to differentiate the sphere background from country landmasses.

AI-generated description

draw a world map

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map!

This example demonstrates a world map using an equal-earth projection, with countries rendered as light green regions and the spherical globe shown in blue. It fetches geographic data from the world-atlas package and visualizes it by applying the `geoPath` and `geoEqualEarth` functions from d3. The code uses topojson’s `feature` API to convert the TopoJSON data into GeoJSON features. Each country is drawn as an SVG path, with stroke opacity set to 0.1 for country boundaries. The entire map updates dynamically once the data is fetched and processed, displaying the complete set of countries in a single view.

XX. N. Chu
89% match
Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered with D3.js using the geoEqualEarth projection, with countries filled in green and a blue sphere background. It demonstrates geographic data visualization by loading the world-atlas TopoJSON dataset and converting it to GeoJSON features via topojson.feature. The map uses d3.geoPath with the projection to draw SVG paths. The code also imports additional projections like geoMercator and geoOrthographic, though only equal-earth is applied here.

EEdward-Elric233
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu
88% match
Loading thumbnail…

Map Projection

This example displays a world map using an equal-earth projection, rendered as SVG paths. The visualization shows landmasses in teal, country interiors as lighter strokes, graticules as gray lines, and the surrounding sphere in light gray. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json`, converts it using `topojson.feature` and `topojson.mesh`, and draws the map with `d3.geoPath` and `d3.geoEqualEarth`. The React component manages asynchronous data loading with `useData`.

AAndre J Denais
88% match
Loading thumbnail…

World Map

This example renders a world map using the geoEqualEarth projection and geoPath to draw countries, graticules, and sphere outlines in SVG. It loads country boundaries from the world-atlas TopoJSON dataset, using topojson.feature and topojson.mesh to extract country polygons and interior borders. The visualization, built with React and D3 v5, fills countries in teal, with light gray graticule lines and a lighter sphere background.

11993-INDALKAR
87% match
Loading thumbnail…

World Map :- ICE-8

This example displays a world map using an equal-earth projection on an SVG canvas. The visualization renders ocean and landmasses as distinct shaded regions, with country boundaries outlined in black. The code loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. It relies on d3’s `geoEqualEarth` projection and `geoPath` to draw the sphere and country shapes.

SShridhar Kshirsagar
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen
87% match
Loading thumbnail…

World Map

This example displays a world map using an equal Earth projection, with each country rendered as a filled SVG path and the surrounding sphere shown in light gray. The visualization loads GeoJSON data derived from the World Atlas TopoJSON dataset and passes it through d3.geoPath with a d3.geoEqualEarth projection. Built with React and D3 v5, the map uses SVG elements for crisp, scalable rendering.

Tthe-1000th-summer
87% match