conic world tour

100%

conic world tour

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on Jul 12, 2016

The visualization "Conic World Tour" uses D3.js (v4) to animate a rotating globe composed of conic geographic projections. It alternates between several conic projections—such as conic conformal, conic equal-area, and conic equidistant—while smoothly transitioning the globe’s rotation. Country boundaries are drawn as SVG paths over a canvas-rendered graticule, with the active country highlighted in a bright color as the tour cycles through each nation in sequence, labeling it by name. The animation continuously shifts the projection parameters to create a morphing, globe-like effect.

AI-generated description

Conic Conformal instead of orthographic.

Similar vizzes

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

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

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

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

78% match

Loading thumbnail…

Equidistant Conic Projection

This example shows a world map drawn with the equidistant conic projection, including a graticule, landmasses, and country boundaries. The map is rendered as SVG using D3’s `d3.geo.conicEquidistant` projection and `d3.geo.path` to generate the paths. A sphere outline and graticule are drawn first, then geographic data from a TopoJSON file (`world-50m.json`) is loaded with `topojson.feature` and `topojson.mesh` to display land and political borders.

Mmbostock

78% match

Loading thumbnail…

Spinning Globe

A spinning globe displays the world’s landmasses in an orthographic projection, rotating continuously while its tilt oscillates. The visualization uses D3 v4’s `d3.geoOrthographic()` projection and `d3.geoPath()` to render country polygons from the `world-110m` TopoJSON dataset. A timer updates the projection’s rotation and tilt, redrawing the SVG path each frame to create the animated effect.

CCurran Kelleher

77% match

Loading thumbnail…

Clipped Conic Conformal

A map of the world is rendered using the Clipped Conic Conformal projection, showing landmasses in dark gray with country borders in white over a graticule of light gray lines. The visualization clips the map to the projection's extent so that only the relevant region is visible. It uses d3.geoConicConformal, d3.geoPath, and d3.geoGraticule, with vector data from the `world-50m.v1.json` TopoJSON file, and the world land and country meshes are drawn via `topojson.feature` and `topojson.mesh` into the SVG canvas.

Mmbostock

76% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying countries as light green shapes with faint black outlines on an SVG canvas. The map uses a conic conformal projection defined through D3's `geoConicConformal` and `geoPath` APIs. It loads geographic boundary data from the world-atlas TopoJSON source, processes it with the `topojson` library’s `feature` function, and renders each country as an SVG path. The visualization also generates a background path, with a commented-out sphere class suggesting an optional ocean fill.

NNilla

76% match