INDIA MAP

100%

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

India Map Country

This example displays a choropleth map of Indian states, rendered as orange-highlighted SVG paths on hover. It uses d3.json to load a TopoJSON file of India’s administrative boundaries, converts it to GeoJSON via topojson.feature, and projects it with d3.geoMercator and fitExtent. The d3.geoPath generator draws each state, while state names are placed using path.centroid. The map fills the viewport with skyblue polygons and black strokes, and a bold title labels the visualization.

Nnsatyaprakash22

90% 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

89% match

Loading thumbnail…

India Map made with D3

This example shows a choropleth map of India’s states, each filled with a distinct color from a categorical scale and labeled with its name. Built with D3 v5, it loads TopoJSON state boundaries and renders them as SVG paths using a Mercator projection via `d3.geoPath` and `geoMercator`. State names are placed at each path’s centroid, while `d3.scaleOrdinal` and `schemeCategory10` assign colors.

TTusar

89% 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

88% match

Loading thumbnail…

India Map

This example displays a choropleth map of India’s states, with each state filled by a distinct color from d3’s `scaleOrdinal` and `schemeCategory10`. Using topojson data loaded from a remote GitHub repository, the code projects the geometry with `d3.geoMercator` and renders it as SVG paths via `d3.geoPath`. State names are positioned at each polygon’s centroid, while hover effects and a light pink stroke are defined in the accompanying CSS. The visualization relies on the D3 v5 library and topojson for geographic feature extraction.

NNithish Kumar

88% match

Loading thumbnail…

IndiaMap

This example renders a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON geometries into SVG paths, while `scaleOrdinal` and `schemeCategory10` assign colors. State boundaries are emphasized with white strokes, and hovering turns a state white. Data comes from a remote TopoJSON file, and the map is displayed within a fixed-width SVG on a teal gradient background.

VVamsi Krishna

88% match