India Map: ICE-8

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

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

ICE-8 INDIA

This visualization displays a choropleth map of Indian states, with each state filled by a distinct color from D3’s `schemeCategory10` and labeled with its name. It loads GeoJSON TopoJSON data from a GitHub repository, converts it using `topojson.feature`, and renders the paths via `d3.geoPath` with a `geoMercator` projection. State names are positioned at path centroids using `pathGenerator.centroid`, with SVG text elements styled in CSS. The code relies on D3 v5 and the `topojson` client library.

Yyaswanthsen

Fork of India Map: ICE-8

This visualization displays a choropleth map of Indian states, colored with a categorical scheme and labeled with state names at their geographic centroids. Using D3 v5, it loads TopoJSON data for India’s administrative boundaries, removes the first feature, and projects the geometry with `geoMercator`. Paths are generated via `d3.geoPath`, while text labels are positioned using `pathGenerator.centroid`. The SVG rendering includes hover titles and a color scale from `scaleOrdinal(schemeCategory10)`, with styling applied through CSS.

DDINESH SAI BOPPANA

ICE-8 INDIA

This visualization displays an SVG map of India with all states colored using D3’s `scaleOrdinal` and `schemeCategory10`, and labels each state name at its centroid via `d3.geoPath().centroid`. It loads TopoJSON state boundaries from a remote GitHub source, projecting them with `geoMercator`. State paths receive black strokes from CSS, while hover titles show names using appended `title` elements. The code uses `topojson.feature`, `d3.json`, and `d3.selectAll` to render the choropleth-style static map.

HHarshinireddyy19

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

Data visualization ICE-8 Country map

This visualization renders a choropleth map of Indian states, colored by category using a D3 ordinal color scale. It loads TopoJSON data from a remote source and converts it to GeoJSON with the TopoJSON `feature` API. The map is projected using `geoMercator` and drawn as SVG paths via `d3.geoPath`. Each state is labeled with its name placed at the path’s centroid, and state boundaries are highlighted with a yellow stroke and semi-transparent opacity.

Vvamshisoletii

Country map ICE-8

A choropleth map of Indian states renders each region in a distinct categorical color, with state names shown as hover titles. The visualization uses d3.geoMercator for projection and d3.geoPath to generate SVG paths from TopoJSON data. State boundaries are stroked in black for clarity, while d3.scaleOrdinal with schemeCategory10 assigns the fill colors. The code loads the India states TopoJSON from a remote URL and removes the first feature before rendering.

Ppethavenu