India map

100%

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 27, 2023

A choropleth map of India displays districts and states, with district boundaries colored by state and hover states highlighting individual districts. The visualization uses D3.js version 5.16 and d3-geo-projection.v2 to project TopoJSON data for India’s states and districts from GitHub sources. Tooltips reveal district names and their parent states. The map employs the Mercator projection and includes zoom functionality via event handling.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

india map

This interactive visualization displays a choropleth map of India, with district-level polygons colored by state and state boundaries outlined in black. Users can pan and zoom the map using d3.zoom. The map is rendered with SVG paths generated by d3.geoPath and a d3.geoMercator projection. District and state boundaries come from TopoJSON files, with district tooltips showing district and state names on hover. The map uses d3.scaleOrdinal with d3.schemeCategory10 for district coloring.

Bbindhureddy98

91% match

Loading thumbnail…

India Map

This example displays a choropleth map of India with district-level boundaries colored by state and state outlines highlighted in green. Built with React and D3, it uses `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3.zoom` for pan and zoom interactions. The visualization renders as SVG, combining TopoJSON data from two sources—one for state borders and another for district polygons. Hovering over districts turns them black, with tooltips revealing district and state names.

Hharika-1929

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 made ith D3

This choropleth map visualizes India’s states using D3 v5, with each state filled by a categorical color scale based on its name. A Mercator projection, configured with custom translation and scaling, renders the TopoJSON geometry as SVG paths, while state labels are placed at each path’s centroid. The code uses `d3.json`, `d3.geoPath`, `topojson.feature`, and a `scaleOrdinal` with `schemeCategory10`, with data loaded from a remote GitHub TopoJSON file.

TTusar

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

88% match

Loading thumbnail…

india map

This visualization shows India’s administrative boundaries with district-level polygons filled by state using a categorical color scale, overlaid with state outlines. Pan and zoom are enabled via d3.zoom. The map uses d3.geoMercator projection and d3.geoPath to render TopoJSON data from two external sources: state boundaries and district boundaries. District polygons include hover effects and tooltips displaying district and state names via SVG title elements.

PPujitha14challagulla

88% match

Loading thumbnail…

Map - India

This example displays a choropleth map of India with district-level polygons filled by state using a categorical color scheme, overlaid with darker state boundaries. Built with React and rendered as SVG, it employs d3.geoPath, d3.geoMercator, and the topojson feature function. The map centers on India, supports zooming via d3.zoom, and loads district and state boundary TopoJSON data from GitHub.

CCherukuriMilind

87% match

Loading thumbnail…

Map of India with D3 - chloropleth map-APR 23, 2021

A choropleth map renders India’s districts as colored SVG paths, with each region labeled by its state name at the centroid. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to draw shapes from a TopoJSON dataset of district boundaries. `d3.scaleOrdinal` with `schemeCategory10` assigns fill colors, while district hover states and labels are added via appended `title` elements and `text` nodes. The code relies on the topojson client library to convert TopoJSON features into GeoJSON for rendering.

NNita

87% match