100%

FHFA State House Price Indexes

✓ Published1🌍 Public

Last edited May 14, 2025

Created on May 14, 2025

Forked from React & D3 Vibecoding Starter

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.

AI-generated description

State Housing Appreciation Visualization

This visualization shows the 5-year housing price appreciation rates for all 50 states. States are ranked from highest to lowest appreciation, with bars color-coded based on their performance relative to the national average.

The data represents state-level housing price appreciation over different time periods.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Housing Affordability Index (HAI) - United States

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.

NNita

75% match

Loading thumbnail…

Map

This interactive map visualizes seasonally adjusted home price performance across U.S. states, using color intensity to show one-year price changes, while city-level circles sized by population reveal housing metrics like median prices and rents. Users hover over states and cities to access detailed data. The visualization uses D3 v7 with a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON state boundaries, alongside `d3.scaleSequential` for color coding and `d3.scaleSqrt` for circle sizing.

MMd Fahimul Kabir Chowdhury

75% match

Loading thumbnail…

Map

This interactive map visualizes home price performance across U.S. states and cities. States are colored by their one-year seasonally adjusted price change, while cities appear as circles sized by population. The visualization uses D3 v7 with `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries from TopoJSON, and `d3.csv` to load both state and city datasets. Hovering over states or cities reveals detailed tooltips, and the map includes a legend and informational panel.

MMd Fahimul Kabir Chowdhury

74% match

Loading thumbnail…

Map

This interactive map visualizes U.S. home price performance by state, using color to encode the seasonally adjusted 1-year metric, alongside major cities sized by population. The D3.js v7 code loads TopoJSON from us-atlas and GeoJSON data, projecting paths with d3.geoPath and a geoAlbersUsa projection. Animated hover effects reveal detailed state metrics and city statistics (median home price, rent, income) via a custom tooltip, while distinguishing state choropleth shading from proportional city circles in a single SVG rendering.

MMd Fahimul Kabir Chowdhury

74% match

Loading thumbnail…

Map

This interactive map visualizes United States home price performance across states and major cities, using a blue choropleth for state-level data and orange circles scaled by population for city-level metrics. Built with D3 v7, it combines TopoJSON geographic data, `d3.geoAlbersUsa` projection, and `d3.geoPath` to render state boundaries, while animated transitions and hover tooltips reveal detailed housing indicators like median home prices, rents, and job growth rates. The visualization draws from seasonally adjusted price indices in `data.csv` and city housing market data in `data1.csv`.

MMd Fahimul Kabir Chowdhury

73% match

Loading thumbnail…

Map 2

This interactive map visualizes U.S. home price performance by state, with states colored according to their seasonally adjusted one-year price change, and overlays circles for cities sized by population. Hovering reveals detailed metrics for both states and cities. Built with D3.js v7 and TopoJSON, it uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries, while a sequential color scale applies a blue interpolator to encode performance data from the CSV files.

MMd Fahimul Kabir Chowdhury

73% match

Loading thumbnail…

Interactive bar chart based on categorical data

This interactive bar chart displays GDP growth rates for ten U.S. states, ordered from highest to lowest. The chart uses D3.js v5 within a React framework to render SVG bars, axes, and labels. The value on the y-axis represents GDP growth percentage, while the x-axis lists state names. The visualization includes a hover interaction: mousing over a bar highlights it and draws a horizontal dashed line at that bar's value, while showing divergence percentages between the hovered state and all others. A CSS grid and source line complete the presentation.

AAAL FORHAD

73% match