Skip to main content
SimilarExport ZIP
100%

World maps by using D3.js

✓ Published0🌍 Public
DDanthalakirankumar
Last edited Apr 3, 2022
Created on Apr 3, 2022

This SVG world map uses D3.js to render country boundaries as projected paths. The visualization fetches geographic data from the world-atlas JSON endpoint, extracts country features via TopoJSON, and draws them with d3.geoPath using an equirectangular projection. The ocean sphere and landmasses are filled with distinct colors, referenced from the included stylesheet.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World maps by using D3.js

This example displays a world map using D3.js, rendering countries as semi-transparent orange shapes on a blue sphere against a black background. The map is projected using `d3.geoEquirectangular` and drawn with `d3.geoPath`, while geographic data is loaded from the `world-atlas` package via `d3.json`. Boundaries are extracted with `topojson.feature`, and the SVG paths are updated through a simple data-join operation that appends each country as a new path element.

Cchakritha06
90% match
Loading thumbnail…

World Map with D3.js!

This example displays a world map rendered as an SVG using D3 version 5 and TopoJSON, with the geographic projection and path generation handled by d3.geoPath. The page loads world topology data and draws country boundaries onto a 960-by-500-pixel canvas. It serves as a basic demonstration of integrating D3’s mapping utilities with external TopoJSON data to produce an interactive-ready visualization.

DDINESH SAI BOPPANA
88% match
Loading thumbnail…

World Map with D3.js!

A stylized world map visualizes countries as green regions with black outlines on a blue sphere, using D3.js v5 and TopoJSON. The code loads geospatial data from the world-atlas countries-110m.json file, converts it to GeoJSON features with the topojson `feature` function, and renders it into SVG paths via `d3.geoPath` with a `geoEquirectangular` projection. Hovering a country changes its fill to orange.

Ssainitish1999
88% match
Loading thumbnail…

World Map D3.js!

This example displays an interactive world map using SVG, with countries rendered in green and the ocean as a blue sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. Countries are drawn with `d3.geoPath` and the `geoEquirectangular` projection, and hovering over a country changes its fill to orange via CSS. The map uses D3 v5 for data binding and rendering.

NNikkko1
88% 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
88% match
Loading thumbnail…

world map with d3

A world map rendered in SVG shows country boundaries and a stylized ocean using a natural Earth projection. The visualization loads GeoJSON country data from the world-atlas dataset and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. A sphere outline is drawn as a separate path, while countries are filled with light green and outlined in black. The code imports `d3.json`, `select`, and `geoPath` from D3 v6, and uses `topojson.feature` to convert TopoJSON regions into drawable features.

RRITUZZ
87% match
Loading thumbnail…

World Map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in green and a blue sphere background. Hovering over a country highlights it in orange. It uses d3.geoPath with the d3.geoEquirectangular projection to draw the map, and TopoJSON’s feature method to convert country boundaries from the world-atlas dataset. The code selects the SVG element, appends a sphere path, then joins country features to path elements.

SSonuSriN
87% match
Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries as selectable SVG paths over a blue sphere, with hover highlighting in red. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to render geographic features, while the `topojson` library’s `feature` function processes TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and mapped to each path’s `id`. A zoom control, implemented via D3’s `zoom` event, adjusts the SVG transform. Data sources include the 50m world-atlas TSV and JSON files.

CChawin Sungwalngern
87% match