Housing Affordability Dashboard

An interactive visualization tool that explores housing affordability across different cities in the United States. This dashboard provides insights into the relationship between housing costs and median income through multiple metrics and visualizations.

Features

• Interactive Bar Chart: Compare housing affordability across cities
• Time Series Analysis: Track affordability trends over time
• Multiple Metrics:
  • Price-to-Income Ratio
  • Monthly Payment as % of Income
  • Years to Save for Down Payment
• Real-time Statistics: Key affordability metrics and comparisons
• Responsive Design: Works on desktop and mobile devices

Metrics Explained

Price-to-Income Ratio

The ratio of median home price to median household income. Generally, a ratio above 5 is considered unaffordable.

Monthly Payment Percentage

Percentage of median income needed for monthly housing payments (including taxes and insurance). The recommended maximum is 30%.

Years to Save for Down Payment

Number of years needed to save for a 20% down payment, assuming 10% of income is saved annually.

Data Sources

This dashboard uses simulated data based on realistic housing market conditions. In a production environment, data would be sourced from:

• U.S. Census Bureau
• Bureau of Labor Statistics
• Real estate market APIs
• Local housing authorities

Technology Stack

• D3.js: Data visualization and DOM manipulation
• Vanilla JavaScript: Application logic and interactivity
• HTML5/CSS3: Structure and styling
• Responsive Grid Layout: Mobile-friendly design