Skip to main content
SimilarExport ZIP
100%

Orthographical World Map

✓ Published0🌍 Public
Tthanhtrant219
Last edited Apr 15, 2020
Created on Apr 15, 2020

This example shows an interactive orthographic projection of the world map, where each country is rendered as an orange SVG path with black borders and darkens on hover. The visualization uses D3 v5’s `geoOrthographic` projection with `geoPath` to draw country boundaries, and TopoJSON’s `feature` method to extract geometries from the world-atlas 110m dataset. Country names are joined from an accompanying TSV file and displayed via SVG `<title>` tooltips.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Orthographican you World Map

This example shows an orthographic world map where each country is rendered as a clickable, hover-responsive SVG path. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data, with country names loaded from a TSV file using `d3.tsv`. Data is combined via `Promise.all` and merged using a lookup object keyed by country ID. Hovering turns a country black, and each path includes a `<title>` element to display the country name as a tooltip.

Tthanhtrant219
94% match
Loading thumbnail…

Orthographican you World Map

This example shows an orthographic world map where each country is rendered as a clickable, hover-responsive SVG path. The visualization uses D3’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data, with country names loaded from a TSV file using `d3.tsv`. Data is combined via `Promise.all` and merged using a lookup object keyed by country ID. Hovering turns a country black, and each path includes a `<title>` element to display the country name as a tooltip.

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

WorldMap

This example renders an orthographic world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them onto a sphere with `d3.geoOrthographic()`. The map draws a blue sphere background and light green country paths with thin black strokes using `d3.geoPath()`. The visualization demonstrates basic data joining and SVG path generation from geographic features.

KKelsey Xu
84% match
Loading thumbnail…

World Map

This example displays a purple spherical projection of the world with pink country boundaries rendered as SVG paths using D3’s geoEquirectangular projection and geoPath. It loads country geometries from a TopoJSON world-atlas file and converts them to GeoJSON via the topojson feature method. The visualization highlights each country with an orange hover fill, while strokes define national borders.

TTejucmandava
84% match
Loading thumbnail…

map interactions

This example displays an orthographic projection of the world map using D3.js and TopoJSON, with country boundaries rendered as SVG paths. Hovering over a country turns it red, while a d3.zoom behavior allows panning and zooming of the entire map. The map data comes from the world-atlas TopoJSON and TSV files, and country names are added as tooltips via SVG title elements. The projection and path generation use d3.geoOrthographic and d3.geoPath.

EEmmanuel Chukwujindu
84% match
Loading thumbnail…

WORLD MAP

This example displays a world map with countries rendered in tan against a blue sphere, highlighting each country in dark orange on hover. It uses D3 v5’s `d3.geoEquirectangular` projection and `d3.geoPath` to draw the map, with TopoJSON loading the country boundaries from a world-atlas dataset. The SVG paths are generated from GeoJSON features, and the styles are applied via CSS classes.

Mmboinapally17
84% match
Loading thumbnail…

World Map

This example displays a world map rendered as an SVG, with countries filled in orange against a sky-blue sphere. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw country outlines, while TopoJSON’s `feature` method converts the world-atlas countries dataset into geographic features. Hovering over a country changes its fill to red via CSS, and the map includes a black stroke with partial opacity for borders.

HHarshavardhan
84% match