ICE8_Country Map

100%

ICE8_Country Map

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This map visualizes comparative state-level index scores across the United States, using an orange sequential color scale to encode values from a CSV dataset. Hovering over each state reveals its name and score via an interactive tooltip. Built with D3 v7 and TopoJSON, the visualization uses d3.geoPath and d3.geoAlbersUsa to render state boundaries from the us-atlas TopoJSON file, with a gradient legend showing the color-to-value mapping.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 country Map

This example shows an interactive map of the United States, coloring each state green and highlighting it orange on hover. It uses D3 v5's `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from a TopoJSON file loaded via `d3.json` from the us-atlas repository. State names appear as tooltips using SVG `title` elements. The map is styled with CSS for hover effects.

RRaja Srinivas Nelluri

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

88% match

Loading thumbnail…

ICE8-Country map

This map of the United States displays all 50 states, highlighting individual state boundaries and landmasses in orange with black interiors. The visualization uses the `geoAlbersUsaTerritories` projection with `d3.geoPath` to render geographic features. Data comes from the `us-atlas` TopoJSON file, processed by TopoJSON's `feature` and `mesh` functions. The React application manages the asynchronous data loading through a custom `useData` hook, and states respond to hover with a green fill effect.

KKolliTeja

86% match

Loading thumbnail…

ICE8 USA Map

This visualization displays a map of the United States with state boundaries rendered as blue filled polygons with orange strokes, using the geoAlbersUsa projection via d3.geoPath. It loads TopoJSON data from the US Atlas TopoJSON repository, converts it with topojson.feature, and appends SVG path elements for each state. Hovering over a state changes its fill to red, while geographic graticules are included in the styling. The map is built with D3 v5 and rendered as SVG.

Sshiiva-surya

86% match

Loading thumbnail…

ICE8-Country map

This choropleth-style map displays all 50 US states using an orange fill with black state boundaries, highlighting individual states in green when hovered. The visualization loads geographic data from a TopoJSON file via `useData()`, then renders it as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories()` projection. Built with React and D3 v5, the code integrates TopoJSON's `feature()` and `mesh()` functions to generate land polygons and interior borders.

KKolliTeja

86% match

Loading thumbnail…

ICE8 USA Map

A choropleth-style map of the United States renders each state as an SVG path, colored with a categorical scale and labeled with its name at the centroid. Hovering turns a state red via CSS. The code loads TopoJSON state boundaries from the us-atlas package and uses `d3.geoAlbersUsa` for projection, `d3.geoPath` to generate paths, and `d3.scaleOrdinal` with `schemeCategory10` for fill colors.

Ggeethikal

86% match

Loading thumbnail…

ICE8 USA Map

This visualization displays a choropleth map of the United States, with state boundaries drawn as SVG paths. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render geographic features from TopoJSON data loaded from the us-atlas repository. Each state shape is colored with a default fill, and hovering changes the fill color via CSS. State names appear as tooltips using SVG `title` elements, sourced from the TopoJSON feature properties.

BBVNPK001

85% match

Loading thumbnail…

ICE8: Country Map USA

This choropleth displays the contiguous United States with each state filled in a distinct color from the D3 categorical schemeDark2 palette. The map uses the geoAlbersUsa projection and renders SVG paths via d3.geoPath, while the state boundaries come from a TopoJSON file loaded from the jsdelivr CDN. Hovering temporarily changes a state’s fill to a dark maroon, revealing its name as a tooltip. The visualization relies on d3.scaleOrdinal to assign colors and the topojson.feature method to convert TopoJSON into GeoJSON for drawing.

SSharmaAshwini

85% match