India Map

100%

✓ Published1🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

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.

AI-generated description

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

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

96% 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…

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

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

This interactive visualization presents a map of India, highlighting its states and districts in color. Users can explore the geography through zooming and panning via d3.zoom, while the map’s districts display hover tooltips that reveal district and state names. The visualization uses d3.geoPath with a geoMercator projection to render GeoJSON features built from TopoJSON data, which is sourced from external repositories for Indian state and district boundaries.

Aadapavaishnavi12

91% match

Loading thumbnail…

Fork of India Map

This interactive map of India displays state and district boundaries, with each district colored by its state using a categorical color scale. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON features for both administrative levels, and d3.zoom to enable panning and zooming. Hovering over a district reveals a tooltip with its name and state; the code also attempts to label states with text positioned via path centroids, though that feature is incomplete.

SsreepavanKothapalli

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

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

90% match