Overview
The Interactive Rotating Globe is a web-based visualization tool that allows users to explore countries and continents through an interactive 3D globe interface. Built with D3.js and modern web technologies, it provides an engaging way to navigate geographical data.
Features
- Interactive 3D Globe: A spherical projection of the world using D3.js geoOrthographic projection
- Country Selection: Choose any country from the dropdown menu or click directly on the globe
- Smooth Rotation: Animated transitions when rotating to a selected country
- Continent Highlighting: When a country is selected, all countries in the same continent are highlighted
- Country Labels: Display names of countries within the same continent as the selected country
- Manual Rotation: Drag the globe to rotate it manually and explore different regions
- Dynamic Background: The globe background brightens when a country is selected
How to Use
1. Select a Country
Use the dropdown menu on the right side of the globe to choose a country, or click directly on any country on the globe itself.
2. View Continent
Once selected, the globe will rotate to center on your chosen country. The selected country appears in bright green, while other countries in the same continent are highlighted in a darker green shade.
3. Explore Manually
Click and drag anywhere on the globe to rotate it manually. This allows you to explore different regions at your own pace.
4. Reset View
Select "Choose a country..." from the dropdown to return the globe to its default position and clear all highlights.
Technical Details
Technology Stack
- D3.js v7: Data visualization and geographic projections
- TopoJSON: Efficient geographic data format
- SVG: Scalable vector graphics for rendering
- Vanilla JavaScript: Core interaction logic
Key Components
- Projection: d3.geoOrthographic() creates the spherical Earth view
- Path Generator: Converts GeoJSON data to SVG paths
- Graticule: Displays longitude and latitude grid lines
- Drag Behavior: Enables interactive rotation of the globe
Color Scheme
Outer Space: #1a1a2e
Dark Sea: #03254E
Midnight Pine: #0A100D
Faded Land: #45653E
Simmered Lime: #7DC95E
Sky Light: #477998