FZ_ICE8_Q1_USMap

100%

FZ_ICE8_Q1_USMap

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This choropleth map of the United States colors each state by a fictional “CS & Tech Engagement Score” (0–100), representing student participation in coding clubs, hackathons, and STEM events. Hovering over a state highlights it and displays a tooltip with the score. Built with D3 v7, the visualization uses `d3.geoAlbersUsa` for projection, `d3.geoPath` for rendering state boundaries from TopoJSON data, and SVG polygons for interactive state shapes. The sample dataset is defined inline as a JavaScript Map, and the tooltip follows the mouse using fixed positioning.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 USA Map

This example displays a choropleth-style map of the United States, with each state filled in green and outlined in a semi-transparent orange. It shows the geographic boundaries of all 50 states, highlighting them in red on hover. The visualization uses the D3 v5 library with `d3.geoPath` and `geoAlbersUsa` projection, rendering the map as SVG paths from TopoJSON data loaded from the us-atlas repository. The `states-10m.json` file provides the geographic features, and the `geo-albers-usa-territories` plugin enables territory inclusion.

AAmanullah007

82% match

Loading thumbnail…

FZ_ICE8_Q1_WorldMap

This choropleth map visualizes a sample “Digital Access Score” by country, using a blue color scale to represent the mock 0–100 indicator values. Built with D3 v7, the visualization uses a Natural Earth projection and `d3.geoPath` to render countries from TopoJSON data. It displays a graticule grid on a soft blue ocean sphere, with an interactive hover tooltip that reveals each nation’s score and name. The example demonstrates linking geographic boundaries with attribute values, with a legend and header clarifying the illustrative nature of the data.

Sshaikfayazfz64@gmail.com

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

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

81% match

Loading thumbnail…

ICE8 USA Map

This example shows a choropleth-style map of the United States, with each state rendered as a red path that turns blue on hover and includes a tooltip with the state name. The map is drawn using D3’s `geoAlbersUsa` projection and `geoPath` generator, fed by TopoJSON state boundaries from the `us-atlas` dataset. The code uses `d3.json` to load the data, `topojson.feature` to extract geometries, and appends SVG paths with CSS-based hover styling.

SSyed Araib Karim

81% match

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

81% match

Loading thumbnail…

Country Map- ICE 8

This example displays a choropleth-style map of the United States, coloring each state with a uniform dark teal fill and a light stroke. Hovering over a state changes its fill to a pale cream, providing a simple interactive highlight. The visualization uses D3 v5’s `geoPath` and `geoAlbersUsa` projection, combined with TopoJSON’s `feature` method to parse state boundaries from a remote JSON file. The SVG rendering is styled via a linked CSS stylesheet, with hover effects applied through the `.states:hover` class.

YYbg99

81% match

Loading thumbnail…

Fork of Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This choropleth map displays the average 2024 temperature by U.S. state, with cooler states in blue and hotter states in red, according to an illustrative data set embedded in the code. It renders state boundaries as SVG paths using `d3.geoPath` and a `d3.geoAlbersUsa` projection, loading geographic data from the `us-atlas` TopoJSON via `topojson-client`. A hover tooltip and a sequential color scale (`d3.scaleSequential`) complete the interaction and visual encoding.

Mmadalahyndavi123@gmail.com

81% match