India Map Visualization

This visualization displays an interactive map of India showing all states and union territories.

Features

• Color-coded states and union territories
• Interactive hover effects with tooltips
• Click to select states and view detailed information
• Zoom and pan functionality
• Search functionality to find specific states/UTs
• Responsive design for different screen sizes
• State information panel with details about each region

Data Source

The map uses GeoJSON format data from: https://raw.githubusercontent.com/geohacker/india/master/state/india_state.geojson

Technology

• HTML5, CSS3, JavaScript
• D3.js for visualization and interactivity
• GeoJSON for map data

How to Use

• Hover over any state to see its name in a tooltip
• Click on a state to select it and view detailed information
• Search for a specific state using the search box
• Zoom in/out using the buttons or mouse wheel
• Pan the map by clicking and dragging

Project Structure

• index.html - Main HTML structure
• styles.css - All styling for the application
• index.js - Main application logic
• mapUtils.js - Utility functions for map rendering and interaction

Accessibility

The visualization includes keyboard navigation and appropriate contrast ratios for text readability.

Browser Compatibility

Tested and working on the latest versions of Chrome, Firefox, Safari, and Edge.

Future Improvements

• Adding more detailed data for each state/UT
• Implementing choropleth visualization for various metrics
• Adding time-series data visualization
• Improving mobile experience with touch-optimized interactions