Skip to main content
SimilarExport ZIP
100%

Fork of India Map: ICE8

✓ Published1🌍 Public
Aarcothanmukha
Last edited Apr 5, 2022
Created on Apr 5, 2022
Forked from India Map: ICE-8

This interactive map of India displays district-level boundaries filled with color and state-level outlines in steel blue. Users can zoom and pan the map through a custom zoom interaction. Built with the D3.js library, it employs `geoMercator` for projection and `geoPath` for rendering shapes. The visualization overlays two TopoJSON datasets, one for states and one for districts, fetched from GitHub, and uses `scaleOrdinal` colors to differentiate districts.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map of India displays state and district boundaries, with district-level administrative divisions colored distinctly and labeled via tooltips on hover. Built with D3.js and TopoJSON, it uses `d3.geoMercator` for the projection and `d3.geoPath` to render geographic features. The visualization supports zooming and panning through `d3.zoom`, while district data is sourced from a 2019 TopoJSON file and state boundaries from a separate India-states TopoJSON. The map conveys the hierarchical relationship between states and their constituent districts.

Ssnehareddygurram
94% match
Loading thumbnail…

Fork of Fork of ICE-8 INDIA

This visualization shows an interactive map of India with its districts and state boundaries, using a Mercator projection centered on the country. Users can pan and zoom the map, with district paths colored via a categorical color scale and hover tooltips displaying the district name and major city. The code loads GeoJSON data from unpkg and a GitHub gist, then renders paths using `d3.geoPath` with `topojson.feature`. Zoom interactions are handled by `d3.zoom`, and the map includes both district and state layers with distinct stroke styling.

Ssnehareddygurram
93% match
Loading thumbnail…

Fork of ICE-8(11630234)

This interactive map of India displays state and district boundaries, visualized with SVG paths and colored by state using `d3.scaleOrdinal` and `schemeCategory10`. It supports zooming and panning through `d3.zoom`, and uses `d3.geoMercator` with a centered projection on India. The map loads TopoJSON data from external GitHub sources, including India states and districts, and renders tooltips with district and state names. Hovering over districts changes their fill to black via a CSS transition.

GGalineeharika
93% match
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map displays India’s states and districts, with district boundaries colored by state and hover tooltips revealing district names. Users can pan and zoom via `d3.zoom`. The visualization uses `d3.geoPath` to render TopoJSON data from two sources: india-states.json and india-districts-2019-734.json. District fills are assigned using `d3.scaleOrdinal` with `schemeCategory10`, while the Mercator projection is centered on India.

SsreepavanKothapalli
93% match
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map displays the states and districts of India, rendered with SVG paths using `d3.geoPath` and a `d3.geoMercator` projection. Users can zoom and pan via `d3.zoom`, and hovering over a district reveals its name and state through a `title` element. The visualization loads TopoJSON data for both state and district boundaries, coloring districts with `d3.scaleOrdinal` and `d3.schemeCategory10`. A supplementary globe view, built with `d3.geoOrthographic`, supports click-to-switch projections and drag-to-rotate, using data from the world-atlas package.

Aabh9294
92% match
Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, with each state filled by a color from the d3 schemeCategory10 scale and labeled with its name. It uses d3.geoMercator and d3.geoPath to project and render the TopoJSON data loaded from a GitHub repository, adding interactivity through SVG title elements. The map includes an adjustment that shifts the data array and custom projection settings to frame the country appropriately.

Aamiralitah
92% match
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map of India visualizes the country's administrative districts and states, colored by state using a categorical scale. Users can zoom and pan the map, and hovering over a district reveals its name and state via a tooltip. The visualization is built with D3.js, using `d3.geoPath` to render geographic features and `d3.zoom` for interaction. Data comes from TopoJSON files for Indian states and districts, with district boundaries from a 2019 dataset.

Ssnehareddygurram
91% match
Loading thumbnail…

Fork of ICE-8 INDIA

This interactive map of India visualizes the country's administrative districts and states, colored by state using a categorical scale. Users can zoom and pan the map, and hovering over a district reveals its name and state via a tooltip. The visualization is built with D3.js, using `d3.geoPath` to render geographic features and `d3.zoom` for interaction. Data comes from TopoJSON files for Indian states and districts, with district boundaries from a 2019 dataset.

Ssnehareddygurram
91% match