Fork of react first level drilldown map using zoom

100%

Fork of react first level drilldown map using zoom

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

Forked from 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.

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 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

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

90% 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

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

84% 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

83% 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

83% 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

82% match

Loading thumbnail…

Fork of Fork of india map

This visualization displays India’s states and districts as vector paths overlaid on a Mercator projection. The map distinguishes administrative levels with red state boundaries and brown district borders, while district fills use an ordinal color scale. It loads two TopoJSON datasets (state and district boundaries) and renders them as SVG paths using `d3.geoPath` and `d3.geoMercator`. The implementation also applies `d3.zoom` for interactive pan and zoom, with hover effects that highlight districts. The map is built with React and uses the `topojson` library to process the geographic features.

DDivyaVellanki

81% match