Why Reykjavík?

100%

Why Reykjavík?

✓ Published0🌍 Public

Last edited May 16, 2017

Created on Oct 26, 2016

A rotating orthographic globe highlights a green flight path from San Francisco to Reykjavík, then onward to Paris, answering the title’s question. The visualization uses d3.geoOrthographic and d3.geoPath to project world landmasses from a TopoJSON dataset onto a canvas, with a d3.timer driving continuous rotation. Zoom and pan are enabled via d3.zoom, which adjusts the projection’s scale and translate. The globe’s sphere outline and landmasses are drawn in black and filled, while the route is stroked in green.

AI-generated description

Going from San Francisco to Paris I was asked “Why Reykjavík?”

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/ba63c55dd2dbc3ab0127'>This Is a Globe</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/48734366b4d64aa1b26bd256ee8f7c5e'>This Is a Globe in d3.v4</a>

gpl-3.0 Licensed

Similar vizzes

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

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

72% match

Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière

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

71% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This example demonstrates an interactive orthographic globe that rotates continuously, with countries rendered in light green and highlighted red on hover. The visualization shows land masses, a graticule grid, and an ocean sphere against a black background, with zooming enabled. It uses D3 v5 and TopoJSON, applying d3.geoOrthographic and d3.geoPath to project world data from the world-atlas 50m dataset. A d3.timer drives the rotation by updating the projection’s rotation, while zoom behavior transforms the globe group. Country names are displayed via SVG title elements.

Zzahra929

71% match

Loading thumbnail…

Untitled

This interactive orthographic globe displays world landmasses, graticules, and city labels with mouse-controlled rotation. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` to render SVG, with TopoJSON world-110m data for land. A `places.json` dataset adds point markers and text labels for cities like San Francisco and Kiev. Radial gradients simulate ocean shading, a drop shadow, and globe highlight, while mouse drag rotates the projection and reposition labels.

KKikkolatsch

71% match

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This interactive visualization presents a rotating orthographic globe that continually spins on a tilted axis. The world’s landmasses, drawn in light green with dark borders, are accompanied by a graticule grid of meridians and parallels. The globe supports zooming via the d3.zoom behavior, while d3.timer drives the rotation by updating the d3.geoOrthographic projection’s rotation parameters. Country data comes from the world-atlas TopoJSON files, with names appended as SVG title tooltips; hovering highlights individual countries in red.

Zzahra929

71% match

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock

71% match