assignment

100%

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

Forked from react first level drilldown map using zoom

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.

AI-generated description

react first level drilldown map using zoom

MIT Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

Fork of react first level drilldown map using zoom

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.

AAamir Hameed mir

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

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

86% match

Loading thumbnail…

India Map

This example displays an interactive choropleth map of India, with districts and states rendered as colored SVG paths that respond to zooming and hovering. It uses D3’s `geoMercator` projection, `geoPath` for drawing geographic features, and `topojson.feature` to extract polygon data from TopoJSON files. The map also applies `d3.scaleOrdinal` with `schemeCategory10` to color districts, and `d3.zoom` enables pan and zoom. State and district names appear in tooltips via appended text elements.

UUmarani Vemula

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

85% match

Loading thumbnail…

Assignment2_Task6_India_districts_States

This example presents an interactive choropleth of India’s districts and states, colored by state and overlaid with major city markers. A Mercator projection is used with `d3.geoPath` to render TopoJSON boundaries for districts and states, while a color scale assigns hues per state. Users can zoom and pan the map via `d3.zoom`, and hovering over a district shows its name and state in a tooltip. District paths are semi-transparent, with state outlines emphasized in white.

Ssreekarthanda@gmail.com

85% match