CountryMap

100%

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 29, 2023

This interactive map of India uses a Mercator projection to display state and district boundaries, with clickable regions that zoom and pan to focus on a selected area while triggering a callback. Built with React and D3 v6, it leverages `geoMercator`, `geoPath`, and `d3.zoom` to handle scaling and transitions. The geographic data is fetched from a TopoJSON file via `topojson.feature`, and the SVG polygons are rendered with smooth 500ms zoom animations.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Country Map

This interactive India map lets users zoom and pan across state and district boundaries. Clicking a region automatically animates the map to focus on that area, with a smooth zoom transition. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to render the TopoJSON data, while `d3.zoom` and `d3.zoomIdentity` handle the zooming and click-to-focus behavior. The SVG rendering updates dynamically as users navigate from the country level down to individual districts.

NNHRK555

94% match

Loading thumbnail…

Country Map - India

This interactive map of India lets users explore state and district boundaries by clicking on regions, which triggers a smooth zoom animation to focus on the clicked area. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to render SVG polygons from TopoJSON data, while `d3.zoom` handles panning and scaling. Clicking a state filters the display to its districts, and the zoom transition is computed from the path’s bounding box.

Ssuchitra2602

94% match

Loading thumbnail…

Country Map - India

The map displays the states of India, and clicking a state zooms into that region to reveal its districts. Built with React and D3 v6, it uses `geoMercator` and `geoPath` to project and render GeoJSON features as SVG paths. A custom zoom transform, driven by `d3.zoom` and `transition().duration()`, animates the view, while TopoJSON source data is fetched via `d3.json` and processed with `topojson.feature`. The visualization demonstrates interactive state-to-district drill-down navigation.

SSravan1888

93% match

Loading thumbnail…

Country Map - India

This interactive map of India displays country boundaries as red SVG paths, with clickable regions that zoom into state levels and then to district subdivisions. The visualization uses d3.geoMercator and d3.geoPath to project TopoJSON data, while d3.zoom enables smooth transitions between administrative levels. Built with React and D3 v6, it dynamically fetches state and district boundaries from a remote TopoJSON source, allowing users to drill down through geographic hierarchies with animated camera movements.

AArruSkywalker

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

89% match

Loading thumbnail…

India Map

This interactive map of India displays state and district boundaries overlaid on a Mercator-projected SVG. Users can pan and zoom the map using d3.zoom, with districts colored via d3.scaleOrdinal and schemeCategory10. Hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoPath, d3-geo-projection, and topojson to render geographic data from two JSON sources containing state and district boundaries, with text labels placed at path centroids.

Nnikhilagopi

88% match

Loading thumbnail…

India Map

This interactive visualization displays the states and districts of India on a zoomable SVG map. The code uses `d3.geoMercator` for projection and `d3.geoPath` to render geographic features, with district polygons filled via `scaleOrdinal` and `schemeCategory10`. It loads GeoJSON data from topojson files and applies a zoom behavior to pan and scale the map. Hovering over a district changes its fill color, while tooltips show the district and state names.

MMalempatiSaranya

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

87% match