Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
LLikhitaMudagereShivaraj@my.unt.edu
Last edited Nov 10, 2025
Created on Nov 10, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 — USA States Map

A choropleth of the United States displays each state’s population from the 2020 census via a yellow-orange-red sequential color scale. The map renders with D3.js v7 and the TopoJSON library, using `d3.geoAlbersUsa` for the Albers projection and `d3.geoPath` for state boundaries. Hovering over a state reveals its population in a tooltip, while gray fills indicate missing FIPS codes from the `us-atlas` dataset.

Ssravya7136@gmail.com
89% match
Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example displays a choropleth map of U.S. states, each filled with a distinct categorical color and labeled with its name at the geographic centroid. The visualization uses d3.geoAlbersUsa for projection and d3.geoPath to render state boundaries from TopoJSON data loaded from us-atlas. A d3.scaleOrdinal with schemeCategory10 supplies the fill colors, and hover interactions turn states red via CSS. State names are appended as SVG text elements positioned by d3.geoPath.centroid.

Ssivamani
86% match
Loading thumbnail…

Fork of ICE8 USA Map

This fork of the ICE8 USA Map displays a choropleth of U.S. states, each filled with a categorical color from the `d3.scaleOrdinal` / `d3.schemeCategory10` palette and labeled with its name. It uses `d3.geoPath` with the `geoAlbersUsa` projection to render state boundaries from the `us-atlas` states-10m TopoJSON file, with `topojson.feature` extracting the state features. State names are placed at polygon centroids, and hovering turns a state red via CSS.

CCHANDU BHARGAVI
86% 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
84% match
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
84% match
Loading thumbnail…

Fork of ICE8 USA Map

This fork of the ICE8 USA Map displays a choropleth of U.S. states, colored in light sea green with hover states highlighting each state in orange-red. It renders an SVG map using D3 v5, the `geoAlbersUsa` projection, and `d3.geoPath` to draw state boundaries from TopoJSON data loaded from the us-atlas repository. State name tooltips appear on hover via appended `title` elements. The code imports `select`, `json`, `geoPath`, and `geoAlbersUsa` from D3, along with `feature` from TopoJSON.

Ffouzanuddin
84% match
Loading thumbnail…

ICE 8

This visualization displays a choropleth map of the United States, with each state filled by a categorical color from the D3 category10 scheme. The map uses the geoAlbersUsa projection and renders state boundaries as SVG paths with white strokes via d3.geoPath. It loads US Atlas TopoJSON data from a CDN, extracts state features using topojson’s feature function, and shows state names as tooltips on hover.

66264kusuma@gmail.com
84% match
Loading thumbnail…

Fork of ICE 8

This fork of ICE 8 shows a choropleth map of the 50 U.S. states, with each state filled in green and its borders drawn in white. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features, sourced from the `us-atlas` TopoJSON dataset, converted via `topojson.feature` and `topojson.mesh`. Hovering over a state turns it orange, implemented with a CSS `:hover` rule in the React and D3 v5 codebase.

66264kusuma@gmail.com
84% match