17_Make a World Map

100%

17_Make a World Map

✓ Published1🌍 Public

Last edited Dec 18, 2020

Created on Dec 18, 2020

Forked from Let's make a face with D3.js!

This example shows a world map rendered with D3 using the Natural Earth projection. The map displays country boundaries as light green filled paths with subtle black strokes, set against a blue sphere background. The code loads GeoJSON data from the world-atlas TopoJSON file, converts it to geographic features with `topojson.feature`, and projects it using `d3.geoNaturalEarth1()`. The SVG paths are generated via `d3.geoPath()` and attached through a data join.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Map

This example displays a world map using a natural Earth projection, rendering countries and the surrounding sphere. The visualization loads geographic data from the world-atlas TopoJSON dataset, then uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. The map fills landmasses in light green with a subtle black stroke, while the sphere is colored blue. Both the topojson `feature` method and D3’s data join are used to bind and append country paths to the SVG.

Fforeverworld1879

91% match

Loading thumbnail…

Make a World Map

This example displays a world map rendered as SVG paths, with countries filled in light green and a dark blue sphere as the background. It uses D3 version 7’s `geoPath` and `geoNaturalEarth1` projection to generate the geographic shapes, while the `topojson` library’s `feature` function converts TopoJSON country boundaries from the world-atlas dataset into GeoJSON features. The code fetches the data from a remote URL and asynchronously appends the country paths to the SVG container.

EEngine194

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

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

89% match

Loading thumbnail…

Making a World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw both the sphere outline and country boundaries. Country data comes from the world-atlas TopoJSON file, which is parsed with the `feature` function from topojson. The map is static, with no interactions or transitions.

MMinwoo Pak

89% match

Loading thumbnail…

Make a map with D3 js

This example shows a natural Earth projection map of the world, with countries rendered as light green SVG paths on a dark blue sphere. The visualization loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is a separate path generated from a generic sphere object, while country boundaries appear with semi-transparent black strokes.

AAjit Singh

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

89% match

Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing

89% match