San Francisco Affordable Housing Dashboard

An interactive web application for analyzing San Francisco's affordable housing pipeline data, providing insights into funding sources, project types, construction timelines, and developer/contractor concentration.

Features

Data Analysis & Visualization

• Interactive Dashboard: Filter and analyze housing projects by multiple criteria
• Bond Year Analysis: Organize projects according to funding sources and bond years
• Project Type Breakdown: Categorize projects by construction type (new construction, rehabilitation, reuse)
• Housing Program Analysis: Filter by affordable housing programs (MOHCD 100% Affordable, Inclusionary Housing, HOPE SF, etc.)
• Geographic Analysis: Map view with project locations and neighborhood filtering
• Timeline Visualization: Track construction progress and completion estimates

Company & Developer Analysis

• Market Concentration: Analyze concentration of affordable housing development among companies
• Top Developer Rankings: Identify leading companies by project count and unit totals
• Partnership Analysis: Understand collaboration patterns between lead sponsors and co-sponsors
• Project Portfolio: View complete project portfolios for individual companies

Interactive Features

• Dynamic Filtering: Filter by bond year, project type, housing program, neighborhood, district, and construction status
• Sortable Data Tables: Browse and search through all projects with customizable sorting
• Export Tools: Export filtered data in CSV/JSON formats and generate summary reports
• Visual Export: Capture dashboard images for presentations and reports

Data Processing

• Zoning Integration: Associate projects with SF zoning districts using coordinates
• Bond Year Inference: Link projects to specific SF housing bond funding years based on timelines
• Unit Breakdown Analysis: Detailed breakdown by unit sizes and AMI levels
• Construction Status Tracking: Monitor project progress from pre-development to completion

Technology Stack

• Frontend: React.js with Bootstrap for responsive design
• Data Visualization: Chart.js for interactive charts and graphs
• Mapping: Leaflet.js for interactive maps with project locations
• Data Processing: Papa Parse for CSV handling and data transformation
• Export Functionality: HTML2Canvas for image export, FileSaver for data downloads

Data Sources & Bond Funding Mapping

Primary Dataset

1. Mayor's Office of Housing and Community Development Affordable Housing Pipeline
   • Source: SF DataSF Portal
   • File: Mayor's_Office_of_Housing_and_Community_Development_Affordable_Housing_Pipeline_20251109.csv
   • Contains comprehensive project information including funding, timelines, and locations
   • Last Updated: November 9, 2025

Official Bond Funding Sources

2019 Affordable Housing General Obligation Bond ($600M)

• Official Source: SF.gov - 2019 Affordable Housing Bond

• Approved: November 5, 2019 (Proposition A, 71% voter approval)

• Bond Allocations:

  • $150M for Public Housing
  • $220M for Low Income Housing
  • $60M for Preservation and Middle-Income Housing
  • $150M for Senior Housing
  • $20M for Educator Housing

• Bond Issuances:

  1. Series 2021A (March 30, 2021): $254.6M
     • $50.62M Public Housing
     • $143.7M Low-Income Housing
     • $37.1M Preservation and Middle-Income Housing
     • $21.2M Senior Housing
  2. Series 2023C (April 11, 2023): $172.0M
     • $97.88M Public Housing
     • $38.59M Low-Income Housing
     • $9.4M Preservation and Middle-Income Housing
     • $20.4M Senior Housing
  3. Series 2025C (January 30, 2025): $70.0M
     • $35.31M Low-Income Housing
     • $6.45M Preservation and Middle-Income Housing
     • $5.2M Senior Housing
     • $19.8M Educator Housing

• CGOBOC Reports: Available at the official SF.gov page, including:

  • Housing General Obligation Bond Report December 2021
  • Housing General Obligation Bond Report June 2022
  • Housing General Obligation Bond Report December 2022
  • Housing General Obligation Bond Report June 2023
  • Housing General Obligation Bond Report December 2023
  • Housing General Obligation Bond Report June 2024
  • Housing General Obligation Bond Report December 2024
  • Housing General Obligation Bond Report June 2025

2015 Affordable Housing General Obligation Bond ($310M)

• Official Source: SF.gov - 2015 Affordable Housing Bond

• Approved: November 2015 (Proposition A, 74% voter approval)

• Bond Allocations:

  • $100M for Low Income Affordable Housing
  • $50M for Low Income Affordable Housing in Mission District
  • $80M for Public Housing (HOPE SF)
  • $80M for Middle Income programs (including Down Payment Assistance Loans - DALP)

• Bond Issuances:

  1. Series 2016F (October 19, 2016): $75.13M
     • $40.6M Public Housing
     • $24.0M Low-Income Housing
     • $6.0M Mission Neighborhood
     • $3.8M Middle Income Housing (DALP and Teacher Next Door Program)
  2. Series 2018D (May 8, 2018): $142.1M
     • $0.4M Public Housing
     • $67.6M Low-Income Housing
     • $42.6M Mission Neighborhood
     • $29.9M Middle Income Housing (DALP and Teacher Next Door Program)
  3. Series 2019C (October 3, 2019): $92.7M
     • $38.1M Public Housing
     • $7.3M Low-Income Housing
     • $0.8M Mission Neighborhood
     • $45.5M Middle Income Housing (DALP and Teacher Next Door Program)

• CGOBOC Reports: Available at the official SF.gov page, including:

  • Housing General Obligation Bond Report Dec 2016
  • Housing General Obligation Bond Report June 2017
  • Housing General Obligation Bond Report Sept 2017
  • Housing General Obligation Bond Report March 2018
  • Housing General Obligation Bond Report Sept 2018
  • Housing General Obligation Bond Report Dec 2018
  • Housing General Obligation Bond Report Mar 2019
  • Housing General Obligation Bond Report June 2019
  • Housing General Obligation Bond Report Dec 2019
  • Housing General Obligation Bond Report June 2020
  • Housing General Obligation Bond Report Dec 2020
  • Housing General Obligation Bond Report June 2021
  • Housing General Obligation Bond Report Dec 2021
  • Housing General Obligation Bond Report June 2022
  • Housing General Obligation Bond Report Dec 2022
  • Housing General Obligation Bond Report June 2023
  • Housing General Obligation Bond Report Dec 2023
  • Housing General Obligation Bond Report June 2024
  • Housing General Obligation Bond Report Dec 2024
  • Housing General Obligation Bond Report June 2025

Bond-to-Project Mapping Methodology

Current Implementation (Multi-Tier Approach)

The system uses a three-tier priority system for bond assignment:

1. CGOBOC Report Mapping (Highest Priority)

   • Direct project-to-bond mappings extracted from official CGOBOC reports
   • Currently includes known HOPE SF projects (Sunnydale, Hunters View)
   • Status: Partial - needs expansion from latest CGOBOC PDF reports

2. Program-Based Inference (Medium Priority)

   • HOPE SF projects → 2015 Bond (confirmed $80M allocation)
   • Mission District projects → 2015 Bond (confirmed $50M allocation)
   • Based on official bond allocation categories

3. Date/ID-Based Inference (Fallback)

   • Projects with IDs starting 2019+ → 2019 Bond
   • Projects with construction dates after 2019 → 2019 Bond
   • Projects from 2015-2019 → 2015 Bond (with date-based logic)
   • Limitation: Less accurate, used only when CGOBOC data unavailable

Target Implementation (CGOBOC Report-Based)

To improve accuracy, the system should use direct mapping from CGOBOC reports:

1. Extract project listings from official CGOBOC bond reports (PDF format)
2. Match projects by:
   • Project ID
   • Project Name
   • Address/Location
   • Developer/Sponsor
3. Populate DataProcessor.createProjectBondMapping() with comprehensive mappings
4. Use this mapping as the primary source, with inference as fallback only

Implementation Steps for Complete Mapping

1. Extract Project Data from CGOBOC Reports:

   • Download latest CGOBOC reports from SF.gov
   • Parse project listings from PDFs (may require manual extraction or PDF parsing)
   • Create structured data mapping Project IDs to Bond Years

2. Update DataProcessor.js:

   • Expand createProjectBondMapping() with actual project-to-bond mappings
   • Prioritize CGOBOC mappings over inference
   • Document any projects that cannot be matched

3. Validation:

   • Cross-reference mapped projects with pipeline dataset
   • Verify funding amounts align with bond allocations
   • Flag any discrepancies for review

Mapping Technology

Current Map Implementation

• Library: Leaflet.js with React-Leaflet
• Tile Layer: CartoDB Positron (minimalist, fast-loading OSM-style basemap)
  • URL: https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png
  • Benefits: Faster loading, cleaner appearance, better performance
• Visualization: Region-based circles grouped by neighborhood
• Circle Sizing: Logarithmic scale based on total units density
• Circle Color: Based on bond support density (total units supported by bonds)
• Optimization:
  • updateWhenZooming={false} to reduce tile requests
  • keepBuffer={2} for efficient tile caching

Map Features

• Region-Based Visualization: Circles represent neighborhoods with housing projects
• Dual Metrics:
  • Circle size = total units density (all housing units)
  • Circle color = bond support density (units supported by bonds)
• PDF Export: Filtered maps can be exported as PDF with legend and metadata
• Interactive Popups: Show detailed neighborhood statistics including bond support breakdown

Data Accuracy Notes

⚠️ Important: Current bond year assignments use a multi-tier approach:

• CGOBOC Report Mappings: Highest accuracy (when available)
• Program-Based Inference: High accuracy for HOPE SF and Mission projects
• Date/ID-Based Inference: Lower accuracy, used as fallback

For research and analysis purposes, users should:

• Verify critical project-to-bond mappings using official CGOBOC reports
• Cross-reference with the official SF.gov bond pages
• Note that inference-based mapping is a temporary solution until CGOBOC report data is fully integrated
• Check bondYearSource field to see how each project's bond year was determined

Zoning Data

• Source: San Francisco zoning use districts
• Method: Geographic coordinate-based approximation
• Limitation: Simplified categorization based on SF geography patterns
• Future: Integration with official SF zoning shapefiles for precise district mapping

Key Insights Provided

Financial Analysis

• Total housing units and affordable units by funding source
• Bond year allocation and project distribution
• Average project costs and unit counts

Geographic Distribution

• Projects by supervisor district and neighborhood
• Mapping of affordable housing development patterns
• Zoning context for each project

Developer Market Analysis

• Market share analysis for top developers
• Company specialization patterns (project types, housing programs)
• Concentration metrics and competitive landscape

Construction Pipeline

• Projects in various development stages
• Timeline analysis from approval to completion
• Construction status tracking

Installation & Usage

1. Install Dependencies:

   npm install

2. **Start Development Server**:
   ```bash
   npm start

3. Build for Production:

   npm run build

4. View Application: Open http://localhost:3000 in your browser

Project Structure

src/
├── components/
│   ├── Dashboard.js          # Main dashboard container
│   ├── FilterPanel.js        # Data filtering controls
│   ├── StatsOverview.js      # Summary statistics cards
│   ├── HousingMap.js         # Interactive map component
│   ├── DataTable.js          # Sortable data table
│   ├── Charts.js             # Data visualization charts
│   ├── CompanyAnalysis.js    # Developer concentration analysis
│   └── ExportTools.js        # Data and image export functionality
├── utils/
│   └── DataProcessor.js      # Data processing and analysis utilities
├── App.js                    # Main application component
└── index.js                  # Application entry point

Key Features for Your Analysis

Bond Year Organization

• Projects are automatically categorized by inferred funding sources
• Visual breakdown showing distribution across different SF housing bonds
• Filters to isolate projects by specific bond years

Project Type Analysis

• Clear categorization: New Construction, Rehabilitation, Reuse
• Unit counts and affordable percentages by project type
• Geographic distribution of different project types

Developer Concentration

• Comprehensive analysis of market concentration among developers
• Top company rankings by units and project count
• Market share calculations and competitive analysis

Zoning Integration

• Projects mapped to SF zoning districts where coordinates are available
• Zoning type categorization (Residential, Mixed Use, Commercial, etc.)
• Analysis of affordable housing development patterns by zoning

Export Capabilities

• CSV/JSON export for further analysis in Excel or other tools
• Dashboard image capture for presentations
• Summary reports with key statistics and insights

Future Enhancements

• Enhanced zoning integration with detailed shapefile analysis
• Real-time data updates from SF DataSF API
• Additional financial metrics and cost analysis
• Expanded contractor/construction company tracking
• Predictive analytics for construction timelines

Data Processing Notes

Bond Year Assignment

• Uses multi-tier priority system: CGOBOC Report → Program Allocation → Inference
• Tracks assignment source in bondYearSource field for validation
• Development mode logs unmapped projects for review
• See "Bond-to-Project Mapping Methodology" section above for details

Zoning Information

• Approximate categorization based on coordinate-based geographic analysis
• Simplified patterns: Mixed Use, Residential, Transit Oriented, etc.
• Future enhancement: Integration with official SF zoning shapefiles

Data Processing

• Company analysis includes both lead sponsors and co-sponsors where available
• All data is processed client-side for privacy and performance
• Unit breakdowns parsed for all AMI levels (20% to 150%)
• Construction status tracking from pre-development to completion

Implementation Status

Completed Features ✅

• Minimalist map tile layer (CartoDB Positron) for faster loading
• Region-based circle visualization with logarithmic scaling
• CGOBOC bond mapping structure (partial - ready for expansion)
• Program-based inference for HOPE SF and Mission projects
• Validation and logging for unmapped projects
• PDF export functionality for filtered maps
• AMI and Zoning District filters

Pending Enhancements 🔄

• Complete CGOBOC Project Mapping: Extract all projects from latest CGOBOC PDF reports
• Enhanced Zoning Integration: Use official SF zoning shapefiles for precise district mapping
• Real-time Data Updates: Integration with SF DataSF API for automatic updates

This application provides a comprehensive tool for analyzing San Francisco's affordable housing development landscape, with particular focus on funding sources, developer concentration, and project distribution patterns that align with your research interests.