Custom World Tour

100%

Custom World Tour

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 4, 2016

This example presents a custom world tour that cycles through a subset of countries in a user-defined order, rotating an orthographic globe to center each selected nation. The code uses D3 v3 with a Canvas renderer, drawing landmasses, borders, and a highlighted country via `d3.geo.path` and a `d3.geo.orthographic` projection. A queue loads TopoJSON world data and a TSV file specifying country IDs, names, and tour order. Each transition, driven by a `tween` on the projection’s rotation, animates the globe toward the next country’s centroid, updating a title label while redrawing the scene.

AI-generated description

Custom world tour with a subset of countries in a particular order.

Forked from World Tour

Original question behind map: Looping transition and showing countries in a given order

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

World Tour

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.

Mmbostock

90% 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

89% match

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

88% 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

88% 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

80% 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

79% match

Loading thumbnail…

World Map and Pattern Transitions

This example renders a world map using TopoJSON country boundaries from the world-atlas package and projects them with d3.geoMercator and d3.geoPath. Each country is filled with an SVG pattern that continuously animates: a small orange rectangle expands to cover the 20-by-20-pixel tile, then resets, alternating between orange and white fills via a recursive transition with d3.easeQuadOut. The pattern is rotated 45 degrees, creating a dynamic striped texture across all landmasses.

Aandrew-reid

79% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

AAaron Goebel

79% match