Population Crisis Simulator

A wake-up call dashboard visualizing the global demographic crisis through real-time birth rate simulations

🚨 The Crisis We Face

As someone living in Japan as a Korean, I was shocked to discover that South Korea and Japan rank #1 and #8 respectively among countries with the lowest birth rates globally:

• 🇰🇷 South Korea: 0.72 births per woman (World's lowest)
• 🇯🇵 Japan: 1.26 births per woman

This isn't just an Asian problem. The demographic crisis spans across continents:

• 🇭🇰 Hong Kong: 0.77
• 🇸🇬 Singapore: 0.85
• 🇮🇹 Italy: 1.20
• 🇪🇸 Spain: 1.16
• 🇩🇪 Germany: 1.49

The replacement rate needed to maintain population is 2.1 births per woman.

📊 Project Purpose

This project was born from a personal shock at seeing these statistics. The goal is to:

1. Raise Awareness: Create an impactful visualization that makes the demographic crisis tangible
2. Enable Easy Sharing: Build a dashboard that can be easily shared to spread awareness
3. Simulate Futures: Show potential demographic outcomes based on current trends
4. Inspire Action: Help people understand the urgency of this global challenge

🌍 Why This Matters

The demographic crisis affects:

• Economic Sustainability: Shrinking workforce, increasing elderly care costs
• Social Security Systems: Fewer workers supporting more retirees
• Innovation and Growth: Declining young population impacts innovation
• National Security: Population decline affects military and economic power
• Cultural Continuity: Communities and traditions at risk of disappearing

🚀 Features

Interactive 3D Globe Visualization

• Real-time 3D Earth: Interactive globe powered by react-globe.gl with WebGL rendering
• Country Flags Display: Visual country markers with flags on the globe for easy identification
• Color-Coded Crisis Levels: Countries color-coded by birth rate severity (Extreme, Severe, Critical, Stable)
• Touch & Mouse Controls: Rotate, zoom, and explore the globe with intuitive controls
• Hover Tooltips: Instant country information on hover (population, birth rate)

Population Simulation Engine

• 100-Year Projections: Sophisticated demographic simulation spanning a century
• Real-time Population Dynamics: Track births, deaths, aging, and migration patterns
• Population Pyramids: Visualize age distribution across 17 age groups
• Key Metrics Tracking:
  • Dependency ratio (working-age vs dependents)
  • Median age progression
  • Natural growth rate
  • Birth/death rate evolution
• Milestone Detection: Automatic detection of population halving and peak years

Country Rankings & Analytics

• Global Rankings: Real-time sortable list of all countries by birth rate
• Crisis Indicators:
  • 🔴 EXTREME: Birth rate < 1.0
  • 🟠 SEVERE: Birth rate 1.0-1.5
  • 🟡 CRITICAL: Birth rate 1.5-2.1
  • 🟢 STABLE: Birth rate > 2.1
• Detailed Country Profiles: Population, life expectancy, and demographic trends

Future Colony Simulations

• Mars Colony Planning: Explore colonization scenarios and population sustainability on Mars
• Moon Defense Game: StarCraft-style RTS game for lunar base defense (desktop only)
• Celestial Bodies: Interactive moon and mars elements in 3D space

Mobile-First Design

• Fully Responsive: Optimized for all screen sizes from mobile to 4K displays
• Performance Mode: Automatic optimization for mobile devices
• Touch Gestures: Swipe, pinch-to-zoom, and tap controls
• Mobile Navigation: Bottom navigation bar for easy access on smartphones
• Progressive Enhancement: Core functionality works on all devices

Visual Effects

• Animated Starfield: Dynamic background with moving stars
• Atmospheric Effects: Earth atmosphere with realistic glow
• Smooth Transitions: Framer Motion animations throughout the UI
• Gradient Overlays: Modern glassmorphism design

🛠️ Technology Stack

• Next.js 15: React framework with App Router
• React 19: Latest React with concurrent features
• TypeScript: Full type safety across the application
• Tailwind CSS: Utility-first responsive design
• react-globe.gl: WebGL-powered 3D globe visualization
• Recharts: Responsive charting library for data visualization
• Framer Motion: Smooth animations and transitions
• react-countup: Animated number counters

🎯 Mission

To create a powerful, accessible tool that helps people understand the demographic crisis we're facing. By making these abstract numbers visual and personal, we hope to inspire conversations, policy changes, and individual decisions that can help address this global challenge.

📈 Getting Started

Prerequisites

• Node.js 18.x or later
• npm or yarn package manager

Installation

# Clone the repository
git clone https://github.com/parklabo/population-simulator.git
cd population-simulator

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to see the simulator in action.

Available Scripts

# Development
npm run dev          # Start development server with hot reload

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors automatically
npm run type-check   # Run TypeScript type checking

# Analysis
npm run analyze      # Analyze bundle size

Project Structure

population-simulator/
├── app/                    # Next.js App Router pages
│   ├── page.tsx           # Main application page
│   ├── layout.tsx         # Root layout with metadata
│   └── not-found.tsx      # 404 page
├── components/            # React components
│   ├── SimulatorModal.tsx # Population simulation modal
│   ├── MarsColonyModal.tsx # Mars colonization simulator
│   ├── MarsRTSGame.tsx    # Moon defense game
│   ├── GlobeFlagMode.tsx  # Flag rendering logic
│   ├── MobileNav.tsx      # Mobile navigation
│   ├── MobileCountrySelector.tsx
│   ├── StarField.tsx      # Animated background
│   ├── CelestialBodies.tsx # Moon & Mars elements
│   └── Footer.tsx         # App footer
├── lib/                   # Core logic and data
│   ├── population-simulator.ts # Simulation engine
│   └── world-data.ts      # Country demographic data
├── docs/                  # Documentation
│   └── MOBILE_DESIGN.md   # Mobile optimization specs
└── public/               # Static assets

How to Use

1. Explore the Globe: Rotate and zoom the 3D Earth to explore different countries
2. View Country Rankings: Check the left sidebar (desktop) to see countries ranked by birth rate
3. Select a Country: Click on a country flag or name to view detailed information
4. Run Simulation: Click "Run Simulation" to see 100-year population projections
5. Mobile Navigation: Use bottom navigation on mobile to switch between Earth, Moon, and Mars views
6. Mars Colony: Click the Mars icon to explore Mars colonization scenarios
7. Moon Defense: Click the Moon icon on desktop to play the lunar defense game

🤝 Contributing

This is an open-source project aimed at raising awareness about the global demographic crisis. We welcome contributions from:

• Developers: Code improvements, bug fixes, new features
• Demographers: Data accuracy, simulation model improvements
• Designers: UI/UX enhancements, accessibility improvements
• Translators: Internationalization and localization
• Data Scientists: Advanced analytics and visualization

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure:

• Code follows TypeScript and ESLint standards
• All type checks pass (npm run type-check)
• Mobile responsiveness is maintained
• Documentation is updated as needed

📊 Data Sources

• Population Data: United Nations Population Division (2024)
• Birth Rates: World Bank Development Indicators
• Life Expectancy: WHO Global Health Observatory
• Demographic Projections: Based on current trends and standard demographic models

Note: Data is for educational and awareness purposes. Actual demographic futures depend on many complex factors.

🌐 Browser Support

• Chrome/Edge: ✅ Full support (recommended)
• Firefox: ✅ Full support
• Safari: ✅ Full support (iOS 12+)
• Samsung Internet: ✅ Mobile optimized

WebGL support required for 3D globe visualization.

📝 License

MIT License - Free to use and share to spread awareness.

See LICENSE file for details.

🙏 Acknowledgments

• Built with urgency and hope for our collective future
• Inspired by the demographic challenges facing South Korea, Japan, and nations worldwide
• Thanks to all contributors working to raise awareness about this global issue

---

Remember: Every conversation about this crisis matters. Share this tool, discuss the issue, and be part of the solution.

Live Demo: Visit the Population Simulator

Made with 💙 by concerned global citizens