Skip to main content
SimilarExport ZIP
100%

ice 8 india map

✓ Published0🌍 Public
Aayodhyanandh
Last edited Apr 13, 2023
Created on Apr 13, 2023

This interactive map of India shows a drill-down from state boundaries to district-level detail. Clicking a state triggers an animated zoom, implemented with a custom pan-and-zoom transform via `d3.zoom` and `svg.transition().duration()`. The map is rendered as SVG paths using `d3.geoMercator` and `d3.geoPath`, with geographic data loaded as TopoJSON from a GitHub gist and converted to GeoJSON features via `topojson.feature`. The React front end manages state and click handlers through `useState` and `useEffect`.

AI-generated description

react first level drilldown map using zoom

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 8: Country Map

This interactive map of India displays state and district boundaries, letting users click a region to zoom in and drill down to its subdivisions. Built with React and D3 v6, it uses the `geoMercator` projection and `geoPath` for rendering GeoJSON features as SVG paths. Clicking triggers a `zoomToBoundingBox` function that calculates path bounds via `pathGenerator.bounds` and animates a zoom transition with `d3.zoom`. State boundaries come from a TopoJSON file converted through the `topojson` feature API.

RRajeevMukhesh
91% match
Loading thumbnail…

ICE 8 India Country Map

Using React and D3 v6, this interactive map of India displays state and district boundaries as SVG paths. A click on any region zooms and pans the map to that area, using `d3.zoom` with a smooth transition. The `geoMercator` projection and `geoPath` render the TopoJSON features, with boundary data loaded from two remote GeoJSON files. The map dynamically filters to show either all states or the districts of the selected state, with fill colors set via CSS.

SSrujana390
91% match
Loading thumbnail…

India_Map_ICE-8

This interactive map of India allows users to click on states to zoom in and display their districts. It uses React for the interface and the D3 library’s `geoMercator` and `geoPath` to render the geographic boundaries as SVG polygons. The map is built from TopoJSON data for both state and district boundaries, and a custom D3 zoom transform animates the transition between the national and state-level views, updating the stroke width during the zoom.

RRamch16
91% match
Loading thumbnail…

ICE 8 Indian map

This interactive map of India renders both state and district boundaries using a spherical Mercator projection, centered on the country with color-coded districts from a categorical palette. Hovering over a district turns it yellow and reveals its name and state via a tooltip. Built with React and D3, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.scaleOrdinal` to generate SVG paths from TopoJSON sources, while `d3.zoom` enables pan and zoom interactions.

Aajayrao0
90% match
Loading thumbnail…

ICE-8 INDIA

This visualization displays a zoomable map of India with its states and districts, using a Mercator projection centered on the country. The map renders district boundaries as colored paths with hover tooltips revealing district and state names, while state outlines appear as distinct boundaries. Built with React and D3, the code uses `geoMercator`, `geoPath`, and `scaleOrdinal` to handle projection and coloring, with TopoJSON data from the datameet and deldersveld repositories. The SVG also includes zoom functionality through D3’s zoom behavior.

MManohar Kowthavarapu
89% match
Loading thumbnail…

India map ICE-8

This visualization displays a map of India with district boundaries colored by state and state outlines highlighted. It uses d3.geoPath and geoMercator projection to render GeoJSON TopoJSON data from GitHub sources for both state and district features. The map supports zooming via d3.zoom, and district hover effects change fill color to black. State capitals are not plotted but district tooltips reveal district and state names using SVG title elements.

Aajaysonu
88% match
Loading thumbnail…

India map ICE-8

This visualization displays a map of India with district boundaries colored by state and state outlines highlighted. It uses d3.geoPath and geoMercator projection to render GeoJSON TopoJSON data from GitHub sources for both state and district features. The map supports zooming via d3.zoom, and district hover effects change fill color to black. State capitals are not plotted but district tooltips reveal district and state names using SVG title elements.

Aajaysonu
88% match
Loading thumbnail…

ICE 8 : Country map -India

The map displays India’s states and districts, colored by state via a categorical scale, with zoom and pan support. It loads TopoJSON data for both administrative levels and renders them as SVG paths using `d3.geoPath` and `geoMercator`. Hovering over a district reveals a tooltip with its name and state. The code uses D3 v5, `topojson.feature`, and `d3.zoom` to enable interaction.

SShreeti Upreti
88% match