Skip to main content
SimilarExport ZIP
100%

Housing Affordability Index (HAI) - United States

✓ Published0🌍 Public
NNita
Last edited May 1, 2025
Created on May 1, 2025

This interactive dashboard visualizes housing affordability in the United States from 2022 through early 2025, based on National Association of REALTORS® data. Users toggle between annual bar charts and monthly trend lines, and switch among metrics including median price, mortgage rate, and the Affordability Index. The React app drives a D3.js v7 rendering, using `scaleBand`, `scaleTime`, and `scaleOrdinal` to create scales, `axisBottom` and `axisLeft` for axes, and `transition.attrY` and `attrTween` for animated transitions. Hovering reveals a tooltip with all data values for the selected period.

AI-generated description

Housing Affordability Index (HAI) - United States

This dataset is based on the National Association of REALTORS® (NAR) Housing Affordability Index and includes key economic indicators related to housing affordability in the United States from 2022 through early 2025.

📊 Dataset Summary

Column Description
Year The year or month and year of the record
Median Price Median sales price of an existing single-family home (USD)
Rate Effective mortgage interest rate (%) for a 30-year fixed mortgage
Payment Monthly principal and interest payment (USD)
Payment % Income Percentage of median income spent on housing payment
Median Income Median family income (USD)
Qualifying Income Required income to qualify for a mortgage under a 25% payment-to-income ratio
Affordability Index A higher index indicates more affordable housing (100 = baseline affordability)

🔍 Affordability Index Interpretation

  • 100 = A family earning the median income can exactly afford the median-priced home.
  • >100 = More affordable (family income exceeds required income).
  • <100 = Less affordable (family income is below required income).

📆 Data Highlights

  • Highest affordability in the period: September 2024 (Index = 104.9)
  • Lowest affordability in the period: June 2024 (Index = 91.6)
  • Most expensive median home price: June 2024 ($432,900)
  • Highest monthly payment: June 2024 ($2,304)

📁 File Included

  • housing_affordability_index.csv: Tabular data of housing affordability indicators.

📌 Source

Data provided by:
National Association of REALTORS®
© 2025. All rights reserved.
Use of this data should credit NAR. For reprints, contact: data@realtors.org

MIT Licensed

Similar vizzes

Loading thumbnail…

Housing Affordability

This interactive dashboard compares housing affordability across U.S. cities through three metrics: price-to-income ratio, monthly payment percentage, and years to save for a down payment. Users select a metric via dropdown, which updates a bar chart using d3.scaleBand and d3.scaleSequential with Viridis coloring, a multi-line time series chart with d3.line and d3.curveMonotoneX showing trends for five cities, and summary statistics. The visualization renders as SVG with hover tooltips, using d3.select, d3.axisBottom, and d3.axisLeft, leveraging simulated data generated from city income and price values.

NNita
81% match
Loading thumbnail…

Fork of FHFA State House Price Indexes -2

This interactive dashboard visualizes state-level home price appreciation across the United States, combining a choropleth map with a bar chart. Users can switch between four time periods (1 period, 1 year, 5 years, since 1991) using selector buttons. The visualization uses D3.js v7 (geoAlbersUsa, scaleBand, scaleLinear) within a React framework, rendering US states from a GeoJSON file and FHFA data loaded via d3.csv. Hovering over the map displays tooltips, while clicking states highlights them in both the map and bar chart simultaneously.

NNita
76% match
Loading thumbnail…

FHFA State House Price Indexes

This visualization presents state-level housing price appreciation rates using a horizontal bar chart built with React and D3 v7. It ranks all 50 states plus the District of Columbia by their 5-year appreciation, with bars colored green, yellow, or red based on performance relative to the national average (computed via `d3.mean`). Interactive metric selector buttons let viewers switch between 1-period, 1-year, 5-year, and since-1991 appreciation rates, and clicking a bar highlights that state while dimming others. The chart uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the data from a CSV file.

NNita
75% match
Loading thumbnail…

Housing Affordibility for homeless

This dashboard visualizes the relationship between housing affordability and homelessness across U.S. states from 2005 to 2022 using three linked D3.js charts: a grouped bar chart comparing state-level metrics, a scatterplot plotting median home prices against homeless populations, and a dual-axis line chart showing national trends over time. It employs D3 v6 with SVG rendering, loading data from external CSV files and featuring interactive tooltips on mouseover for all visualizations.

Aaparnachalumuri@gmail.com
74% match
Loading thumbnail…

Homessless house affordobility

This dashboard visualizes housing affordability and homelessness across U.S. states by merging two CSV datasets on state and year. It displays a grouped bar chart comparing the percentage of affordable housing against homeless population counts, with hover tooltips providing exact values. The visualization uses d3.scaleBand for the categorical axes, d3.scaleLinear for the value axis, and d3.scaleOrdinal for color encoding. Data is loaded asynchronously via d3.csv with Promise.all, and rendered as SVG elements with interactive mouseover events.

Aaparnachalumuri@gmail.com
73% match
Loading thumbnail…

Time Series with Interaction

This example presents monthly housing data from January 1991 to April 2013, displaying two time series: the Housing Price Index (HPI) and the number of homes sold. The visualization uses D3.js v7 with SVG rendering and an animated, interactive line chart. Users can hover over a line to highlight it while dimming others to light grey, or click a series to toggle its visibility. The implementation leverages `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom` within a React framework.

CChandana Srinivas
70% match
Loading thumbnail…

zip2

This dashboard explores the relationship between housing affordability and homelessness across U.S. states from 2005 to 2022. It presents five linked visualizations: a grouped bar chart comparing affordable housing percentages against homeless populations, a scatterplot correlating median home prices with homelessness, a dual-axis line chart tracking yearly trends, a stacked area chart breaking down homelessness by youth and chronic categories, and a heatmap displaying homeless population intensity over time. All charts use D3 v6 with SVG rendering, load CSV data from GitHub, and include interactive tooltips.

Aaparnachalumuri@gmail.com
69% match
Loading thumbnail…

York Funding Data Dashboard

This interactive dashboard presents housing market data for 16 U.S. cities, enabling exploration through seven switchable chart types: bar, scatter, pie, bubble, boxplot, heatmap, and line charts. Users click data points to select cities and reveal a details panel with metrics like median home price, rent, income, and job growth. Built with React and D3.js v7, the visualization uses scales, axes, and SVG rendering, with data loaded from a CSV file.

NNita
68% match