Skip to main content
SimilarExport ZIP
100%

Orthographican you World Map

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

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.

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

Orthographical World Map

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.

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

Hover Over Country to See Name

This interactive world map renders country boundaries as SVG paths using D3’s `geoPath` and `geoNaturalEarth1` projection. Hovering over a country reveals its name via an SVG `<title>` tooltip, populated from world-atlas TSV data keyed by ISO country code. Clicking a country highlights its outline in red by restyling the path’s stroke attribute. The example uses D3 v5, topojson for feature extraction, and includes a blue sphere backdrop.

Jjons288
83% 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
83% match
Loading thumbnail…

Let's make a map!

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

DDannie2020
83% 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
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive orthographic world map built with D3.js, where hovering over any country highlights it in red and displays its name as a tooltip. The map renders as SVG using `d3.geoPath` and `d3.geoOrthographic` for the projection, with country boundaries drawn from TopoJSON data loaded from the world-atlas dataset. The visualization also supports zooming and panning through `d3.zoom`. Country names are matched to geometries using ISO numeric codes from a TSV file.

KKarkG
82% match