Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published1🌍 Public
NNita
Last edited Mar 2, 2025
Created on Feb 27, 2025

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 description

India Map Visualization

This project displays an interactive map of India using D3.js, React, 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

  • React for UI components and state management
  • D3.js for data visualization and mapping
  • JavaScript for interactivity
  • CSS for styling

Getting Started

  1. Clone the repository
  2. Run npm install to install dependencies
  3. Run npm start to start the development server
  4. Open your browser to http://localhost:3000

Building for Production

Run npm run build to create an optimized production build.

Troubleshooting

If the map doesn't appear:

  1. Make sure you have an active internet connection, as the GeoJSON data is loaded from an external source
  2. Check browser console for any JavaScript errors
  3. Try using a different web browser
MIT Licensed

Similar vizzes

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
95% match
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
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
91% 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
90% 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
87% 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
87% match
Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes crime rates across Indian states, encoding rates using a sequential orange-red color scale with hover tooltips showing exact values. It loads India GeoJSON data from GitHub and renders SVG paths via d3.geoPath with a Mercator projection fitted to the viewport. The code applies a d3.scaleSequential color scale over a sample dataset, draws state labels using path.centroid, and binds mouseover events to display tooltips interactively.

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