Skip to main content
SimilarExport ZIP
100%

ICE8 - India map

✓ Published0🌍 Public
Aavnreddy95
Last edited Jul 9, 2022
Created on Jul 9, 2022
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE - 8 : India Map

This visualization displays a choropleth map of India, with each state filled by a distinct color from a categorical scale based on its name. The map renders as an SVG using D3 v5, with geographic paths generated via `d3.geoPath` and a `geoMercator` projection. State boundaries come from a TopoJSON file parsed with `topojson.feature`, and hover interactions change the fill color through CSS.

MMahitha-Moparthi
93% 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
93% match
Loading thumbnail…

ICE-8

This visualization displays a map of Indian states, each filled with a distinct color from a categorical scale and labeled with its name. The SVG rendering uses `d3.geoMercator` for projection and `d3.geoPath` to generate state boundaries from TopoJSON data. State names are positioned at each path’s centroid, and hover effects are applied to county paths via CSS. The color mapping relies on `scaleOrdinal` with `schemeCategory10`, while the geographic data comes from a remote India-states TopoJSON file.

DDineshK2602
92% match
Loading thumbnail…

Map of India - ICE8

This choropleth of India displays each state as a colored SVG path, with state names overlaid as text labels. The visualization uses a TopoJSON dataset of Indian administrative regions, loaded from a GitHub repository and processed via the topojson `feature` API. D3’s `geoMercator` projection and `geoPath` generate the map geometry, while `scaleOrdinal` with `schemeCategory10` assigns distinct fills to each state. Rendering is entirely SVG-based, with hover interactions defined in CSS.

KKolliTeja
92% match
Loading thumbnail…

ICE-8

This visualization renders a choropleth map of India using a spherical Mercator projection, with each state filled by a categorical color scale and labeled with its name. The map is drawn as SVG paths generated via `d3.geoPath` and `geoMercator`, using TopoJSON data from the `IND_adm1` collection. State boundaries are emphasized with thick black strokes, and each state’s centroid, calculated with `pathGenerator.centroid`, positions its text label. The code loads data via D3’s `json` promise and applies `scaleOrdinal` with `schemeCategory10` for coloring.

HHarishma Nallala
92% match