Fork of Fork of Polished World Map
An interactive world map rendered with SVG lets users click countries to view population, GDP, and region details from Natural Earth data loaded via TopoJSON. D3 geo projections—including Natural Earth, Orthographic, Mercator, and Albers—and a toggleable graticule are controlled through React state. The map uses `d3.geoPath` for geographic shapes and `projection.fitSize` for scaling, with React managing country selection and UI components.
AI-generated descriptionInteractive 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
- Clone this repository
- Install dependencies:
npm install - Start the development server:
npm start - 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.