ICE-8 world map

100%

ICE-8 world map

✓ Published1🌍 Public

Last edited Nov 10, 2025

Created on Nov 9, 2025

This interactive SVG map displays the fifty US states in a muted orange with white borders, using an Albers equal-area projection. It loads TopoJSON state boundaries from the `us-atlas` package, converts them to GeoJSON features with the `topojson.feature` API, and renders them via `d3.geoPath`. Mousing over a state highlights its border and triggers a semi-transparent tooltip showing the state’s name, positioned near the cursor using the `d3.select` and event handling code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8-US-Map

This interactive choropleth displays U.S. states as brown SVG paths, colored green on hover, using a geoAlbersUsa projection and d3.geoPath to render geographic features from a TopoJSON dataset loaded from us-atlas via d3.json. The code builds the map with D3 v5 and topojson’s feature method, and adds a title attribute for each state.

AAli Shah Solanki

90% match

Loading thumbnail…

ICE-8 USA Map

This interactive SVG map of the United States visualizes the boundaries of all 50 states and their shared interior borders. The landmasses are styled with a solid olive fill, while the adjacent-state boundary lines are stroked in cyan. The map uses the geoAlbersUsaTerritories projection via `d3.geoPath` and `d3.geoGraticule`. React drives the front-end, loading topojson data from the unpkg-hosted `us-atlas` package, which is then processed through the `topojson` library's `feature` and `mesh` functions to generate the display.

PPrasanth Damarla

89% match

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

89% match

Loading thumbnail…

ICE-8 America Map

This interactive map displays the fifty United States as an SVG visualization, with each state rendered as a light green path that darkens on hover. The map uses a TopoJSON dataset loaded from a GitHub gist and projects it using d3.geoAlbersUsa with d3.geoPath for geographic path generation. State names appear as tooltips via appended title elements. The visualization relies on D3 v5 for data binding and TopoJSON’s feature conversion to extract state geometries from the encoded topology.

SSheshidharreddy

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

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

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

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

88% match