Fork of Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

100%

Fork of Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Section 1(a)-Making Maps Using TOPOJSON

This choropleth map visualizes average annual temperatures for U.S. states, using a red-to-blue sequential color scale to encode hotter and colder climates. Built with D3.js v7, the visualization renders SVG paths from TopoJSON data loaded via the `topojson-client` library, projecting states with `d3.geoAlbersUsa()` and `d3.geoPath()`. Hovering over a state triggers a tooltip that displays the state name and temperature value, with the map including a color legend. The underlying temperature data is stored in a JavaScript dictionary.

Mmadalahyndavi123@gmail.com

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

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

84% match

Loading thumbnail…

Fork of ICE 8 - 1Q Sharanya

This choropleth displays a numeric metric for each U.S. state, colored with a quantized green scale and accompanied by interactive tooltips showing the state name and value. It renders vector paths with d3.geoPath, uses a geoAlbersUsa projection, and loads TopoJSON from the us-atlas package. Custom CSV data is joined to state names via a FIPS ID mapping, and a gradient legend communicates the color scale.

BBHUMIKA CHUNDU

84% match

Loading thumbnail…

Fork of Fork of FZ_ICE8_Q1_WorldMap_Hyndavi

This interactive world map displays country boundaries on a natural Earth projection, with each country shaded in a sequential blue color scale and identified by name via a tooltip on hover. The visualization loads TopoJSON data from the world-atlas package, converts it to GeoJSON features using topojson-client, and renders the map as SVG paths via `d3.geoPath` with a `d3.geoNaturalEarth1` projection. The D3.js v7 code also implements interactive mouse events to show tooltips with country names.

Mmadalahyndavi123@gmail.com

84% match

Loading thumbnail…

Fork of ICE-8_hd

This visualization pairs a world map with a U.S. choropleth map, drawing on D3.js v7. The world map uses the Aitoff projection via `d3.geoAitoff` and `d3.geoPath` with `topojson-client` to render country shapes. The U.S. map projects states using `d3.geoAlbersUsa` and shades them according to median household income, with a color legend and hover tooltips. A graticule grid overlays the world map. Both maps use SVG paths, and the income datapoints are embedded as CSV text. The title notes the U.S. map is a choropleth, with hover states revealing exact values.

HHarshithaDontha@my.unt.edu

84% match