Skip to main content
SimilarExport ZIP
100%

Fork of Fork of USA Map 2

✓ Published1🌍 Public
NNita
Last edited Jun 2, 2025
Created on Jun 2, 2025
Forked from Fork of USA Map 2

This interactive choropleth map visualizes US state economic performance metrics across four selectable time periods. Users can toggle between 1-year, 5-year, since-1991, and latest-period data via a dropdown menu. The map uses D3.js v7 with TopoJSON to render geographic boundaries via `d3.geoPath` and a `geoAlbersUsa` projection, while `scaleSequential` and `scaleDiverging` color scales encode metric values. Hover tooltips display state details, and clicking a state opens a side panel with additional information.

AI-generated description

US State Performance Map

This project creates an interactive choropleth map visualization of economic performance metrics for US states using D3.js and TopoJSON.

Data

The visualization uses data from data.csv, which contains:

  • State names
  • Rank (1-49)
  • Latest period performance (%)
  • 1-year performance (%)
  • 5-year performance (%)
  • Performance since 1991 (%)

Features

  • Interactive US map with color-coded state performance
  • Multiple metrics selection (1-year, 5-year, Since 1991)
  • Hover tooltips showing state metrics
  • Detailed side panel for more information
  • Responsive design
  • Color legend

Technologies Used

  • D3.js (v7)
  • TopoJSON
  • HTML/CSS/JavaScript
  • ES6 Modules

How to Use

  1. Clone this repository
  2. Open index.html in a web browser (using a local server due to ES6 module requirements)
  3. Select different metrics using the dropdown
  4. Hover over states to see quick metrics
  5. Click on states for detailed information

Visualization Details

The choropleth map uses color intensity to represent different performance metrics, with darker blues indicating higher values. For metrics with negative values, a diverging color scale is used.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of USA Map 2

This interactive map shows US state home price performance as a choropleth, colored by seasonally adjusted one-year returns, alongside city markers sized by population. Hovering reveals detailed tooltips for both states and cities. It uses D3.js v7 with `d3.geoAlbersUsa` and `d3.geoPath` to render TopoJSON state boundaries, plus `d3.scaleSequential` for color encoding and `d3.scaleSqrt` for circle sizes. Data comes from two CSV files covering state-level price indices and city-level housing metrics.

NNita
88% match
Loading thumbnail…

Fork of Fork of US Economic indicators

This interactive dashboard explores US economic indicators across four linked pages: a choropleth map of state GDP, a multi-line chart of income trends, a small-multiple dashboard of related metrics, and an animated scatterplot with a trailing dot effect. Navigation buttons toggle between pages, with charts rendered lazily on first view. The visualization uses d3.v7 with d3.geoPath for the TopoJSON state map, d3.csv for loading economic datasets, and d3.scaleQuantize for choropleth coloring, all drawn as SVG with shared tooltips and interactive hover states.

Ddiwashhumagain@my.unt.edu
85% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
83% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
83% match
Loading thumbnail…

Fork of Fork of USA Country Map

A choropleth map of the United States shows each state as a filled, pink polygon with white interior boundaries, highlighting states on hover by turning them orange. Built with D3 v5, the visualization uses `geoAlbersUsaTerritories` for the projection and `geoPath` to render the geographic features. State boundaries come from the `us-atlas` TopoJSON file, processed via the TopoJSON library's `feature` and `mesh` functions, and displayed within a React application using SVG.

GGalineeharika
83% match
Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Mmoslem-tg
82% match
Loading thumbnail…

Fork of US Economic indicators

This interactive dashboard visualizes U.S. economic indicators, including GDP, income, and inflation, through a four-page interface with navigation buttons. It features a choropleth map of states with a slider for temporal changes, a multi-line chart comparing economic trends, a dashboard with small multiples, and a scatterplot with a slider and trailing dots. Built with D3 v7 and TopoJSON, it renders SVG elements and uses shared tooltips, color legends, and quantized color scales to convey data across all pages.

Ddiwashhumagain@my.unt.edu
82% match
Loading thumbnail…

Fork of Fork of Nikita's USA Country Map

This visualization displays a choropleth map of the 50 U.S. states, with each state filled in blue and state boundaries drawn as black interior lines. The map uses a geo-albers-usa-territories projection via `geoAlbersUsaTerritories()` and renders geographic shapes with `d3.geoPath()`. Data is loaded from the `us-atlas` TopoJSON file and processed using the `feature()` and `mesh()` functions from TopoJSON. The React-based implementation uses hooks (`useState`, `useEffect`) to manage data fetching, and SVG paths are generated for each state feature. Hovering over any state highlights it in purple through CSS.

GGalineeharika
82% match