Viewing a saved revision (read-only)
4e3683dc01e146efb7c71e2df157c60b
Fork of Fork of HTML Starter
This interactive map displays the states of India with hover effects that highlight each state and reveal its name in a tooltip. The visualization is built with React and D3.js, using the `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON state boundaries as SVG paths. State polygons are colored a muted teal and brighten on mouseover. The GeoJSON data is loaded from an external GitHub repository, and the tooltip is implemented as an HTML overlay positioned via mouse event coordinates.
AI-generated descriptionIndia Map Visualization
This project displays an interactive map of India using D3.js and GeoJSON data. The map shows state boundaries and provides interactive hover effects.
Features
- Interactive map of India with state boundaries
- Hover effects to highlight states
- Tooltip displaying state names
- Responsive design that works across different screen sizes
Data Source
The GeoJSON data for India's states is sourced from: https://github.com/geohacker/india/blob/master/state/india_state.geojson
Technologies Used
- HTML for structure
- CSS for styling
- JavaScript for interactivity
- D3.js for data visualization and mapping
Getting Started
Simply open the index.html file in a web browser to view the map.
Troubleshooting
If the map doesn't appear:
- Make sure you have an active internet connection, as the GeoJSON data is loaded from an external source
- Check browser console for any JavaScript errors
- Try using a different web browser