Skip to main content
SimilarExport ZIP
100%

Fork of React Starter

✓ Published0🌍 Public
NNita
Last edited Feb 25, 2025
Created on Feb 25, 2025
Forked from 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.

AI-generated description

D3.js Map of India in React

This project displays an interactive map of India using:

  • React for the UI framework
  • D3.js for data visualization and map rendering
  • TopoJSON for parsing map data

Features

  • Interactive state highlighting on hover
  • Tooltips showing state names
  • Responsive design that works on different screen sizes
  • Proper code organization with separate component and utility files

Data Source

The map uses GeoJSON data for India's states from the deldersveld/topojson repository.

Project Structure

  • index.js: Main entry point that renders the App component
  • components/IndiaMap.js: React component for the India map
  • utils/mapUtils.js: D3.js utility functions for rendering the map

How to Run

  1. Install dependencies: npm install
  2. Build the project: npm run build
  3. Open the index.html file in a 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
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
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
90% 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
88% 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 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
88% 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 india map

This visualization displays India’s states and districts as vector paths overlaid on a Mercator projection. The map distinguishes administrative levels with red state boundaries and brown district borders, while district fills use an ordinal color scale. It loads two TopoJSON datasets (state and district boundaries) and renders them as SVG paths using `d3.geoPath` and `d3.geoMercator`. The implementation also applies `d3.zoom` for interactive pan and zoom, with hover effects that highlight districts. The map is built with React and uses the `topojson` library to process the geographic features.

DDivyaVellanki
87% match