react first level drilldown map using zoom

100%

react first level drilldown map using zoom

✓ Published0🌍 Public

Last edited Apr 14, 2023

Created on Apr 13, 2023

A choropleth map of India supports drill-down navigation by clicking a state to zoom into its district boundaries. Clicking a district returns the view to the national level. The React component uses `d3.geoMercator` and `d3.geoPath` to project TopoJSON features from two remote datasets (state and district boundaries), rendering them as SVG paths with `d3.zoom` and `d3.zoomIdentity` to animate the zoom transition to each clicked feature’s bounding box.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

react first level drilldown map using zoom

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.

AAnimesh Nautiyal

94% match

Loading thumbnail…

Fork of react first level drilldown map using zoom

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.

Bbhargavarathod

91% match

Loading thumbnail…

Fork of react first level drilldown map using zoom

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.

SsreepavanKothapalli

90% match

Loading thumbnail…

assignment

This interactive choropleth-style map displays a first-level drill-down from Indian states to their districts. Clicking a state triggers a smooth zoom animation into that region, revealing its district boundaries from a second TopoJSON dataset. Built with React and D3 v6, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to handle projection, path generation, and zoom-to-bounding-box transitions. SVG elements render all geographic features, with a stroke-width adjustment that responds to zoom scale for crisp outlines.

Ssri7harsha

89% match

Loading thumbnail…

Country Map

This interactive India map lets users zoom and pan across state and district boundaries. Clicking a region automatically animates the map to focus on that area, with a smooth zoom transition. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to render the TopoJSON data, while `d3.zoom` and `d3.zoomIdentity` handle the zooming and click-to-focus behavior. The SVG rendering updates dynamically as users navigate from the country level down to individual districts.

NNHRK555

83% match

Loading thumbnail…

Country Map - India

The map displays the states of India, and clicking a state zooms into that region to reveal its districts. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to project and render GeoJSON features as SVG paths. A custom zoom transform, driven by `d3.zoom` and `transition().duration()`, animates the view, while TopoJSON source data is fetched via `d3.json` and processed with `topojson.feature`. The visualization demonstrates interactive state-to-district drill-down navigation.

SSravan1888

83% match

Loading thumbnail…

India Map

This example displays a choropleth map of India with district-level boundaries colored by state and state outlines highlighted in green. Built with React and D3, it uses `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3.zoom` for pan and zoom interactions. The visualization renders as SVG, combining TopoJSON data from two sources—one for state borders and another for district polygons. Hovering over districts turns them black, with tooltips revealing district and state names.

Hharika-1929

81% match

Loading thumbnail…

ind

This interactive map of India displays state and district boundaries using a Mercator projection, rendered as SVG paths with click-to-zoom transitions. The code loads TopoJSON data from a remote gist, converts it to GeoJSON features via `topojson.feature`, and visualizes it with `d3.geoMercator`, `d3.geoPath`, and the `d3.zoom` tool for animated scaling. Clicking a region triggers a smooth zoom to its bounding box and updates the displayed area, demonstrating dynamic map navigation with React and D3.

SSaahithi49

81% match