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)

8fed756f25744371b81d798938fdcd5c

Fork of react first level drilldown map using zoom

0 stars0🌍 Public
SsreepavanKothapalli
Last edited Apr 13, 2023
Created on Apr 13, 2023

This example shows a drill-down map of Indian states and districts. Clicking a state zooms in to reveal its districts, while clicking a district zooms to that region. The visualization uses React to manage state for the selected area and D3 v6 for rendering. It employs `d3.geoMercator` and `d3.geoPath` to draw boundaries from TopoJSON files, with `d3.zoom` and `d3.zoomIdentity` handling the animated transitions. The map targets a bounding box using `pathGenerator.bounds`, scaling and translating the view accordingly.

AI-generated description

react first level drilldown map using zoom