first level drilldown

100%

first level drilldown

✓ Published0🌍 Public

Last edited Jan 22, 2021

Created on Feb 29, 2020

This example demonstrates a hierarchical drilldown of geographic data using the D3.js library, showing districts, projects, and beats in the Palghar region of India. Clicking on a district zooms into the selected area by fetching a new GeoJSON file and redrawing the map with the corresponding sub-regions. The visualization uses `d3.geoMercator` for map projection, `d3.geoPath` for rendering geometries, and `d3.zoom` to handle pan and zoom interactions. A "back" button resets the view to the full district map.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map drill down

This example demonstrates a drill-down choropleth map of Palghar district blocks, colored by data values from an external CSV. It shows a tooltip on hover and supports pan/zoom interaction. Built with D3 v5, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.zoom` to render and manipulate SVG paths from GeoJSON data, while `d3.csv` and `d3.json` merge the dataset with geographic boundaries.

AAnimesh Nautiyal

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

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

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

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

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

77% match

Loading thumbnail…

Fork of D3 Starter

This example displays an interactive map of India, showing both state boundaries and district-level divisions, with each district colored by its state. Users can zoom and pan the map using d3.zoom, and hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON data from two external sources, and d3.scaleOrdinal with schemeCategory10 for colors. The code also includes an orthographic world map with draggable rotation in a separate module.

Aadapavaishnavi12

76% match

Loading thumbnail…

first level drilldown

A choropleth map of municipal ward 61 visualizes waste generation data, initially displaying aggregated totals for regions like ANAND NAGAR and Tarapore Garden. Clicking a region triggers a smooth zoom animation that drills down to show individual building clusters within that area, colored by their respective waste output. The visualization uses D3.js v5 with `d3.geoPath`, `d3.geoMercator`, and `d3.zoom` to render GeoJSON boundaries and enable the interactive transition. It merges CSV waste metrics with geographic features to drive the color scale and drilldown logic.

AAkshita Shukla

74% match