Skip to main content
SimilarExport ZIP
100%

India Map

✓ Published0🌍 Public
0007ebey
Last edited Mar 10, 2021
Created on Aug 7, 2020
Forked from Maps Started

This example displays a map of India with its states, rendered as an SVG using D3.js v5 and React. The map uses a Mercator projection and colors each state with a purple scale, with state names labeled at their centroids. The visualization relies on d3-geoPath and a TopoJSON file for state boundaries, with a zoom feature available but not activated in the code.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

India Map

This example shows a choropleth-style map of India rendered in SVG, with each state filled in light green. The map uses a D3 geoMercator projection centered on the country’s coordinates, with d3.geoPath generating the state boundaries from TopoJSON data fetched from a remote gist. React components manage the data-loading hook (useData) and the Map component, while the map is displayed at full window size on a grey background.

Yyamunayennem
92% match
Loading thumbnail…

India Map

This example displays a choropleth-style map of India, rendering each state as a green SVG path against an orange background. It uses React for component structure and d3’s `geoMercator` projection with `geoPath` to convert TopoJSON geographic data into scalable vector graphics. The map loads state boundaries from a remote gist URL via `d3.json`, processes them with `topojson.feature`, and fills the viewport dynamically. The visualization is simple and static, focusing on clear geographical layout rather than interactivity or data encoding.

Ssudhamshu24
92% match
Loading thumbnail…

India Map

A map of India displays each state as a semi-transparent purple polygon, with state names overlaid at their geographic centers. The visualization uses D3 v5 with a Mercator projection (`geoMercator`) and `geoPath` to render TopoJSON administrative boundaries from a Vietnam TopoJSON repository. State colors are assigned sequentially via `scaleOrdinal` and `interpolatePurples`. The SVG map is built using a React-compatible setup, though the example runs as plain JavaScript with D3 selections.

DDat Codero
92% match
Loading thumbnail…

India Map Country

This example displays a map of India with its state boundaries, rendered as an SVG using D3.js. Each state is drawn as a sky-blue path with black strokes and labeled with its name. The visualization uses `d3.geoMercator()` projection with `projection.fitExtent()` to fit the map to the viewport, and state boundaries are converted from TopoJSON data using `topojson.feature`. Hovering over a state highlights it in orange via CSS, while state names are placed at path centroids with `d3.geoPath()`.

Nnsatyaprakash22
91% match
Loading thumbnail…

India Map

The example displays a choropleth-style map of Indian states and territories, rendered as orange SVG paths on a full-screen canvas. It draws geographic boundaries using a Mercator projection centered on the country, with `d3.geoPath` converting GeoJSON features into SVG path data. The map data is loaded remotely from a TopoJSON file, which is converted to GeoJSON via `topojson.feature`. The visualization is built with React components, where the `Map` component receives the parsed feature collection and applies the projection, while React manages the overall SVG rendering.

Ggayathri
91% match
Loading thumbnail…

India Map

This example displays a map of India with each state rendered as a filled green path. It demonstrates the core D3 geo capabilities, using `geoMercator` to project geographic coordinates and `geoPath` to generate the SVG path strings for the map features. The visualization is built with React, fetching GeoJSON data from a GitHub gist and converting it from TopoJSON using the `topojson` `feature` function. The Map component imports these D3 functions to transform the data into the final SVG rendering.

AAshrith Kudidhi
91% match
Loading thumbnail…

India Map

This interactive map of India renders each state as a filled SVG path, with state names overlayed at their geographic centroids. The visualization uses D3's `geoMercator` projection and `geoPath` to generate the map geometry from a GeoJSON file containing `IND_adm1` administrative boundaries. Each state is colored using D3's `scaleOrdinal` with `schemeCategory10` palette, and hovering turns a state white. The vector data is processed through the TopoJSON library's `feature` function, with the map positioned and scaled via explicit projection translations.

AArun Pratap
91% match
Loading thumbnail…

Map - India

This example visualizes the states and districts of India as an interactive SVG map. Users can pan and zoom the map using d3.zoom, while hover states reveal district names via title elements. The visualization uses d3-geoMercator for projection, d3.geoPath for rendering paths, and d3.scaleOrdinal with schemeCategory10 to color districts. Geographic data comes from two TopoJSON sources: India state boundaries and 2019 district boundaries. The code also loads city data from a CSV, though points are not plotted in the final rendering.

Llambda-fox
90% match