Area Truth Globe
An interactive 3D visualization tool that compares the true geographical land area of nations against their projected visual appearance on a digital screen. This project aims to highlight the distortion inherent in mapping a spherical surface onto 2D displays.
Features
- Interactive Projections: Switch between a 3D Orthographic globe and a 2D Equal Earth projection.
- Area Analysis: Calculates and compares:
- True Land Area: Actual surface area in km² derived from spherical geometry.
- Apparent Screen Area: The number of pixels the country occupies in the current view.
- Visual Efficiency: A distortion index indicating how prominently a country appears relative to its actual size.
- AI Integration: Uses Google Gemini to generate concise geographical facts about selected countries.
- Search & Navigation:
- Real-time country search with flag previews (FlagCDN).
- Drag-to-rotate and scroll-to-zoom interaction.
- Smooth camera transitions to selected targets.
- Data Visualization: Clean, dark-mode UI with D3.js rendering and Tailwind CSS styling.
Tech Stack
- Frontend: React 19, TypeScript
- Visualization: D3.js (Geo projections, paths, and math)
- Styling: Tailwind CSS
- AI: Google GenAI SDK (
@google/genai)
- Data:
Setup and Installation
Prerequisites
- Node.js and npm installed.
- A Google Gemini API Key.
Installation
Environment Configuration
Set your API key in the environment variables. The application expects process.env.GEMINI_API_KEY to be available.
GEMINI_API_KEY=your-gemini-api-key
Running the Application
Usage
- Rotate: Click and drag on the globe/map.
- Zoom: Use the scroll wheel to zoom in and out.
- Select: Click any country to view its statistics and AI-generated fact.
- Search: Use the search icon in the top right to find specific countries.
- Toggle Projection: Use the controls in the bottom left to switch between 3D Globe and 2D Map views.
License
MIT
