Beautiful Viz-Rotating Globe-Interactive Visualization-For Hero section

100%

Beautiful Viz-Rotating Globe-Interactive Visualization-For Hero section

✓ Published0🌍 Public

Last edited Nov 15, 2023

Created on Nov 15, 2023

A rotating globe serves as an interactive hero banner, displaying a textured Earth with illuminated city points. Built with React, it uses Three.js with the `useFrame` hook to continuously rotate the sphere and `d3.geoPath` to project geographic coordinates from Natural Earth data. City locations are plotted as glowing dots using point sprites, with a starfield background created via Three.js points. The visualization dynamically updates each frame, offering a smooth, immersive introduction for a webpage.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

rotatable globe

A rotatable globe displays Earth’s continents and oceans, with animated color-coded pings appearing at random latitude and longitude coordinates. The globe auto-rotates around its vertical axis using a custom `autorotate` plugin that updates the projection’s rotation each frame. Built with React, the visualization uses D3 v5’s projection and path APIs, TopoJSON for world-110m-withlakes data, and the Canvas API for rendering. Users can drag to pause rotation and zoom via the Planetary.js-compatible drag and zoom plugins, with support for high-density displays.

CChase Hall

80% match

Loading thumbnail…

Untitled

This example demonstrates an interactive 3D globe visualization built with React and D3. It renders a rotating Earth using `d3.geoOrthographic` and `d3.geoPath` to project country boundaries onto a canvas, with atmospheric shading applied through layered gradients. The code uses `d3.forceSimulation` to position label nodes around the planet, enabling smooth hover interactions that display country names and associated data. The visualization loads geographic coordinates from a bundled TopoJSON dataset and updates the globe’s rotation via a requestAnimationFrame loop, providing a dynamic and responsive exploration of world geography.

Ssambird1

79% match

Loading thumbnail…

GLOBE

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AAnujbhatt26

78% match

Loading thumbnail…

Globe with Cities - React & D3

An orthographic globe projection displays world landmasses and city markers scaled by population, with graticules and a sphere contour providing geographic context. Built with React for state management and D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` for projection and rendering, the visualization includes interactive rotation via mouse position tracking. City coordinates come from a CSV dataset, and land features are derived from TopoJSON using `topojson.feature` and `topojson.mesh`.

Ddvinubius

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

77% match

Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents a globe that users can spin and zoom into, transitioning between orthographic, Winkel, and Mercator projections. It overlays animated geo-scatterplot transitions of global meat consumption and population growth data. Built with React and D3.js v3, it uses `d3.geo.path()` for map rendering, `d3.behavior.zoom()` for interaction, and SVG marks for data points, with tooltips showing exact values.

TTimmyLu

76% match

Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents global data on a rotatable globe, supporting zoom and pan through d3.behavior.zoom. Users can switch between orthographic, Winkel3, and Mercator projections. The display animates between datasets, including geo-scatterplot transitions and population growth percentages. Country boundaries and graticules render via d3.geo.path, with a custom pattern marking missing data regions. Tooltips provide details on hover.

Nnouralkhoury

76% match

Loading thumbnail…

Globe Zoom - Animate

An interactive orthographic globe visualizes country-level data, allowing users to zoom and rotate the projection. A choropleth map colors each country according to a numeric value, with a search feature that highlights a selected country and a rate filter for subsetting. Built with React and D3 v3, the visualization uses `d3.geo.orthographic` for the globe, `d3.geo.path` for rendering, and TopoJSON for world geography. The data is loaded from a local CSV file.

Nnouralkhoury

76% match