100%

Map of India - States and Union Territories

✓ Published3🌍 Public

Last edited Feb 27, 2025

Created on Feb 27, 2025

This interactive map of India displays all states and union territories, color-coded by region type and rendered as an SVG using D3.js v5 and GeoJSON data from a public GitHub repository. Users can hover over regions to see tooltips, click to access a details panel, search for specific areas, and use zoom and pan controls powered by d3.zoom. The map uses d3.geoMercator projection and d3.geoPath for rendering, with state highlighting and dimming effects for visual feedback.

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

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

Map of India

The map depicts India’s states, each filled with a distinct color from d3.scaleOrdinal and d3.schemeCategory10, with state names overlaid at path centroids. It uses d3.geoMercator projection and d3.geoPath to render GeoJSON derived from TopoJSON via topojson.feature, sourced from a GitHub-hosted Indian states dataset. State boundaries are stroked in black with hover highlighting on counties, though interactivity is limited to title elements showing state names.

NNita

87% match

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

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

87% match

Loading thumbnail…

Fork of 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.

NNita

86% match

Loading thumbnail…

India Map

This interactive map of India displays state and district boundaries overlaid on a Mercator-projected SVG. Users can pan and zoom the map using d3.zoom, with districts colored via d3.scaleOrdinal and schemeCategory10. Hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoPath, d3-geo-projection, and topojson to render geographic data from two JSON sources containing state and district boundaries, with text labels placed at path centroids.

Nnikhilagopi

86% match