Ghana Map Top

100%

✓ Published0🌍 Public

Last edited Apr 13, 2026

Created on Apr 12, 2026

This example displays a Natural Earth projection world map using SVG paths. Countries are rendered in blue with white borders, set against a light blue ocean sphere and graticule grid. The code uses D3 v7’s `d3.geoNaturalEarth1` projection, `d3.geoPath`, and `d3.geoGraticule` to draw geographic features. It loads `world-atlas` TopoJSON data, converts it to GeoJSON via `topojson.feature`, and binds the resulting country features to path elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map - Natural Earth Projection

This example displays a world map using the Natural Earth projection, with countries rendered as blue vector paths on an ocean-colored sphere. It visualizes geographic boundaries with a graticule grid and hover highlighting, loading country data from the world-atlas TopoJSON dataset and converting it to GeoJSON with topojson.feature. The map is drawn with D3 v7’s d3.geoPath and d3.geoNaturalEarth1, with the sphere background generated from a GeoJSON Sphere geometry.

Mmeangreen0067@gmail.com

87% match

Loading thumbnail…

World Map

This example renders a natural Earth projection world map as an SVG, using light yellow for the ocean sphere and light blue for landmasses with white stroke outlines. It loads world topology from the world-atlas TopoJSON file via D3’s `json` method, converts it to GeoJSON using TopoJSON’s `feature` function, and draws paths with `d3.geoPath` and `d3.geoNaturalEarth1`. The implementation relies on D3 v5 selections and the topojson client library to visualize country boundaries.

BBhavanaGIrni

86% match

Loading thumbnail…

World Map

This example renders a natural Earth projection world map as an SVG, showing country boundaries in black with red outlines against a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and landmasses, with TopoJSON’s `feature` method converting world-atlas data (110m resolution) into GeoJSON. The map is generated asynchronously, fetching the TopoJSON from a CDN and appending each country path to the SVG.

VVishnu Sudireddy

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

86% match

Loading thumbnail…

world map

This example displays a natural Earth projection of the world, with landmasses rendered in green on a light blue spherical backdrop. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code converts the TopoJSON country features to GeoJSON via the `feature` method from Topojson, then appends each path to the SVG. The sphere outline is drawn first to establish the globe’s boundary.

Kkottenikhil

86% match

Loading thumbnail…

World Map

This example displays a natural Earth projection world map using SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`. It renders the globe’s sphere in aqua and country boundaries as coral polygons with black strokes, loaded from a TopoJSON file via `topojson.feature`. Hovering a country turns it white. The code imports from D3 v5 modules and fetches world-atlas data from unpkg.

CChathurya

86% match

Loading thumbnail…

World Map

This example displays a world map with light green countries set against a blue ocean sphere, using a natural Earth projection. It renders the globe as an SVG path and then loads country boundaries from a TopoJSON dataset via the world-atlas package. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project geographic coordinates, and applies the topojson.feature method to extract country geometries. The sphere is drawn first as a full-world path, followed by individual country paths with subtle black strokes.

Ddev-snip

85% match

Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection. It renders each country as a filled SVG path with a light blue fill and dark stroke. The map is drawn from TopoJSON data loaded from the `world-atlas` package, converted to GeoJSON features via `topojson.feature`. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the SVG path data.

KKOLLIPATI NIKHIL

85% match