India Map

100%

✓ Published0🌍 Public

Last edited Jul 17, 2023

Created on Jul 17, 2023

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.

AI-generated description

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

Similar vizzes

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

94% match

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

93% match

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

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

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

92% match

Loading thumbnail…

India Map

This interactive visualization displays the states and districts of India on a zoomable SVG map. The code uses `d3.geoMercator` for projection and `d3.geoPath` to render geographic features, with district polygons filled via `scaleOrdinal` and `schemeCategory10`. It loads GeoJSON data from topojson files and applies a zoom behavior to pan and scale the map. Hovering over a district changes its fill color, while tooltips show the district and state names.

MMalempatiSaranya

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

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

90% match