ICE-8 state map

100%

ICE-8 state map

✓ Published4🌍 Public

Last edited Jul 10, 2022

Created on Jul 10, 2022

Forked from Geo Albers with Territories Demo

This example displays a choropleth map of the Indian state Andhra Pradesh, rendering its districts as green-filled polygons with white boundaries. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath`, with district interiors derived from TopoJSON mesh data. On hover, a district highlights in red. The visualization is built with React, using `useData` to fetch TopoJSON and `Marks` to draw SVG paths, styled with CSS hover effects.

AI-generated description

A demo of the geo-albers-usa-territories projection showing US State boundaries from US Atlas TopoJSON.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 state map

This example displays a choropleth map of the Andhra Pradesh state boundaries, rendered as green SVG paths with white strokes that turn red on hover. It uses the `geoMercator` projection and `geoPath` from d3.v5 to draw the TopoJSON features fetched from a GitHub-hosted Indian district boundary dataset. The React component loads the data with `useEffect` and `d3.json`, processing it through `topojson.feature` and `topojson.mesh`.

BBala Sai Krishna

89% match

Loading thumbnail…

Fork of ICE-8 state map

This visualization displays the state boundaries of Andhra Pradesh, India, using a Mercator projection rendered as SVG paths. The map is built with React and D3 v5, where topojson features are converted to GeoJSON for rendering via `d3.geoPath`. District interiors are highlighted in violet, and individual states change to red on hover. The data originates from a GitHub-hosted TopoJSON file of Indian district boundaries, loaded asynchronously through `d3.json`.

Kkollirohit2000

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

86% match

Loading thumbnail…

ICE8 - India map

This visualization displays a choropleth map of India, with each district and state boundary rendered as SVG paths. District polygons are filled with colors from `d3.scaleOrdinal` and `schemeCategory10`, while state outlines appear in green with hover effects turning districts black. The map uses `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data for districts and states. Users can pan and zoom via `d3.zoom`, with tooltips showing district and state names on hover.

Aavnreddy95

86% match

Loading thumbnail…

ICE 8 country map

This example displays a choropleth map of India, coloring each state with a categorical color scale. The map uses the Mercator projection to render geographic boundaries from a TopoJSON file. The visualization is built with React, D3 v5, and the `topojson` library, which parse the data and generate SVG paths. The `d3.geoPath` and `d3.geoMercator` functions handle projection and rendering, while a CSS hover effect highlights individual states in yellow.

Nnagarjuna1968

86% match

Loading thumbnail…

ICE - 8 - Map

This example presents a choropleth map of India's administrative regions, coloring each state according to its name using a categorical color scale. It renders the map with D3's `geoPath` and a Mercator projection, drawing state boundaries as SVG paths with white strokes. Data is loaded from a GeoJSON file hosted on GitHub, processed with `topojson`'s `feature` function, and each state is labeled at its centroid. The visualization uses D3 v5 within a React framework, with styling applied via CSS classes.

Ggunasindhuja

85% match

Loading thumbnail…

ICE 8 India Map

This example displays a choropleth map of Indian states rendered as SVG paths, with each state filled using a categorical color scale and labeled with its name at the centroid. It uses D3 v5’s `geoMercator` projection and `geoPath` to draw the boundaries, while `topojson.feature` extracts the geometry from a remote India states dataset. State polygons are hover-highlighted via CSS, and the color scheme is generated with `d3.scaleOrdinal` and `schemeCategory10`.

Ddivyakota99

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

85% match