UN Geo-Mismatch Explorer

🚨 The Challenge: Orphaned Crises

In the landscape of global humanitarian aid, "Orphaned Crises" are regions where funding consistently falls short of what objective risk and severity metrics predict. These dangerous gaps leave millions vulnerable despite clearly documented needs.

The UN Geo-Mismatch Explorer is a high-performance visual analytics platform designed to expose these funding anomalies. By leveraging machine learning (SHAP values) and multivariate clustering, this tool empowers decision-makers to identify and prioritize neglected regions with precision.

✨ Key Features

🌍 Immersive 3D Visualization

• Interactive Globe: A WebGL-powered 3D interface showcasing 24 crisis-affected countries.
• Visual Encoding: Gap severity is instantly recognizable through color-coded geospatial markers (Critical, High, Moderate).
• Smooth Navigation: Fly-to animations and detailed hover states for rapid context switching.

🧠 ML-Powered Insights

• Orphaned Crisis Detection: Identifies outliers where funding levels defy algorithmic predictions based on Needs, Risk, and Complexity.
• SHAP Value Analysis: Transparently explains why a country is flagged—whether it's due to conflict intensity, displacement numbers, or lack of media attention.
• Cluster Intelligence: Groups countries with similar crisis profiles to recommend standardized intervention strategies.

📊 Deep Data Analytics

• Gap Scoring: A proprietary metric quantifying the divergence between assessed needs and received funding.
• Dynamic Filtering: Switch seamlessly between 'Overview', 'Gap Score', 'Orphaned', and 'Clusters' views.
• Responsive Design: A specialized "Dark Techno" aesthetic built for professional monitoring environments.

---

🛠️ Tech Stack

• Core: React 19, TypeScript, Vite
• Visualizations:
  • React Globe.gl (Three.js binding)
  • Recharts (Statistical graphs)
  • Framer Motion (Cinematic UI transitions)
• Styling: TailwindCSS v4 (Utility-first styling)

---

🚀 Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

Installation

Clone the repository and install dependencies:

git clone https://github.com/VedanthR5/un_dbricks_aegis.git
cd frontend/app
npm install

Local Development

Start the development server with hot-module replacement:

npm run dev

The app will be available at imports http://localhost:5173.

Building for Production

Create a production-ready build:

npm run build

---

🌐 Deployment

This project is configured for automated deployment to GitHub Pages via GitHub Actions.

• Live URL: https://vedanthr5.github.io/un_dbricks_aegis/
• CI/CD: Pushing to the master branch triggers the build and deploy workflow defined in .github/workflows/deploy.yml.

---

📂 Project Structure

src/
├── components/     # Modular UI blocks
│   ├── globe/      # 3D Globe visualization
│   ├── charts/     # D3 & Recharts implementations
│   ├── panels/     # Glassmorphic info panels
│   └── nav/        # Navigation & Methodology
├── data/           # Static JSON datasets (SHAP, Clusters, Scores)
├── lib/            # Zustand store & Theme configs
└── types/          # TypeScript interfaces

---

🤝 Contributing

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

License

Distributed under the MIT License. See LICENSE for more information.