Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
CChathurya
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421
94% match
Loading thumbnail…

World Map

This example displays a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, drawing the sphere background and country boundaries. It loads world atlas TopoJSON data from the `world-atlas` package, converts it to GeoJSON with `topojson`’s `feature` function, and maps each country to an SVG path with a black fill and red stroke. The map is generated entirely client-side as SVG, using D3 v5.

Hhm0421
94% 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
93% 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
93% match
Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as an SVG with D3 version 5 and TopoJSON. It highlights country boundaries with pink fills and maroon strokes, overlaid on a green sphere outline that represents the globe. The map is drawn using `d3.geoPath` with `geoNaturalEarth1` projection, while country geometries are loaded from a remote TopoJSON file and converted via the `feature` method from TopoJSON. The data source is a gist containing country coordinates.

Mmandadi1999
93% match
Loading thumbnail…

World Atlas

This example displays a world map using a natural Earth projection, with countries rendered as individual SVG paths. The visualization loads geospatial data from a world-atlas TopoJSON file and converts it to GeoJSON features. It uses `d3.geoPath` with `geoNaturalEarth1` for projection, and `topojson.feature` to extract country boundaries, with a light blue sphere background and tan country shapes.

Ttarungunda
93% 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
92% match
Loading thumbnail…

World Map

This example displays a world map rendered as an SVG using D3.js v5. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw country boundaries from a TopoJSON file loaded via `topojson.feature`. The map includes a blue sphere outline and green country shapes with strokes. The code demonstrates fundamental data binding and path generation for geographic visualization.

Hharika-1929
92% match