Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
CChinzorigt Ganbat
Last edited Sep 19, 2020
Created on Sep 19, 2020

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

world map

This example displays a world map using an equal-area natural Earth projection, with countries rendered as paths that fill with a soft beige color and turn red on hover. The visualization initially shows a blue sphere backdrop, and users can pan and zoom via mouse interaction. The code loads country boundaries and names from the world-atlas package (50m resolution) and uses `d3.geoPath` with `d3.geoNaturalEarth1` for projection, while `topojson.feature` extracts geometry. Interactivity is handled through `d3.zoom`, which adjusts the SVG group's transform on zoom events, and each country path includes a tooltip title with its name from the TSV data.

Zzhangfa
94% match
Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection, displaying country boundaries as green shapes on a light blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from GeoJSON data converted from TopoJSON via the topojson.feature API. World country data is loaded from the world-atlas package, and the SVG includes a sphere outline to emphasize the spherical projection. The map is static, with no interactive elements or animations.

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

World Map

This interactive world map displays country boundaries on a natural Earth projection, with tooltips showing country names on hover. The visualization uses D3.js v5 with d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom functionality. It loads geographic data from the World Atlas TopoJSON files at unpkg.com, combining country geometries with name mappings from the accompanying TSV file. SVG paths represent countries and the surrounding sphere, with hover interactions highlighting selected regions in blue.

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

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

Ggabcoderboi
93% match
Loading thumbnail…

World Map

This example displays an interactive world map using the geoNaturalEarth1 projection, rendering countries as SVG paths with hover highlighting. It loads world-atlas TopoJSON data, converts it to GeoJSON with the `feature` method, and draws it using `d3.geoPath`. The map supports pan and zoom through `d3.zoom`, and includes a styled sphere background. The implementation imports `select`, `json`, `geoPath`, and `zoom` from D3 v5, along with the TopoJSON module.

HHarshithaAmbilpur
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