Skip to main content
SimilarExport ZIP
100%

India Map

✓ Published0🌍 Public
AArun Pratap
Last edited Jul 21, 2023
Created on Jul 21, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

India map

This interactive map of India displays state and district boundaries as SVG paths, with districts colored by state using a categorical scale. Users can pan and zoom the map via d3.zoom. The visualization uses d3.geoMercator for projection, d3.geoPath to generate paths, and topojson.feature to parse geographic data from TopoJSON sources, including state and district boundary datasets. Hovering over a district path changes its fill to dark green and reveals a tooltip showing the district and state names.

Vvarun-030
91% 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
91% match
Loading thumbnail…

India Map

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.

0007ebey
91% match
Loading thumbnail…

Map of India

The map depicts India’s states, each filled with a distinct color from d3.scaleOrdinal and d3.schemeCategory10, with state names overlaid at path centroids. It uses d3.geoMercator projection and d3.geoPath to render GeoJSON derived from TopoJSON via topojson.feature, sourced from a GitHub-hosted Indian states dataset. State boundaries are stroked in black with hover highlighting on counties, though interactivity is limited to title elements showing state names.

NNita
90% match
Loading thumbnail…

INDIA MAP

This example visualizes a map of India, displaying each state as a colored SVG path with its name labeled at the centroid. Using d3.geoMercator for projection and d3.geoPath to generate paths, it loads state boundaries from a TopoJSON file via d3.json. The code applies a d3.scaleOrdinal color scheme to fill each state and appends text elements using pathGenerator.centroid for positioning, while CSS adds black strokes between states.

0057SatvikDamera
90% match
Loading thumbnail…

India Map

This interactive map of India displays state and district boundaries overlaid on a Mercator-projected SVG. Users can pan and zoom the map using d3.zoom, with districts colored via d3.scaleOrdinal and schemeCategory10. Hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoPath, d3-geo-projection, and topojson to render geographic data from two JSON sources containing state and district boundaries, with text labels placed at path centroids.

Nnikhilagopi
90% match
Loading thumbnail…

India Map

This example displays an interactive choropleth map of India, with districts and states rendered as colored SVG paths that respond to zooming and hovering. It uses D3’s `geoMercator` projection, `geoPath` for drawing geographic features, and `topojson.feature` to extract polygon data from TopoJSON files. The map also applies `d3.scaleOrdinal` with `schemeCategory10` to color districts, and `d3.zoom` enables pan and zoom. State and district names appear in tooltips via appended text elements.

UUmarani Vemula
89% 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
89% match