Skip to main content
SimilarExport ZIP
100%

ICE 8 : Country map -India

✓ Published3🌍 Public
SShreeti Upreti
Last edited Jul 7, 2022
Created on Jul 7, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

ICE 8: Country Map

This map of India colors each state with a distinct color from a categorical scale, providing a clear visual overview of the country's administrative divisions. Built with React and D3 v5, it loads TopoJSON data and renders the geography using the Mercator projection and `d3.geoPath`. The `d3.zoom` module is imported for potential interaction, while hover effects change state colors to red.

KK V VINITHA
92% match
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…

Country map of India - ICE8

This example displays an interactive choropleth map of India, showing district-level subdivisions with distinct colors and state boundaries. Users can zoom and pan the visualization. The map renders district and state features from TopoJSON files using the `d3.geoMercator` projection and `d3.geoPath` generator. Hovering over a district reveals a tooltip with its name and state, while the `d3.zoom` behavior enables view manipulation. The project uses the D3 library, TopoJSON for geographic data, and React as the rendering framework.

SShridhar Kshirsagar
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
91% match
Loading thumbnail…

ICE 8 : Country map -India

This visualization displays a choropleth map of India, using two TopoJSON datasets for district and state boundaries. The map is rendered with SVG paths using the `d3.geoPath` and `d3.geoMercator` projection, with districts colored by a categorical scale via `scaleOrdinal` and `schemeCategory10`. Hovering over a district turns it dark green. The state boundaries are overlaid as a separate layer with black strokes, and the map includes zoom functionality.

Rrallabandisushen@gmail.com
90% match
Loading thumbnail…

ICE 8 - Country Map

This visualization displays a choropleth map of India, with each state filled using a categorical color scheme. It uses `d3.geoMercator` projection and `d3.geoPath` to render the geographic boundaries, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The map loads TopoJSON data from a GitHub gist via `topojson.feature` and renders as SVG. Hovering over a state turns it orange via CSS, while a title attribute reveals the state’s interpolated color value.

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