Skip to main content
SimilarExport ZIP
100%

Fork of Fork of React Starter

✓ Published0🌍 Public
NNita
Last edited Feb 27, 2025
Created on Feb 27, 2025

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.

AI-generated description

Interactive Map of India

This project creates an interactive map of India using:

Features

  • Displays all states of India
  • Hover over states to see state names
  • Click on states to select/deselect them
  • Responsive design

Getting Started

  1. Install dependencies:
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This interactive map of India displays each state as a colored SVG region, highlighting states and showing their names via tooltips on hover. Using React for the UI and D3.js for rendering, the map loads GeoJSON data from a remote TopoJSON repository and projects it with a Mercator projection. The code uses `d3.geoPath` for drawing shapes, `topojson.feature` for converting data, and a tooltip system driven by mouse events.

NNita
96% 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
95% 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
92% 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
91% match
Loading thumbnail…

Fork of Fork of india map

This visualization displays a map of India with its states and districts, colored by state using a categorical color scale. It shows district-level boundaries with hover effects that turn districts black, and state boundaries with orange strokes. The map supports zooming and panning via d3.zoom. Built with React, it uses d3.json to load TopoJSON data from GitHub sources, d3.geoMercator for projection, and d3.geoPath to render the SVG paths.

Ssaiteja0725
89% match
Loading thumbnail…

Fork of IndiaMap

This visualization displays a color-coded map of India’s states, with each state labeled by name and rendered using D3’s `geoMercator` projection and `geoPath` generator. State boundaries are drawn with a white stroke, and hovering over a state fills it white. The code loads TopoJSON data from a GitHub gist, applies a `scaleOrdinal` with `schemeCategory10` for fill colors, and positions state name labels at path centroids. It uses D3 v5, TopoJSON, and renders to SVG within a React project.

KKinjal-Goyani
88% match
Loading thumbnail…

Fork of India Map

This fork of an India map visualizes state-level boundaries with each state colored using a categorical color scale, and labels placed at state centroids. The code loads TopoJSON data from a remote source, converts it to GeoJSON using `topojson.feature`, and renders SVG paths via `d3.geoPath` with a `geoMercator` projection. State names are added as SVG text elements positioned with `pathGenerator.centroid`, and hover effects are styled in CSS.

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