Skip to main content
SimilarExport ZIP
100%

ICE-8 — USA States Map (Cost Index)

✓ Published3🌍 Public
Jjanisha30gowda@gmail.com
Last edited Nov 10, 2025
Created on Nov 6, 2025
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8_Q1.2_India_CostIndex_Map

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.

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

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

This choropleth map of the United States visualizes a sample cost index by state, using a yellow-green-blue sequential color scale to show values ranging roughly from 84 to 160. The visualization loads US state boundaries as TopoJSON from the us-atlas package and renders them with d3.geoPath and an Albers USA projection. Each state’s color is determined by looking up its FIPS code in a cost-index dataset, and hovering reveals a tooltip with the state name and value using plain DOM events and D3 styling.

LLikhitaMudagereShivaraj@my.unt.edu
84% 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
84% match
Loading thumbnail…

ICE8 Country Map

This example shows a choropleth map of Indian states, with each state filled by a distinct color from a categorical scale. The map uses a Mercator projection and renders SVG paths via d3.geoPath. State boundaries are drawn from TopoJSON data loaded with d3.json, and each path includes a tooltip title showing the state name. The color scale is created with d3.scaleOrdinal and d3.schemeCategory10, while the SVG is selected using d3.select.

EEshwarreddyt
82% match
Loading thumbnail…

ICE-8:India Map with states

This example displays a choropleth map of India with each state filled by a categorical color scale. It uses D3 v5’s `geoMercator` projection and `geoPath` to render SVG paths from TopoJSON state boundaries, sourced from a remote GitHub repository. State names are shown as tooltips via appended `title` elements. The color mapping uses `scaleOrdinal` with `schemeCategory10`, and boundary styling is applied through CSS.

DDeeraj Thakkilapati
82% 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
82% match