Earth globe

100%

Earth globe - v4

✓ Published0🌍 Public

Last edited Nov 5, 2017

Created on Oct 18, 2017

An interactive SVG globe renders world landmasses and oceans using an orthographic projection via `d3.geoPath`. Users can drag to rotate the sphere, and hovering over any country displays its name in a tooltip, with the hovered land turning green. A dropdown menu of countries triggers a smooth `d3.transition` animation that reorients the globe to center the selected nation, while `d3.geoCentroid` calculates the target coordinates. The visualization is built with D3 v4 and processes geographic data from TopoJSON and TSV files.

AI-generated description

Built with blockbuilder.org

This is the d3.v4 version of <a href='http://bl.ocks.org/KoGor/5994804'>global earth</a>.

forked from <a href='https://bl.ocks.org/KoGor'>KoGor</a>’s Block <a href='http://bl.ocks.org/KoGor/5994804'>global earth</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

An interactive orthographic globe renders world countries as SVG paths using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with land polygons from a TopoJSON `world-110m.json` file. Users can drag to rotate the globe via `d3.behavior.drag`, which adjusts the projection’s rotation, while hovering over a country displays its name in a tooltip. A dropdown menu, populated from a TSV file of country names, lets users select a country; the globe then smoothly animates to center on that country’s centroid using a `d3.transition` with an interpolated rotation, and the selected country is highlighted in green.

KKoGor

90% match

Loading thumbnail…

Globe project

This globe visualization, rendered with D3 v4 and Three.js, presents an interactive Earth with countries, graticules, and labeled points of interest. Built from a fork of earthjs’s block, it combines SVG, canvas, and WebGL for smooth rotation and zoom, with hover tooltips for countries and dots. A subtle gradient ocean and interactive land paths highlight geographic features, while CSS transitions provide visual feedback on hover.

EEPBAH

85% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country boundaries and graticules, with land masses that change color on hover. The visualization uses D3 v5’s `geoOrthographic`, `geoPath`, and `geoGraticule` with a timer to continuously adjust the projection rotation. World map data comes from the World Atlas TopoJSON, while country names are loaded from a TSV file. Zooming is enabled via D3’s `zoom` behavior, and all rendering uses SVG paths.

Zzahra929

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

83% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays country-level data values, with landmasses rendered in sky blue and hover states highlighted in dark blue. Using D3 v5 with `d3.geoOrthographic` and `d3.geoPath`, the projection rotates continuously via `d3.timer`, while a graticule overlays the sphere. The visualization loads world topology from TopoJSON and country names from a CSV file, with zoom support via `d3.zoom`.

Nnouralkhoury

82% match

Loading thumbnail…

4 World

This example shows a world map with countries rendered in light green on a blue sphere, using a natural Earth projection. Hovering over a country turns it red and reveals its name as a tooltip. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, then projects it with d3.geoNaturalEarth1 and d3.geoPath. Pan and zoom interactions are enabled through d3.zoom, while the map is drawn as SVG paths within a scalable vector graphic.

RRolftest

82% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury

82% match

Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

GGlebenator

81% match