100%

Fork of Map of India - States and Union Territories

✓ Published1🌍 Public

Last edited Feb 27, 2025

Created on Feb 27, 2025

Forked from 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.

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

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

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

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

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

93% match

Loading thumbnail…

Map of India - States and Union Territories

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.

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

92% match

Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98

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

86% match