Skip to main content
SimilarExport ZIP
100%

Fork of USA Map 2

✓ Published8🌍 Public
NNita
Last edited May 21, 2025
Created on May 14, 2025
Forked from USA Map 1

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.

AI-generated description

US State and City Housing Market Map

This interactive visualization shows housing market data for US states and cities using D3.js. The map combines state-level home price performance metrics with city-level housing market information.

Features

  • Choropleth map of US states colored by 1-year home price performance
  • City markers sized by population
  • Interactive tooltips showing detailed metrics when hovering over states and cities
  • Color and size legends to interpret the values
  • Responsive design for various screen sizes

Data

The map uses two datasets:

State Data (data.csv)

  • Rank: State ranking based on performance
  • SA 1 Period: Seasonally adjusted performance for most recent period
  • SA 1 Year: Seasonally adjusted 1-year performance
  • SA 5 Year: Seasonally adjusted 5-year performance
  • SA Since 1991: Seasonally adjusted performance since 1991

City Data (data1.csv)

  • City name and state
  • Population
  • Median Home Price
  • Median Rent
  • Household Income
  • Job Growth Rate (%)
  • Unemployment Rate (%)

Technologies Used

  • D3.js for data visualization
  • TopoJSON for map data
  • HTML/CSS for layout and styling

How to Use

  1. Open the index.html file in a modern web browser
  2. Hover over states to see state-level housing performance data
  3. Hover over city markers to see detailed city housing market information
  4. Refer to the color scale and size legend to interpret values
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Map

A choropleth map of the United States visualizes home price performance by state, with states colored according to their seasonally adjusted one-year price change. Overlaid orange circles represent major cities, sized by population, providing additional housing market context. The visualization uses D3.js v7 with `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON state boundaries from the us-atlas package, while a custom SVG tooltip displays detailed state and city metrics on hover. State data comes from a CSV file ranking performance across multiple time periods.

MMd Fahimul Kabir Chowdhury
90% 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
90% 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
90% 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
89% 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
88% match
Loading thumbnail…

Fork of 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.

NNita
88% match
Loading thumbnail…

A9 Choropleth Map w/ Tooltips D3

A choropleth map of the United States colors each state according to its cost-of-living index from a CSV of expensive states, with tooltips revealing additional cost rank details on hover. The visualization uses D3 v7 and TopoJSON to load and render state boundaries via `d3.geoPath` with an Albers USA projection. A sequential blue color scale maps cost index values, while an interactive tooltip div appears on mouseover to show state-specific data.

Nnathanjmuljadi@gmail.com
83% match