ICE-8_Q1.2_India_CostIndex_Map

100%

ICE-8_Q1.2_India_CostIndex_Map

✓ Published1🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

Forked from Fork of ICE-8 — USA States Map (Cost Index)

This choropleth map visualizes living cost index values across Indian states, with darker blue-green hues representing higher costs and gray indicating missing data. The visualization joins a hardcoded cost dataset to GeoJSON features using the ST_NM property, then applies a d3.geoMercator projection fitted to the SVG canvas. Interactive tooltips display state names and index values on hover via d3.event handlers, while a sequential color scale (d3.scaleSequential with d3.interpolateYlGnBu) and attached legend provide the visual encoding. The GeoJSON source is a remote GitHub repository for India state boundaries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 — USA States Map (Cost Index)

A choropleth map of India displays state-level living cost indices, using a linked dataset and geographic features joined by the `ST_NM` property name key. The visualization encodes values through a `d3.scaleSequential` with the `d3.interpolateYlGnBu` color interpolator, while gray shades indicate missing data. Built with D3 v7, it renders as SVG using `d3.geoMercator` projection fitted to the viewport and `d3.geoPath` for drawing state boundaries. Interactive tooltips appear on mouseover, showing each state's index value.

Jjanisha30gowda@gmail.com

92% match

Loading thumbnail…

Fork of ICE-8_Q1.2_India_CostIndex_Map

This choropleth map shows Indian states colored by their living cost index, with gray indicating missing data. Built with D3 v7, it loads GeoJSON boundaries via `d3.json` and renders paths with `d3.geoPath` using a Mercator projection fitted to the SVG. State names from the GeoJSON join with a hardcoded cost-index map, and a sequential YlGnBu color scale encodes values. Hovering displays a tooltip with the state name and index.

Jjanisha30gowda@gmail.com

90% match

Loading thumbnail…

Fork of ICE-8 — USA States Map (Cost Index)

This fork of ICE-8 displays a simplified map of India with states colored by living cost index using a sequential YlGnBu scale. D3 v7’s `d3.geoMercator` projection and `d3.geoPath` render the embedded GeoJSON polygons. Hovering shows a tooltip with the state name and index value, while unlinked areas appear gray. The linked `COST` dataset is joined via the `ST_NM` property.

Jjanisha30gowda@gmail.com

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

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

80% match

Loading thumbnail…

India Map: ICE-8

This visualization displays a choropleth map of India's states, with each state filled by a distinct categorical color and labeled with its name at its centroid. The map is rendered as an SVG using the D3.js library, employing a geoMercator projection with specific translation and scaling to position the country. State boundaries are extracted from a TopoJSON file fetched via d3.json, and the d3.geoPath function generates the SVG paths. State labels are placed using the pathGenerator.centroid method, while d3.scaleOrdinal and d3.schemeCategory10 assign the color palette.

PPYATA SHARAN

80% match

Loading thumbnail…

ICE 8 - Country Map

This visualization displays a choropleth map of India, with each state filled using a categorical color scheme. It uses `d3.geoMercator` projection and `d3.geoPath` to render the geographic boundaries, with `d3.scaleOrdinal` and `d3.schemeCategory10` for coloring. The map loads TopoJSON data from a GitHub gist via `topojson.feature` and renders as SVG. Hovering over a state turns it orange via CSS, while a title attribute reveals the state’s interpolated color value.

SSheela2930

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

79% match