Fork of ICE-8 state map

100%

Fork of ICE-8 state map

✓ Published0🌍 Public

Last edited Mar 28, 2023

Created on Mar 28, 2023

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`.

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

93% match

Loading thumbnail…

ICE-8 state map

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.

RRaajithaSabbineni

89% match

Loading thumbnail…

Fork of ICE-8

This example displays a choropleth-style map of Telangana State, India, with district boundaries drawn in black and fill colors that change to grey on hover. It uses React for component structure and D3 v5’s `geoMercator` projection with `geoPath` to render the SVG paths, while TopoJSON’s `feature` and `mesh` functions parse the district boundary data from a remote Telangana JSON file. The map is titled “Telangana State” and appears centered in a fixed 960×500 viewport, demonstrating a basic interactive state-level geographic visualization.

NNaveed945

89% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered in SVG, with each state filled by a categorical color scale. It loads TopoJSON data from a GitHub gist and projects the geometry using `d3.geoMercator` with a custom translation and scale. The visualization leverages `d3.json` for fetching, `topojson.feature` for conversion, and `d3.geoPath` to generate paths. Hovering over a state turns it orange via CSS, while the map is titled "India Map" using a simple text element.

Aamiralitah

88% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered as SVG, with each state filled using a categorical color scale. The map is generated from a TopoJSON file hosted on GitHub, parsed with the TopoJSON `feature` API, and projected using a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The page includes a zoomable viewport (though no zoom interaction is implemented) and highlights states on hover by changing their fill to orange. The code relies on D3 v5, the d3-geo-projection plugin, and React integration, with styling defined in an external CSS file.

Aavinashchinta99

88% match

Loading thumbnail…

Fork of ICE 8 country map

This example renders a choropleth map of India using a Mercator projection, with each state filled by a categorical color scale. The visualization loads GeoJSON data from a TopoJSON file hosted on GitHub, then applies `d3.geoPath` to draw the state boundaries as SVG paths. The code uses `d3.zoom` and `d3.event` for interactivity, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The map includes a static title and uses `d3.geoMercator` with manual translation and scale settings.

DDINESH SAI BOPPANA

88% match

Loading thumbnail…

Fork of ICE 8 country map

This example presents an interactive choropleth map of India, rendered as SVG paths using the Mercator projection. The visualization colors each state based on a categorical scale, with hover effects highlighting regions in orange. Built with D3 v5, the code loads TopoJSON data from a GitHub gist and uses `d3.geoPath` and `d3.geoMercator` for geographic rendering. The implementation leverages `d3.json` for data loading and `d3.schemeCategory10` for color assignment, with CSS controlling the hover interaction.

TTejucmandava

88% match

Loading thumbnail…

Fork of ICE 8 country map

This visualization displays a choropleth-style map of India rendered as SVG paths, with each state filled by a categorical color and hover highlighting in yellow. It uses `d3.geoMercator` and `d3.geoPath` to project and draw features from a TopoJSON file fetched via `d3.json`, with `feature` from the `topojson` library for parsing. The color scale employs `d3.scaleOrdinal` with `schemeCategory10`, while zoom is not applied.

Nnagarjuna1968

87% match