Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNita
Last edited Jun 4, 2025
Created on Jun 4, 2025

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.

AI-generated description

Data Visualization Dashboard

This dashboard presents housing data for various cities, allowing users to explore relationships between metrics such as:

  • Median home prices
  • Household income
  • Population
  • Job growth rates
  • Unemployment rates
  • Median rent

Features

  • Multiple visualization types (bar chart, scatter plot, pie chart, etc.)
  • Interactive selection of cities
  • Detailed information panels
  • Responsive design

How to Use

  1. Click on a chart type in the navigation bar to focus on a specific visualization
  2. Click on data points to see detailed information about a city
  3. Click on the background to show all charts

Implementation

Built using React and D3.js with a functional, component-based architecture.

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

Fork of Fork of Fork of The home prices across different counties in New York State - Dashboard

This dashboard explores New York State county real estate markets from 2022 to 2024, combining a D3 bar chart, scatterplot, and trend lines within a React framework. It displays median home prices, sales volumes, and rankings for all counties, enabling interactive analysis of market dynamics. Users can select specific years and counties to filter the entire view, with animated transitions powered by D3's `transition` API and cross-filtering across all charts. The dashboard uses SVG rendering for all visualizations and presents data from a local CSV file.

NNita
77% match
Loading thumbnail…

Fork of NY State Map 4 - Filtering Dashboard

This dashboard visualizes New York State’s housing market across 62 counties, with a choropleth map showing median home prices, a bar chart ranking sales volume, and a line chart tracking three-year price trends. Users filter any view by clicking a county on the map, which instantly updates all other panels to show only that county’s data. The map uses `d3.json` to load TopoJSON boundaries, `d3.geoMercator` for projection, and `d3.scaleSequential` for color encoding. The bar chart uses `d3.scaleBand` and `d3.scaleLinear`, while the trend chart employs `d3.line` curves. A year selector drives reactive updates across all visualizations.

NNita
76% match