Skip to main content
SimilarExport ZIP
100%

ICE-8 Gujarat State Map (India) Dhanusree Kodali

✓ Published1🌍 Public
DDhanusree Kodali
Last edited Sep 27, 2022
Created on Jul 10, 2022

This D3.js and React visualization presents an interactive SVG map of the Indian state of Gujarat, styled as a choropleth with sky-blue districts outlined in black. A Mercator projection via `d3.geoMercator` and `d3.geoPath` renders the geographic boundaries, while hover effects—triggered through CSS `.feature:hover`—highlight districts in pale violet. The map originates from a TopoJSON file fetched over HTTPS, processed with the `topojson` library’s `feature` and `mesh` functions to isolate state and district borders. The visualization’s design emphasizes clarity through bold colors and a light background.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 GUJARAT MAP

This map of Gujarat uses a Mercator projection to display the state’s landmasses and internal district boundaries. The React application loads TopoJSON data via a custom `useData` hook and converts it to GeoJSON using `feature` and `mesh` from the topojson library. The `Marks` component renders SVG paths with `d3.geoPath` and `geoMercator`, applying a green fill, black strokes, and a yellow hover highlight. The map is fitted to a 940x380 pixel area and styled with a pink background.

Ggaddamthanmayeereddy759@gmail.com
89% match
Loading thumbnail…

ICE-8 INDIA

This visualization displays a zoomable map of India with its states and districts, using a Mercator projection centered on the country. The map renders district boundaries as colored paths with hover tooltips revealing district and state names, while state outlines appear as distinct boundaries. Built with React and D3, the code uses `geoMercator`, `geoPath`, and `scaleOrdinal` to handle projection and coloring, with TopoJSON data from the datameet and deldersveld repositories. The SVG also includes zoom functionality through D3’s zoom behavior.

MManohar Kowthavarapu
84% match
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
84% 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
84% 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
83% match
Loading thumbnail…

ICE8 Country Map

This visualization renders a choropleth map of Indian states using D3.js with a Mercator projection. It loads GeoJSON data containing administrative boundaries and assigns each state a distinct color from D3’s schemeCategory10 palette. The code employs `d3.geoPath` with the projection to generate SVG paths, appending tooltip titles that display state names. The map uses topojson’s `feature` method to extract geometry, and the styling includes a light green background with white state borders, rendered via SVG elements.

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

ICE8 11554625

This visualization displays a map of Indian states, rendered as an SVG using a Mercator projection centered on Europe. The code employs React for the page structure while D3.js v5 handles the geographic rendering. It loads TopoJSON data from a GitHub repository, converts it to GeoJSON via the topojson library, and draws each state boundary as a white-filled path with grey strokes. The `d3.geoPath` generator applies the projection to transform geographic coordinates into screen positions.

MManohar Kowthavarapu
83% match