Skip to main content
100%

Fork of react first level drilldown map using zoom

✓ Published0🌍 Public
Bbhargavarathod
Last edited Mar 30, 2022
Created on Mar 30, 2022

This example demonstrates a two-level drilldown choropleth map of India, showing state boundaries upon initial load and transitioning to district-level boundaries when a state is clicked. The visualization uses React for component state management, with D3 geoMercator projection and geoPath for rendering SVG shapes, and applies a zoom-to-bounding-box transition via d3.zoom and zoomIdentity. The map animates through a 500-millisecond transition, scaling and translating the viewport to focus on the selected region’s geometry, with data fetched from TopoJSON files for both state and district outlines.

AI-generated description

react first level drilldown map using zoom

MIT Licensed

Similar vizzes