Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of react first level drilldown map using zoom

Public visualization

Viewing a saved revision (read-only)

fe3c167facfb4cfdbe50b9e37e5a57a0

Fork of react first level drilldown map using zoom

0 stars0🌍 Public
AAamir Hameed mir
Last edited May 26, 2024
Created on May 26, 2024

An interactive drill-down map of India lets users click state boundaries to zoom into district-level geography. Built with React and D3 v6, the visualization loads TopoJSON data and renders SVG paths via `d3.geoPath` with a Mercator projection. Clicking a state triggers `pathGenerator.bounds()` to compute the target region’s bounding box, then animates a `d3.zoom` transition over 500 milliseconds to scale and center the view. The drill-down filters district features based on the selected state’s name, and a dynamic stroke-width adjustment maintains visual clarity during zooming.

AI-generated description

react first level drilldown map using zoom