Skip to main content
SimilarExport ZIP
100%

Let's make a world map with D3.js!

✓ Published1🌍 Public
AAnthony-coding
Last edited Nov 27, 2019
Created on Nov 27, 2019

This example shows a world map rendered as an SVG, with countries drawn as filled paths and an ocean background. It uses D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from the TopoJSON `world-atlas` dataset, loaded via the `json` method and converted with `topojson.feature`. The code appends each country as a separate `path` element, styled with a brown fill and black stroke.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. The code loads GeoJSON country boundaries from the World Atlas TopoJSON file and converts them into SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. It relies on the `topojson.feature` API to extract country geometries, and appends each as a separate path element with a stroke to delineate borders.

KKevinw97
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

CChip
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the world’s countries as filled polygons on a natural Earth projection, with oceans rendered in blue and landmasses in light green. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` function extracts country boundaries from a 110m world-atlas GeoJSON dataset. The code draws a sphere background and then overlays each country’s path, applying thin black strokes for borders.

AAdrian Herzog
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, rendering countries as filled paths with a visible ocean sphere background. The map uses TopoJSON data from the World Atlas package, which is converted to GeoJSON via `feature`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG path data, and `select` to append the country and sphere elements to the SVG canvas.

CCassie
93% match
Loading thumbnail…

Let's make a world map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in green and oceans represented by a turquoise sphere background. It uses D3 v5’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the geographic paths from TopoJSON data loaded from the world-atlas package. The code converts TopoJSON features into GeoJSON using topojson’s `feature` method, then binds and appends country paths to the SVG. A linked video tutorial accompanies the visualization.

Ffaaty
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example showcases a world map rendered as SVG paths, with each country filled in light green and outlined in black. It visualizes the geographic boundaries using the Natural Earth data source provided by the world-atlas package. The map is created using D3.js v5, specifically leveraging `d3.geoPath` with the `d3.geoNaturalEarth1` projection to generate the map’s geometry. The topojson library’s `feature` function extracts and transforms the country boundaries from the loaded TopoJSON data. The SVG canvas is fixed at 960 by 500 pixels, and the map is drawn without interactive elements, focusing purely on static cartographic display.

Eevavan8
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green and oceans in blue. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON country boundaries from the world-atlas dataset. The map’s sphere outline and country paths are appended to the SVG, with styling applied via CSS classes. The code loads geographic data asynchronously using `json` from D3 v5.

BBahareh Zarei
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

Ccodexmon
93% match