Fork of ICE-8_hd

100%

Fork of ICE-8_hd

✓ Published0🌍 Public

HHarshithaDontha@my.unt.edu

Last edited Nov 9, 2025

Created on Nov 9, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 - Country Map

This choropleth map of the United States displays state boundaries as green paths with dark gray strokes on a blue SVG canvas, emulating an ocean backdrop. The visualization uses `d3.json` to load state geometries from the us-atlas states-10m dataset, then projects them with `d3.geoAlbersUsa()` and renders paths via `d3.geoPath()`. Built with D3 v4 and topojson-client, it also uses the React framework for layout.

VVReddy913

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

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 choropleth-style map displays the United States with state boundaries and a shaded landmass, rendered as SVG paths within a React component. The visualization uses `d3.geoAlbers` and `d3.geoPath` to project and draw geographic features from TopoJSON data loaded via `d3.json` from the us-atlas repository. State borders are derived using `topojson.mesh`, while the land and sphere shapes are filled in contrasting colors. The map is displayed at 1000 by 600 pixels, with loading state handled through React hooks.

Bbhargavarathod

86% match

Loading thumbnail…

Fork of ICE8

This world choropleth displays a static color-coded map of countries, with data provided inline in the code rather than through an external CSV file. The visualization uses D3.js version 7 to render the geographic boundaries via `d3.geoPath` and applies sequential color scales to encode values. It relies on the TopoJSON client library to load and convert geographic data for the map’s projection. A hover tooltip is implemented using a fixed overlay that shows details, though no value labels are present on the map itself.

BBHUMIKA CHUNDU

86% match

Loading thumbnail…

Fork of ICE 8 - Country Map

This example renders a choropleth-style map of the United States, showing state boundaries as green polygons on a light blue background. It uses d3.geoPath with a d3.geoAlbersUsa projection to draw the map, and topojson-client’s topojson.feature to extract state geometries from the us-atlas states-10m dataset. The SVG output is positioned with margins and styled entirely via embedded D3 attributes, with no interactive or hover behavior.

GGalineeharika

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

85% match

Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a choropleth-free map of the United States rendered as SVG, using a light gray sphere background with white landmasses and dark interior borders. It loads TopoJSON data from a GitHub gist, converting it to GeoJSON via `feature` and `mesh` from topojson. The visualization employs React for component structure and state management, while D3’s `geoAlbers` projection and `geoPath` generate the geographic paths. The code also defines a graticule but does not render it in the final output.

GGalineeharika

85% match