Interactive World Map

A beautiful, interactive world map built with React and D3.js featuring country selection, multiple map projections, and detailed country information.

Features

• 🗺️ Interactive world map with clickable countries
• 🎯 Multiple map projections (Natural Earth, Orthographic, Mercator, Albers)
• 📊 Country information panel with population and GDP data
• 🌐 Toggle-able graticule (grid lines)
• 📱 Responsive design for mobile and desktop
• ✨ Smooth animations and modern UI

Technologies Used

• React 18
• D3.js v7
• TopoJSON for map data
• CSS3 with modern features (backdrop-filter, gradients)
• Web-standard APIs

Getting Started

1. Clone this repository
2. Install dependencies: npm install
3. Start the development server: npm start
4. Open your browser to http://localhost:3000

Usage

• Click on countries to view detailed information
• Use the controls in the top-right to change projections and toggle features
• Click outside any country to deselect
• Hover over countries to see hover effects

Map Data

This project uses the Natural Earth dataset via the world-atlas package, providing accurate country boundaries and geographic data.

Browser Support

This application works in all modern browsers that support:

• ES6+ JavaScript features
• CSS Grid and Flexbox
• SVG rendering
• Fetch API

License

Open source - feel free to use and modify for your projects.