Skip to main content
SimilarExport ZIP
100%

ICE-8 Map

✓ Published0🌍 Public
KKeith Miller
Last edited Apr 12, 2026
Created on Apr 11, 2026
Forked from Map

This example visualizes average alcohol consumption per U.S. state using a choropleth map, where each state is colored on a red-yellow-green gradient according to its average number of drinks. The map is rendered with D3 v7 and topojson-client, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to draw state boundaries from US Atlas TopoJSON data. Alcohol values from a CSV file are joined to states via `d3.index`, and a sequential color scale (`d3.scaleSequential` with `d3.interpolateRdYlGn`) maps values to colors, with a gradient legend included.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE8-1.2

This example renders a choropleth-style map of U.S. states using a categorical color scale based on state names. It uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to draw state boundaries from TopoJSON data loaded from the us-atlas CDN, with state labels positioned at each polygon’s centroid. The code also applies a sequential color palette via `d3.scaleOrdinal` and `d3.schemeCategory10`, and includes hover tooltips via appended `title` elements. The map is rendered as SVG, with black stroke outlines for each state.

Kkartik900
82% match
Loading thumbnail…

ICE - 8

This example shows a choropleth-style map of the United States, with each state filled in a uniform green color and separated by white borders. It uses the Albers USA projection via `d3.geoAlbersUsa()` and renders the map as an SVG path using `d3.geoPath`. State boundaries are loaded from the TopoJSON `us-atlas` dataset and converted to GeoJSON features with `topojson.feature`. A single `path` element draws the entire collection of states.

Mmendemrudula@gmail.com
81% match
Loading thumbnail…

ICE 8-1.2

This choropleth map displays the crime rate per 100,000 people across U.S. states, using a sequential blue color scale where darker shades indicate higher rates. Hovering over a state reveals a tooltip with the exact value, while states without matching data appear gray. The visualization loads CSV data and U.S. TopoJSON boundaries, then renders them as SVG paths via `d3.geoPath` with an Albers USA projection. It uses D3 v7 for data binding, color encoding, and interactive tooltips, with state names normalized and matched against FIPS codes for labeling.

Ssakethpapareddy@gmail.com
81% match
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
81% match
Loading thumbnail…

ICE 8-2

A choropleth map of the United States displays population density in people per square kilometer, using a yellow-to-red sequential color scale for each state. The map uses an Albers USA projection with `d3.geoPath`, loading state boundaries as TopoJSON from the us-atlas package. State names and density values appear as labels for the most densely populated regions, and a gradient legend at the bottom right maps color to density values. Tooltips on each state show its name and population density on hover.

Aanirudhrao345@gmail.com
81% 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
80% match
Loading thumbnail…

ICE8 USA Map

This example renders a choropleth-style map of the United States using the Albers equal-area conic projection via `d3.geoAlbers` and `d3.geoPath`. It displays landmasses filled in black, state interiors outlined in red, and a cyan sphere background, relying on the `d3-geo` and `topojson` libraries to load and process US Atlas data from a CDN. The visualization is built with React, using SVG for rendering, and includes a graticule layer (blue) that is defined but not rendered in the final output.

TTharun2022
80% match