# tsunglinleetony/visualization-project-air-pollution-data-analysis architecture

> Architecture diagram of the GitHub repository tsunglinleetony/visualization-project-air-pollution-data-analysis, 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/tsunglinleetony/visualization-project-air-pollution-data-analysis
- Repository: https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis

## Overview

This repository is a browser-based Taiwan air-pollution analysis project: users choose a monitoring station and pollutant, then explore historical daily/monthly trends, seasonal patterns, and relationships among pollutants. The parallel-coordinate view adds brushing and a linked table; a Python script prepares hourly source data for a scatter-plot matrix. The README also describes map-based station selection, but the supplied tree and excerpts do not establish its implementation. Data-flow edges below reflect documented behavior or visible calls; the scatter plot’s runtime wiring is not sampled.

Main entry points: [`line-chart/main.js`](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/main.js) (Trend explorer), [`parallel-coordinate/main.js`](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/main.js) (Parallel-coordinate explorer), [`line-chart/circular-heat-map.js`](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/circular-heat-map.js) (Circular heatmap), [`scatter-plot`](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/scatter-plot) (Scatter plot matrix)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_historical["Historical trends"]
  node_line_ui["Trend explorer<br/>[main.js]"]
  node_line_constants["Station and trait options<br/>[constants.js]"]
  node_heatmap["Circular heatmap"]
end

subgraph group_multivariate["Pollutant comparison"]
  node_scatter_prep["Scatter input preparation"]
  node_scatter_view["Scatter plot matrix"]
  node_parallel_ui["Parallel-coordinate explorer<br/>[main.js]"]
  node_parallel_constants["Station and trait options<br/>[constants.js]"]
  node_parallel_engine["Parallel-coordinate renderer<br/>[d3.parcoords.js]"]
  node_data_grid["Brushed data table<br/>[divgrid.js]"]
end

subgraph group_data["Air-quality data"]
  node_daily_data[("Daily station averages")]
  node_monthly_data[("Monthly station averages")]
end

node_analyst(("Analyst"))

node_analyst -->|"selects station and pollutant"| node_line_ui
node_line_ui -->|"uses options"| node_line_constants
node_line_ui -->|"reads daily CSV"| node_daily_data
node_line_ui -->|"reads monthly CSV"| node_monthly_data
node_line_ui -->|"loads heatmap"| node_heatmap
node_heatmap -->|"requests focused period"| node_line_ui
node_analyst -->|"selects station and traits"| node_parallel_ui
node_parallel_ui -->|"uses options"| node_parallel_constants
node_parallel_ui -->|"reads monthly CSV"| node_monthly_data
node_parallel_ui -->|"renders and brushes"| node_parallel_engine
node_parallel_ui -->|"renders selected rows"| node_data_grid
node_analyst -->|"explores correlations"| node_scatter_view
node_scatter_prep -.->|"prepares matrix data"| node_scatter_view

click node_line_ui "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/main.js"
click node_line_constants "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/constants.js"
click node_daily_data "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/day-avg"
click node_monthly_data "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/month-avg"
click node_heatmap "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/circular-heat-map.js"
click node_scatter_prep "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/scatter-plot/read_csv_scatter_plot_matrix.py"
click node_scatter_view "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/scatter-plot"
click node_parallel_ui "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/main.js"
click node_parallel_constants "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/constants.js"
click node_parallel_engine "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/d3.parcoords.js"
click node_data_grid "https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/divgrid.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_line_ui,node_line_constants,node_heatmap toneBlue
class node_scatter_prep,node_scatter_view,node_parallel_ui,node_parallel_constants,node_parallel_engine,node_data_grid toneAmber
class node_daily_data,node_monthly_data toneMint
class node_analyst toneIndigo
```

## Components

### Historical trends

- [Trend explorer](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/main.js): `line-chart/main.js`
- [Station and trait options](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/constants.js): `line-chart/constants.js`
- [Circular heatmap](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/line-chart/circular-heat-map.js): `line-chart/circular-heat-map.js`

### Pollutant comparison

- [Scatter input preparation](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/scatter-plot/read_csv_scatter_plot_matrix.py): `scatter-plot/read_csv_scatter_plot_matrix.py`
- [Scatter plot matrix](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/scatter-plot): `scatter-plot`
- [Parallel-coordinate explorer](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/main.js): `parallel-coordinate/main.js`
- [Station and trait options](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/constants.js): `parallel-coordinate/constants.js`
- [Parallel-coordinate renderer](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/d3.parcoords.js): `parallel-coordinate/d3.parcoords.js`
- [Brushed data table](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/blob/master/parallel-coordinate/divgrid.js): `parallel-coordinate/divgrid.js`

### Air-quality data

- [Daily station averages](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/day-avg): `day-avg`
- [Monthly station averages](https://github.com/tsunglinleetony/visualization-project-air-pollution-data-analysis/tree/master/month-avg): `month-avg`

### Other components

- **Analyst**

## Connections

- Analyst → Trend explorer: selects station and pollutant (evidence: `README.md`)
- Trend explorer → Station and trait options: uses options (evidence: `line-chart/main.js`)
- Trend explorer → Daily station averages: reads daily CSV (evidence: `line-chart/main.js`)
- Trend explorer → Monthly station averages: reads monthly CSV (evidence: `line-chart/main.js`)
- Trend explorer → Circular heatmap: loads heatmap (evidence: `line-chart/circular-heat-map.js`)
- Circular heatmap → Trend explorer: requests focused period (evidence: `line-chart/circular-heat-map.js`)
- Analyst → Parallel-coordinate explorer: selects station and traits (evidence: `parallel-coordinate/main.js`)
- Parallel-coordinate explorer → Station and trait options: uses options (evidence: `parallel-coordinate/main.js`)
- Parallel-coordinate explorer → Monthly station averages: reads monthly CSV (evidence: `parallel-coordinate/main.js`)
- Parallel-coordinate explorer → Parallel-coordinate renderer: renders and brushes (evidence: `parallel-coordinate/main.js`)
- Parallel-coordinate explorer → Brushed data table: renders selected rows (evidence: `parallel-coordinate/main.js`)
- Analyst → Scatter plot matrix: explores correlations (evidence: `README.md`)
- Scatter input preparation → Scatter plot matrix: prepares matrix data