Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interactive maps - India

✓ Published1🌍 Public
Mmayurakat
Last edited Jul 26, 2020
Created on Jul 26, 2020

This interactive map visualizes India’s districts and states, with each district colored by its state and districts that reveal their name and state on hover. The map supports pan and zoom through d3.zoom, and uses d3.geoMercator with a clip extent for projection. Built with React and D3, it renders SVG paths generated by d3.geoPath from TopoJSON data for states and districts, with district metadata from the Datameet boundary dataset and state names from the deldersveld TopoJSON source.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India shows district-level boundaries colored by state, with state outlines overlaid in black. Users can pan and zoom via the d3.zoom API, which applies a transform to the SVG group containing all map elements. The visualization loads TopoJSON data for both states and districts, then renders paths using d3.geoPath with a geoMercator projection. District colors are assigned via a d3.scaleOrdinal, and hover states change the fill through CSS.

BB Sundaresan
96% match
Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India displays district-level boundaries colored by state, with state outlines overlaid in steel blue. Users can pan and zoom the map using D3's zoom behavior. The visualization uses d3.geoPath with a geoMercator projection to render TopoJSON district and state data from GitHub sources, while CSV data provides city locations. Hovering over districts reveals tooltips with district and state names, and the map employs d3.scaleOrdinal with schemeCategory10 for color encoding.

Ssriramvsharma
96% match
Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India displays district and state boundaries with hover effects. District polygons fill with categorical colors, while state outlines appear in steel blue, and zooming is enabled through the d3.zoom API. The visualization uses d3.geoPath with the geoMercator projection to render TopoJSON data for both administrative levels. Tooltips show district and state names via SVG title elements. Data comes from GitHub-hosted TopoJSON files for Indian states and districts, with city coordinates loaded from a CSV file.

Ssriramvsharma
96% match
Loading thumbnail…

Cheap tricks for interactive maps - India

This interactive map of India displays district-level boundaries colored by state, with state outlines superimposed in steel blue. Users can zoom and pan via D3’s `zoom` behavior. The visualization uses `d3.geoMercator` projection, `d3.geoPath` for rendering TopoJSON district data, and `d3.scaleOrdinal` with `schemeCategory10` for coloring, with hover effects changing district fills.

SSuman Choudhary
95% 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
88% 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
88% 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
87% 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
87% match