Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published4🌍 Public
GGlebenator
Last edited Apr 2, 2021
Created on Jan 31, 2021
Forked from D3 map drag demo

This interactive world map displays global countries with a three-dimensional orthographic projection, allowing users to drag the globe to rotate it and click individual countries to switch between projections. The visualization uses D3.js with `d3.geoPath` and `d3.geoProjection` for rendering, TopoJSON for country boundaries, and world-atlas data. A graticule overlay shows latitude and longitude lines, while a `d3.drag` handler enables rotation and `d3.zoom` supports scaling. Country names are linked via TSV data, and hover effects highlight selected regions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This map visualizes country borders using a natural Earth projection, with country names displayed as tooltips on hover. The visualization uses D3 v5’s `d3.geoPath` and `geoNaturalEarth1` for geographic projection, while TopoJSON’s `feature` method extracts country geometries from world-atlas data. Countries are rendered as SVG paths styled with CSS. The map supports zooming and panning through D3’s `zoom` behavior, which applies a transform to all country shapes. The data comes from the world-atlas TopoJSON and TSV files, which provide geometry and country names.

Iimmanentdomain
89% 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
89% match
Loading thumbnail…

World map

This interactive world map displays country boundaries using a natural Earth projection, with hover tooltips showing country names and zoom/pan controls for exploration. It loads geographic data from the world-atlas TopoJSON and TSV files, then renders countries with D3’s `geoPath` and `geoNaturalEarth1`. The visualization uses `d3.zoom` for interaction and `topojson.feature` to convert TopoJSON geometry, with hover effects styled via CSS.

NNikhil Prakash
89% 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
88% match
Loading thumbnail…

World Map

This example presents an interactive orthographic world map that automatically rotates over time. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to render continents and graticules as SVG, with country data from the world-atlas TopoJSON and TSV files. Users can zoom and pan the globe via `d3.zoom`, while hovering over landmasses highlights them in yellow. The rotation is driven by a `d3.timer` that continuously updates the projection’s rotation.

Ssaijahnaviappineni
88% match
Loading thumbnail…

World Map

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.

CChinzorigt Ganbat
88% match
Loading thumbnail…

World Map

An interactive orthographic world map displays landmasses and country borders, with the globe rotating in response to mouse movement. Built with React and D3 v5, it uses `d3.geoOrthographic` and `d3.geoPath` to project and render GeoJSON features derived from the world-atlas TopoJSON dataset. The graticule and interior boundaries are drawn via `d3.geoGraticule` and TopoJSON mesh, while mouse coordinates trigger projection rotation through React state. The SVG output is styled with distinct colors for land, borders, and the surrounding sphere.

MMar-99
88% match
Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg
88% match