# nsaph-projects/air-quality-disparities-mapper architecture

> Architecture diagram of the GitHub repository nsaph-projects/air-quality-disparities-mapper, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nsaph-projects/air-quality-disparities-mapper
- Repository: https://github.com/nsaph-projects/air-quality-disparities-mapper

## Overview

This is a browser-based air-quality and demographic mapping application. Users choose a visualization from the landing page, explore county-level pollution and demographic data on a map, and can inspect county relationships in a scatterplot. The sampled map scripts show interactive feature selection and variable switching; the scatterplot loads a remote county CSV and can send a selected county back to the map. The tree documents a surface-map page, but its implementation was not sampled, so its behavior and connections are not inferred.

Main entry points: [`js/scatterplot.js`](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/scatterplot.js) (County scatterplot), [`js/landing_page.js`](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/landing_page.js) (Landing interactions), [`js/main.js`](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/main.js) (Surface map runtime), [`js/bivariate_choropleth.js`](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/bivariate_choropleth.js) (Bivariate renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navigation"]
  node_landing["Visualization landing<br/>[index.html]"]
  node_landing_ui["Landing interactions<br/>[landing_page.js]"]
end

subgraph group_maps["Map visualizations"]
  node_surface_page["Surface map page<br/>[surface_map.html]"]
  node_bivariate_page["Bivariate map page"]
  node_bubble_page["Bubble map page<br/>[bubble_map.html]"]
  node_surface_runtime["Surface map runtime<br/>[main.js]"]
  node_bivariate_runtime["Bivariate renderer"]
  node_bubble_runtime["Bubble renderer<br/>[bubble_map.js]"]
end

subgraph group_analysis["Linked analysis"]
  node_scatterplot["County scatterplot<br/>[scatterplot.js]"]
end

subgraph group_data["Data sources"]
  node_county_service[("County feature service")]
  node_county_csv[("County CSV")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_landing
node_landing -.->|"uses interactions"| node_landing_ui
node_landing_ui -->|"redirects to"| node_surface_page
node_landing_ui -->|"redirects to"| node_bivariate_page
node_landing_ui -->|"redirects to"| node_bubble_page
node_bivariate_page -.->|"loads"| node_bivariate_runtime
node_bubble_page -.->|"loads"| node_bubble_runtime
node_surface_page -.->|"loads"| node_surface_runtime
node_surface_runtime -.->|"queries features"| node_county_service
node_bivariate_runtime -.->|"queries features"| node_county_service
node_bubble_runtime -.->|"queries features"| node_county_service
node_surface_runtime -->|"refreshes"| node_scatterplot
node_bubble_runtime -->|"refreshes"| node_scatterplot
node_bivariate_runtime -.->|"refreshes"| node_scatterplot
node_scatterplot -->|"loads CSV"| node_county_csv
node_scatterplot -->|"selects county"| node_bubble_runtime
node_scatterplot -->|"selects county"| node_bivariate_runtime
node_scatterplot -.->|"selects county"| node_surface_runtime

click node_landing "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/index.html"
click node_landing_ui "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/landing_page.js"
click node_surface_page "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/visualizations/surface_map.html"
click node_bivariate_page "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/visualizations/bivariate_choropleth.html"
click node_bubble_page "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/visualizations/bubble_map.html"
click node_surface_runtime "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/main.js"
click node_bivariate_runtime "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/bivariate_choropleth.js"
click node_bubble_runtime "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/bubble_map.js"
click node_scatterplot "https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/scatterplot.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_landing,node_landing_ui toneBlue
class node_surface_page,node_bivariate_page,node_bubble_page,node_surface_runtime,node_bivariate_runtime,node_bubble_runtime toneAmber
class node_scatterplot toneMint
class node_county_service,node_county_csv toneRose
class node_visitor toneIndigo
```

## Components

### Navigation

- [Visualization landing](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/index.html): `index.html`
- [Landing interactions](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/landing_page.js): `js/landing_page.js`

### Map visualizations

- [Surface map page](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/visualizations/surface_map.html): `visualizations/surface_map.html`
- [Bivariate map page](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/visualizations/bivariate_choropleth.html): `visualizations/bivariate_choropleth.html`
- [Bubble map page](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/visualizations/bubble_map.html): `visualizations/bubble_map.html`
- [Surface map runtime](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/main.js): `js/main.js`
- [Bivariate renderer](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/bivariate_choropleth.js): `js/bivariate_choropleth.js`
- [Bubble renderer](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/bubble_map.js): `js/bubble_map.js`

### Linked analysis

- [County scatterplot](https://github.com/nsaph-projects/air-quality-disparities-mapper/blob/main/js/scatterplot.js): `js/scatterplot.js`

### Data sources

- **County feature service**
- **County CSV**

### Other components

- **Visitor**

## Connections

- Visitor → Visualization landing: opens
- Visualization landing → Landing interactions: uses interactions
- Landing interactions → Surface map page: redirects to (evidence: `js/landing_page.js`)
- Landing interactions → Bivariate map page: redirects to (evidence: `js/landing_page.js`)
- Landing interactions → Bubble map page: redirects to (evidence: `js/landing_page.js`)
- Bivariate map page → Bivariate renderer: loads
- Bubble map page → Bubble renderer: loads
- Surface map page → Surface map runtime: loads
- Surface map runtime → County feature service: queries features
- Bivariate renderer → County feature service: queries features
- Bubble renderer → County feature service: queries features
- Surface map runtime → County scatterplot: refreshes (evidence: `js/main.js`)
- Bubble renderer → County scatterplot: refreshes (evidence: `js/bubble_map.js`)
- Bivariate renderer → County scatterplot: refreshes
- County scatterplot → County CSV: loads CSV (evidence: `js/scatterplot.js`)
- County scatterplot → Bubble renderer: selects county (evidence: `js/scatterplot.js`)
- County scatterplot → Bivariate renderer: selects county (evidence: `js/scatterplot.js`)
- County scatterplot → Surface map runtime: selects county