Skip to main content
SimilarExport ZIP
100%

Fork of react first level drilldown map using zoom

✓ Published0🌍 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

MIT Licensed

Similar vizzes

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
96% 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
95% match
Loading thumbnail…

react first level drilldown map using zoom

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.

MManohar Kowthavarapu
91% match
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
91% 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
86% match
Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

DDivyaVellanki
85% match
Loading thumbnail…

Fork of major cities of india

This interactive map of India displays state boundaries that zoom to reveal district-level detail when clicked. Built with React and D3 v6, it uses a Mercator projection with `d3.geoPath` to render TopoJSON boundaries from a Gist source. Clicking a state triggers a smooth zoom animation via `d3.transition`, focusing on the selected region while loading its constituent districts. The map supports panning and zooming up to 8x through `d3.zoom`, with SVG rendering for all geographic features.

Ssnehareddygurram
85% match
Loading thumbnail…

Fork of Fork of india map

This visualization displays a map of India with its states and districts, colored by state using a categorical color scale. It shows district-level boundaries with hover effects that turn districts black, and state boundaries with orange strokes. The map supports zooming and panning via d3.zoom. Built with React, it uses d3.json to load TopoJSON data from GitHub sources, d3.geoMercator for projection, and d3.geoPath to render the SVG paths.

Ssaiteja0725
85% match