Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interactive maps - India

✓ Published4🌍 Public
BB Sundaresan
Last edited Jul 23, 2020
Created on Jul 13, 2020

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.

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 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
97% match
Loading thumbnail…

Cheap tricks for interactive maps - India

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.

Mmayurakat
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
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…

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
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
87% 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
87% 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
87% match