From Hong Kong to Brussels

100%

From Hong Kong to Brussels

✓ Published0🌍 Public

Last edited Dec 4, 2017

Created on Dec 4, 2017

An animated globe highlights the journey from Hong Kong to Belgium, tracing a flight path between the two countries. It uses D3.js v4 and topojson to render land masses, graticule grids, and political borders on a canvas. The animation rotates the globe to a custom viewpoint and then simulates the plane’s travel along a great-circle arc, after which users can drag to spin the view, using `d3.geoOrthographic`, `d3.geoPath`, and a custom great-arc interpolator.

AI-generated description

Forked from Wendy Mak's block in reference to this tweet.
Sample code to make an animated globe with d3 on canvas. Borrowing heavily from http://bl.ocks.org/mbostock/4183330 The plane flies from startCountry to endCountry, and you can rotate the globe around once the animation is done

Similar vizzes

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

75% match

Loading thumbnail…

Simple Flight Animation

A simple flight animation shows a white airplane moving along a curved route between Shanghai, Tokyo, and Hawaii over a green world map set against a steel-blue ocean. The map renders from world-continents.json using `topojson.feature` and `d3.geoMercator` with `d3.geoPath`. The plane follows a LineString with a 2-second `transition.attrTween` that calculates positions via `getPointAtLength` along the SVG path. Black circles mark each city’s projected coordinates.

GGerardoFurtado

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

73% match

Loading thumbnail…

Rotating globe

This rotating globe visualization uses an orthographic projection to display world country polygons, a graticule grid, and three labeled city points (Munich, San Antonio, and Melbourne). The globe continuously rotates via a d3.timer, updating the country paths, graticule lines, city markers, and labels each frame. Labels are hidden when their corresponding city is on the far side of the globe, determined by the great-arc distance from the map’s center. The example uses d3.v3 with SVG and animation, loading TopoJSON world data and styling countries, graticules, and points with distinct colors.

EEE2dev

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

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

72% match

Loading thumbnail…

simplified borders

A rotating orthographic globe displays country boundaries as simplified straight lines, reducing each border arc to a single segment between its first and last points via `topojson.meshes`. Landmasses render as dark fills with white graticules, while borders are colored blue for coastlines and other hues for shared boundaries. The animation uses `d3.timer` to update the projection rotation and `d3.geoPath` to redraw paths, sourcing geometry from a TopoJSON world dataset.

PPhilippe Rivière

72% match

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

72% match