# aamir-azeez/ghgscape architecture

> Architecture diagram of the GitHub repository aamir-azeez/ghgscape, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aamir-azeez/ghgscape
- Repository: https://github.com/aamir-azeez/ghgscape

## Overview

GHGScape is a browser-based tool for comparing natural and human-caused greenhouse-gas emissions on an interactive 3D Earth. Users choose a dataset or tag, inspect its geographic pattern by rotating and zooming the globe, and consult accompanying dataset information and legends. The documented dataset catalog includes emissions, carbon fluxes, sinks, methane, and population density. The source excerpts are partial, so the graph shows only the visible tile-loading and rendering connections; other UI wiring is inferred only where described by the README.

Main entry points: [`ghgscape-logic.js`](https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape-logic.js) (App logic), [`ghgscape.html`](https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape.html) (App controls), [`modules/globe.gl.js`](https://github.com/aamir-azeez/ghgscape/blob/main/modules/globe.gl.js) (Globe renderer), [`modules/three.module.js`](https://github.com/aamir-azeez/ghgscape/blob/main/modules/three.module.js) (3D engine)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_webui["App controls<br/>[ghgscape.html]"]
  node_legends["Map legends<br/>[map-legends.css]"]
end

subgraph group_mapping["Globe visualization"]
  node_logic["App logic<br/>[ghgscape-logic.js]"]
  node_globe["Globe renderer<br/>[globe.gl.js]"]
  node_three["3D engine<br/>[three.module.js]"]
  node_earth["Earth texture"]
end

subgraph group_data["Emission data"]
  node_catalog["Dataset catalog<br/>[ghgscape-logic.js]"]
  node_tiles[("NASA raster tiles")]
end

node_user(("Viewer"))

node_user -->|"selects and explores"| node_webui
node_webui -->|"controls"| node_logic
node_logic -->|"selects dataset"| node_catalog
node_logic -->|"requests tiles"| node_tiles
node_tiles -->|"returns tiles"| node_logic
node_logic -->|"sets tile data"| node_globe
node_logic -->|"creates tile materials"| node_three
node_globe -->|"renders with"| node_three
node_logic -->|"loads texture"| node_earth
node_logic -->|"updates dataset details"| node_webui
node_webui -->|"styles legends"| node_legends

click node_webui "https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape.html"
click node_legends "https://github.com/aamir-azeez/ghgscape/blob/main/map-legends.css"
click node_logic "https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape-logic.js"
click node_globe "https://github.com/aamir-azeez/ghgscape/blob/main/modules/globe.gl.js"
click node_three "https://github.com/aamir-azeez/ghgscape/blob/main/modules/three.module.js"
click node_catalog "https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape-logic.js"
click node_earth "https://github.com/aamir-azeez/ghgscape/tree/main/images"

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_webui,node_legends,node_user toneBlue
class node_logic,node_globe,node_three,node_earth toneAmber
class node_catalog,node_tiles toneMint
```

## Components

### User interface

- [App controls](https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape.html): `ghgscape.html`
- [Map legends](https://github.com/aamir-azeez/ghgscape/blob/main/map-legends.css): `map-legends.css`

### Globe visualization

- [App logic](https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape-logic.js): `ghgscape-logic.js`
- [Globe renderer](https://github.com/aamir-azeez/ghgscape/blob/main/modules/globe.gl.js): `modules/globe.gl.js`
- [3D engine](https://github.com/aamir-azeez/ghgscape/blob/main/modules/three.module.js): `modules/three.module.js`
- [Earth texture](https://github.com/aamir-azeez/ghgscape/tree/main/images): `images`

### Emission data

- [Dataset catalog](https://github.com/aamir-azeez/ghgscape/blob/main/ghgscape-logic.js): `ghgscape-logic.js`
- **NASA raster tiles**

### Other components

- **Viewer**

## Connections

- Viewer → App controls: selects and explores
- App controls → App logic: controls
- App logic → Dataset catalog: selects dataset
- App logic → NASA raster tiles: requests tiles
- NASA raster tiles → App logic: returns tiles
- App logic → Globe renderer: sets tile data
- App logic → 3D engine: creates tile materials
- Globe renderer → 3D engine: renders with
- App logic → Earth texture: loads texture
- App logic → App controls: updates dataset details
- App controls → Map legends: styles legends