Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aabdul-alim
Last edited Jul 11, 2019
Created on Jul 11, 2019

An orthographic globe rotates to highlight each country in sequence, with the current country’s name displayed in a title above the canvas. The visualization uses d3.geo.orthographic projection, d3.geo.path for rendering land, borders, and the globe outline on a Canvas 2D context, with transitions tweening the projection rotation via d3.interpolate. Country centroids are computed with d3.geo.centroid, and the order is alphabetical based on names from the world-country-names.tsv dataset, paired with world-110m.json TopoJSON data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A rotating world map displays continents in a continuous spin. Using D3.js v4, the visualization loads GeoJSON country boundaries and applies an orthographic projection. The code sets up an SVG canvas and employs `d3.geoOrthographic` and `d3.geoPath` to render the geographic shapes. A timer-driven animation updates the projection's rotation along the X-axis, causing the globe to turn smoothly. The map's data originates from a remote GeoJSON source provided in the code, and the frame is rendered dynamically as an SVG path that updates each tick.

NNafisehmousavian
85% match
Loading thumbnail…

fresh block

This example shows a spinning orthographic globe with continent outlines, rendered as SVG paths. The map rotates continuously using a `d3.timer` that updates the projection’s rotation, while `d3.geoPath` redraws the continent geometry each frame. The globe is styled with a light blue background and uses GeoJSON country data loaded from a remote URL. Although a CSV file with city pollution data is included, it is not referenced in the code. The visualization relies solely on D3 v4’s geographic and timer utilities.

CCanaramour
85% match
Loading thumbnail…

fresh block

This example shows a spinning globe visualization that rotates continuously to display world continents. The orthographic projection rotates around the vertical axis using `d3.geoOrthographic()` and `d3.geoPath`, with the rotation angle driven by `d3.timer` based on elapsed time. The globe renders country boundaries from a GeoJSON file loaded via `d3.json`, while the SVG background is styled with a light blue color. The code uses D3 v4 for all geographic projections, path rendering, and animation timing, with no additional libraries or interactive elements.

CCanaramour
85% 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
82% match
Loading thumbnail…

fresh block

A world map of countries is rendered as SVG paths using D3's `d3.geo.equirectangular` projection and `d3.geo.path` tool, colored light gray except for those with authority data, which are filled with a lighter orange. Clicking a country zooms in via a D3 transition on the `g` group, and a text zone updates with the country's name, linking to its grid authority URL if available. The interaction relies on `d3.behavior.zoom` to handle pan and zoom, with the map data sourced from an external `grid_countries.txt` file containing GeoJSON.

RRCura
82% 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
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
82% 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
80% match