100%

Fork of Fork of Fork of Map of India - States and Union Territories

✓ Published0🌍 Public

Last edited Feb 27, 2025

Created on Feb 27, 2025

Forked from Fork of Fork of Map of India - States and Union Territories

This interactive map of India displays states and union territories as color-coded, clickable SVG paths, using a Mercator projection created with `d3.geoMercator` and rendered through `d3.geoPath`. Built with React and D3.js, it loads GeoJSON data from a GitHub repository, enabling users to hover for tooltips, click for state details, and zoom or pan using `d3.zoom`. The map distinguishes regions by color and includes animated label resizing during zoom interactions.

AI-generated description

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
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

React
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
Zoom in/out using the buttons or mouse wheel
Pan the map by clicking and dragging

Project Structure

App.jsx - Main React component
IndiaMap.jsx - Map visualization component
styles.css - All styling for the application

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Map of India - States and Union Territories

This interactive visualization displays a color-coded map of Indian states and union territories, distinguishing the two region types with distinct fill colors. Users can hover, click, zoom, and pan across the map, with tooltips and a side panel showing details for selected regions. The visualization uses React with D3.js APIs including `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to render GeoJSON data from a GitHub-hosted india_state.geojson file. State labels position themselves at path centroids, and zoom interactions dynamically adjust their font size.

NNita

95% match

Loading thumbnail…

Fork of Map of India - States and Union Territories

This interactive map of India displays all states and union territories, color-coded by region type. Users can hover over regions to see tooltips, click to select and view details in an info panel, search for specific areas, and zoom and pan the map. Built with D3.js v5, it uses `d3.geoMercator()` and `d3.geoPath()` to render GeoJSON data from the geohacker/india repository, with `d3.zoom` for navigation and SVG animations for transitions.

NNita

93% match

Loading thumbnail…

Fork of Map of India - States and Union Territories

This interactive map of India visualizes all states and union territories as color-coded SVG regions, distinguishing union territories with a distinct color and displaying state names as labels. Users can hover to see tooltips, click to zoom into a specific state via a smooth transition, and pan using d3.zoom. The map loads GeoJSON data from an external repository, renders paths with d3.geoPath, and includes zoom controls and a legend panel. The implementation relies on d3.js version 5 and the d3-zoom API.

NNita

93% match

Loading thumbnail…

Fork of Fork of React Starter

This interactive map displays the states of India using GeoJSON data from the India State Map Data GitHub repository. Users hover over regions to reveal state names via a tooltip and click to toggle a persistent selection state, visualized by distinct fill colors. The visualization is built with React and D3.js, leveraging `d3.geoMercator` for projection, `d3.geoPath` for geographic paths, and state-based styling to update SVG attributes dynamically. The map loads the geographic data asynchronously and handles loading and error states.

NNita

92% match

Loading thumbnail…

Fork of Map of India - States and Union Territories

An interactive map of India visualizes all states and union territories, with click-to-select details, hover tooltips, zoom and pan controls, search, and type/region filtering. Built with D3 v7, it renders geographic boundaries from GeoJSON using `d3.geoMercator` and `d3.geoPath`, applies zoom via `d3.zoom`, and dynamically layers labels over an SVG canvas. A statistics panel and legend enrich the experience, while tooltips and state information pull from a curated dataset.

NNita

92% match

Loading thumbnail…

Fork of Fork of Map of India - States and Union Territories

An interactive choropleth map displays India's states and union territories, with each region color-coded by type (blue for states, orange for union territories). Users can hover over regions to see a tooltip with capital and region, click to zoom and reveal detailed statistics in a side panel, and search or filter by region or administrative type. The map uses D3.js v7 with the `d3.geoMercator` projection and `d3.geoPath` for rendering, pulling GeoJSON data from a GitHub repository, and includes zoom/pan interactions and a fullscreen toggle.

NNita

91% match

Loading thumbnail…

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.

NNita

91% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

DDivyaVellanki

91% match