Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8 - 1Q Sharanya

✓ Published0🌍 Public
BBHUMIKA CHUNDU
Last edited Nov 3, 2025
Created on Nov 2, 2025

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.

AI-generated description

Map (ICE-8 Q1) — Explanation

What the code does

  • Loads TopoJSON for world countries (110m) and converts to GeoJSON via topojson.feature.
  • Uses country-names.tsv to map numeric IDs to country names, then joins with my CSV (name,value).
  • Projects with Natural Earth (d3.geoNaturalEarth1) and draws a graticule for context.
  • Colors countries using a quantized color scale with a legend.
  • Adds tooltips on hover (country + formatted value).

Data

  • country_data_sample.csv contains a metric per country (example: population in millions).
  • To replace the metric, edit the CSV and keep the name,value columns.

How it meets the rubric

  • Runs on VizHub without errors and uses TopoJSON (10 pts).
  • Commented code + explanation (10 pts).
  • World map rendered (10 pts).
  • Linked custom data via CSV (15 pts).

Sources (from course tutorial)

  • World Atlas TopoJSON + d3 links as provided in the tutorial PDF.
MIT Licensed

Similar vizzes

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

This fork of ICE 8 shows a choropleth map of the 50 U.S. states, with each state filled in green and its borders drawn in white. The map uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features, sourced from the `us-atlas` TopoJSON dataset, converted via `topojson.feature` and `topojson.mesh`. Hovering over a state turns it orange, implemented with a CSS `:hover` rule in the React and D3 v5 codebase.

66264kusuma@gmail.com
85% match
Loading thumbnail…

Fork of ICE8-1.2

This example displays a choropleth map of the United States, where each state is filled with a categorical color from `d3.scaleOrdinal` and `schemeCategory10`. It renders state boundaries using TopoJSON data from the us-atlas repository, projected with `geoAlbersUsa`, and draws paths via `d3.geoPath`. State names are positioned at each polygon’s centroid, calculated by `pathGenerator.centroid`, and appear as SVG text elements. The visualization uses D3 v5 and React, with tooltips added via appended `title` elements.

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