World Tour

100%

✓ Published0🌍 Public

Last edited Feb 27, 2019

Created on Dec 1, 2012

A rotating orthographic globe cycles through countries one by one, highlighting each in red while graying out the landmasses and drawing white borders. A title at the bottom displays the current country’s name. Built with D3 v3 and TopoJSON, it uses `d3.geo.orthographic` for projection, `d3.geo.path` with a Canvas 2D context for rendering, and `d3.transition` tweens to animate rotation toward each country’s centroid. Country names come from an external TSV file matched by ID.

AI-generated description

See discussion on Hacker News. Built with D3 and TopoJSON.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

World Tour

An orthographic globe rotates between countries, highlighting each one in red while its name appears below. The visualization cycles through all nations alphabetically, pausing briefly on each before spinning to the next. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` with a Canvas context to draw land, borders, and the highlighted country. TopoJSON provides the world geometry, and a TSV file supplies country names. Animation is driven by `d3.transition` with a custom `tween` that interpolates the projection’s rotation.

FFrissAnalytics

95% match

Loading thumbnail…

World Tour

This visualization presents an animated tour of countries on a globe using an orthographic projection. Each country's name is displayed before the globe rotates to center on that nation, with land, country borders, and the selected country drawn in separate colors onto a Canvas. The code loads world geometries from a TopoJSON file and country names from a TSV file, then uses D3's `d3.geo.path`, `d3.geo.centroid`, and `d3.interpolate` within a `d3.transition` queue to animate the rotation and redraw each frame.

DDangTHS

93% match

Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06

93% match

Loading thumbnail…

Untitled

An orthographic globe projects world landmasses and graticule onto a Canvas, with countries highlighted in red on hover and named in a header. The globe auto-rotates using a d3.timer, and users can drag to spin it via versor-based quaternion rotation, pausing rotation after interaction. Data comes from the world-atlas TopoJSON and a world-country-names TSV, rendered using d3.geoPath and d3.geoOrthographic within the d3-geo library.

DDolbyref113

84% match

Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh

84% match

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

83% match

Loading thumbnail…

Untitled

This example shows an interactive orthographic globe built with D3.js and TopoJSON, rendered as an SVG with animated transitions. Users click a country to rotate the globe and zoom toward that region, using `d3.geo.orthographic`, `d3.geo.path`, and `d3.geo.centroid` for positioning. A water sphere and land paths are drawn from `world.json`, with click handling triggering `transition.attrTween` to interpolate rotation and scale. The `active` class highlights selected countries in orange, and clicking the background resets the view to its original scale.

MMaciek Sitkowski

83% match

Loading thumbnail…

World Map

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.

GGlebenator

83% match