{"version":"1.0","type":"rich","title":"react first level drilldown map using zoom","description":"This example shows a first-level drilldown map of India that zooms into the selected state or district. Clicking a polygon triggers a smooth zoom animation that fits the clicked region’s bounding box, computed with `d3.geoPath().bounds`, before updating the rendered features. The map uses React state to toggle between state-level and district-level TopoJSON data, loaded via `d3.json`, while `d3.zoom` handles pan and scale transforms on the SVG. The `geoMercator` projection and `geoPath` render the geographic boundaries in a teal fill.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f85bf6589a87492f92c3b8070194c3c9?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}