Skip to main content
SimilarExport ZIP
100%

York Funding Data Dashboard

✓ Published1🌍 Public
NNita
Last edited May 21, 2025
Created on May 21, 2025

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.

AI-generated description

City Housing Dashboard

Interactive dashboard for analyzing city housing data using React and D3.js.

Features

  • Multiple chart types (bar, scatter, pie, bubble, boxplot, heatmap, line)
  • Interactive selection of cities for detailed information
  • Responsive design that adapts to different screen sizes
  • Color and size encodings for multi-dimensional analysis

Usage

  1. Load the application in a web browser
  2. Select different chart types using the navigation bar at the bottom
  3. Click on cities to view detailed information
  4. Analyze trends, comparisons, and relationships in the data

Technology Stack

  • React.js for UI components
  • D3.js for data visualization
  • CSS for styling
MIT Licensed

Similar vizzes

Loading thumbnail…

York Funding Data Dashboard - Filter other charts after selecting the chart

This dashboard visualizes housing market data for selected U.S. cities, including home prices, rents, incomes, and job growth. It displays seven interactive chart types—bar, scatter, pie, bubble, box plot, heat map, and line chart—each using D3.js within a React application. Users can click any chart to focus on it, hiding others, or select data points to filter across visualizations. The heat map shows correlations between metrics, while the box plot displays statistical distributions.

NNita
95% match
Loading thumbnail…

Fork of York Funding Data

This interactive visualization displays US city housing metrics across seven switchable views, including median home prices, household income, population, unemployment rate, and job growth. Built with React and D3 v7, each chart—bar, scatter, pie, bubble, box plot, heat map, and line—responds to user clicks, highlighting selected cities in a details panel. The heat map computes a correlation matrix using d3.quantile and scaleLinear with diverging colors, while the line chart fits a linear regression. Data loads from a CSV via d3.csv.

NNita
91% match
Loading thumbnail…

Fork of York Funding Data Dashboard - Filter other charts after selecting the chart

This dashboard displays housing metrics for 16 U.S. cities with multiple coordinated views—a bar chart of median home prices, scatter plot of price vs. income, pie chart, bubble chart, box plot, heat map of correlations, and a line chart—overlaid on one tall canvas. Users select a city in any chart to highlight it across all views and see a details panel, or click a chart’s background to isolate that view. The React app uses d3.scaleBand, scaleLinear, pie, arc, and correlation calculations (quantile, median) driven by the CSV data, with D3’s join API and animated opacity transitions for responsive filtering.

NNita
91% match
Loading thumbnail…

York Funding Data

A bar chart shows median home prices for sixteen U.S. cities, sorted from highest to lowest value. Clicking a bar reveals a details panel with population, rent, income, job growth, and unemployment data for that city. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, a ResizeObserver for responsive sizing, and D3's enter-update-exit pattern to animate bars and the details panel. Data loads asynchronously from a CSV file via `d3.csv`.

NNita
90% match
Loading thumbnail…

Fork of NY State Map 3 - working-Filtering Dashboard-York Funding Data

This interactive housing dashboard visualizes New York State county-level housing metrics alongside a U.S. city comparison map, supporting exploration via a year selector and county click-filtering. It renders a choropleth map of counties using TopoJSON geo data and `d3.geoPath`, with circles scaled by population and colored by median home price on a separate U.S. map. Linked bar charts and line charts update based on selections, making use of D3's scales, axes, and selection methods. The dashboard displays data sourced from a CSV containing sales counts and median prices for 2022–2024.

NNita
79% match
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
75% match
Loading thumbnail…

Map NY fips 1

This React and D3.js dashboard visualizes New York county housing data from 2022 to 2024 using CSV input. Users view median home prices or sales counts via a bar chart, switch between years, and click bars to select up to five counties for a detailed comparison panel. The d3.scaleBand and d3.scaleLinear axes support interactive filtering and smooth transitions.

NNita
75% match
Loading thumbnail…

Fork of Fork of NY State Map 3 - working-Filtering Dashboard-York Funding Data

This dashboard visualizes median home prices across New York State counties from 2022 to 2024, using a color-coded choropleth map rendered with d3.geoPath and TopoJSON. Users can switch years via a dropdown, click counties to filter all views, and hover for tooltips, with linked bar and trend charts updating accordingly. A metrics panel shows average, min, and max prices, while a separate list highlights top counties. Built with D3 v7, it uses d3.scaleSequential, d3.scaleBand, and d3.line to render the interactive SVG elements.

NNita
74% match