# knight-l/sc-datav architecture

> Architecture diagram of the GitHub repository knight-l/sc-datav, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/knight-l/sc-datav
- Repository: https://github.com/knight-l/sc-datav

## Overview

This is a React/Three.js data-visualization dashboard with a gallery landing page and four distinct dashboard demos. The main user flow is to select a demo from the landing page, view its map and dashboard panels, and interact with map or display controls. Source excerpts verify routing, Demo0 composition, Demo2 map composition, and shared chart behavior; some Demo1/Demo3 internals are represented at directory level because their wiring was not sampled.

Main entry points: [`src/App.tsx`](https://github.com/knight-l/sc-datav/blob/main/src/App.tsx) (Route selection), [`src/pages/Index/index.tsx`](https://github.com/knight-l/sc-datav/blob/main/src/pages/Index/index.tsx) (Demo gallery), [`src/components/seamVirtualScroll.tsx`](https://github.com/knight-l/sc-datav/blob/main/src/components/seamVirtualScroll.tsx) (Virtual data scroll), [`src/pages/Demo0/demo.tsx`](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/demo.tsx) (Demo0 dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application flow"]
  node_router["Route selection<br/>[App.tsx]"]
  node_gallery["Demo gallery<br/>[index.tsx]"]
  node_gallerybg["Gallery backdrop<br/>[bg.tsx]"]
end

subgraph group_shared["Shared UI"]
  node_autofit["Responsive sizing<br/>[autoFit.tsx]"]
  node_chart["ECharts renderer<br/>[chart.tsx]"]
  node_scroll["Virtual data scroll"]
  node_raf["Animation frame hook"]
  node_size["Element size hook<br/>[useSize.ts]"]
end

subgraph group_demo0["Demo0 dashboard"]
  node_demo0["Demo0 dashboard<br/>[demo.tsx]"]
  node_map0["3D map scene<br/>[index.tsx]"]
  node_map0layers["Map layers"]
  node_panel0["Charts and controls<br/>[index.tsx]"]
  node_charts0["Dashboard charts"]
end

subgraph group_demo1["Demo1 dashboard"]
  node_demo1["Demo1 dashboard<br/>[demo.tsx]"]
  node_map1["3D city map"]
  node_panel1["Dashboard panels<br/>[index.tsx]"]
  node_panel1parts["Charts and framing"]
end

subgraph group_demo23["Demo2 and 3"]
  node_demo2["Demo2 dashboard<br/>[demo.tsx]"]
  node_map2["3D map scene<br/>[base.tsx]"]
  node_map2layers["Map effects"]
  node_panel2["Dashboard panels"]
  node_demo3["Demo3 scene<br/>[demo.tsx]"]
  node_model3["3D model<br/>[model.tsx]"]
end

node_visitor(("Dashboard viewer"))

node_visitor -->|"opens"| node_gallery
node_gallery -->|"navigates to"| node_router
node_router -->|"routes to"| node_gallery
node_router -->|"routes to"| node_demo0
node_router -->|"routes to"| node_demo1
node_router -->|"routes to"| node_demo2
node_router -->|"routes to"| node_demo3
node_gallery -->|"renders"| node_gallerybg
node_demo0 -->|"renders"| node_map0
node_demo0 -->|"renders"| node_panel0
node_map0 -->|"assembles"| node_map0layers
node_panel0 -->|"renders"| node_charts0
node_charts0 -->|"uses"| node_chart
node_charts0 -->|"uses"| node_scroll
node_panel0 -->|"sizes with"| node_autofit
node_demo1 -.->|"renders"| node_map1
node_demo1 -.->|"renders"| node_panel1
node_panel1 -->|"renders"| node_panel1parts
node_panel1 -->|"sizes with"| node_autofit
node_panel2 -.->|"uses"| node_chart
node_map2 -->|"assembles"| node_map2layers
node_demo2 -.->|"renders"| node_map2
node_demo2 -.->|"renders"| node_panel2
node_demo3 -->|"renders"| node_model3
node_chart -->|"measures"| node_size
node_scroll -->|"measures"| node_size
node_scroll -->|"animates with"| node_raf

click node_router "https://github.com/knight-l/sc-datav/blob/main/src/App.tsx"
click node_gallery "https://github.com/knight-l/sc-datav/blob/main/src/pages/Index/index.tsx"
click node_gallerybg "https://github.com/knight-l/sc-datav/blob/main/src/pages/Index/bg.tsx"
click node_autofit "https://github.com/knight-l/sc-datav/blob/main/src/components/autoFit.tsx"
click node_chart "https://github.com/knight-l/sc-datav/blob/main/src/components/chart.tsx"
click node_scroll "https://github.com/knight-l/sc-datav/blob/main/src/components/seamVirtualScroll.tsx"
click node_raf "https://github.com/knight-l/sc-datav/blob/main/src/hooks/useAnimationFrame.ts"
click node_size "https://github.com/knight-l/sc-datav/blob/main/src/hooks/useSize.ts"
click node_demo0 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/demo.tsx"
click node_map0 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/map/index.tsx"
click node_map0layers "https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo0/map"
click node_panel0 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/panel/index.tsx"
click node_charts0 "https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo0/panel"
click node_demo1 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo1/demo.tsx"
click node_map1 "https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo1/map"
click node_panel1 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo1/panel/index.tsx"
click node_panel1parts "https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo1/panel"
click node_demo2 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo2/demo.tsx"
click node_map2 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo2/map/base.tsx"
click node_map2layers "https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo2/map"
click node_panel2 "https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo2/panel"
click node_demo3 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo3/demo.tsx"
click node_model3 "https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo3/model.tsx"

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_router,node_gallery,node_gallerybg,node_visitor toneBlue
class node_autofit,node_chart,node_scroll,node_raf,node_size toneAmber
class node_demo0,node_map0,node_map0layers,node_panel0,node_charts0 toneMint
class node_demo1,node_map1,node_panel1,node_panel1parts toneRose
class node_demo2,node_map2,node_map2layers,node_panel2,node_demo3,node_model3 toneIndigo
```

## Components

### Application flow

- [Route selection](https://github.com/knight-l/sc-datav/blob/main/src/App.tsx): `src/App.tsx`
- [Demo gallery](https://github.com/knight-l/sc-datav/blob/main/src/pages/Index/index.tsx): `src/pages/Index/index.tsx`
- [Gallery backdrop](https://github.com/knight-l/sc-datav/blob/main/src/pages/Index/bg.tsx): `src/pages/Index/bg.tsx`

### Shared UI

- [Responsive sizing](https://github.com/knight-l/sc-datav/blob/main/src/components/autoFit.tsx): `src/components/autoFit.tsx`
- [ECharts renderer](https://github.com/knight-l/sc-datav/blob/main/src/components/chart.tsx): `src/components/chart.tsx`
- [Virtual data scroll](https://github.com/knight-l/sc-datav/blob/main/src/components/seamVirtualScroll.tsx): `src/components/seamVirtualScroll.tsx`
- [Animation frame hook](https://github.com/knight-l/sc-datav/blob/main/src/hooks/useAnimationFrame.ts): `src/hooks/useAnimationFrame.ts`
- [Element size hook](https://github.com/knight-l/sc-datav/blob/main/src/hooks/useSize.ts): `src/hooks/useSize.ts`

### Demo0 dashboard

- [Demo0 dashboard](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/demo.tsx): `src/pages/Demo0/demo.tsx`
- [3D map scene](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/map/index.tsx): `src/pages/Demo0/map/index.tsx`
- [Map layers](https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo0/map): `src/pages/Demo0/map`
- [Charts and controls](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo0/panel/index.tsx): `src/pages/Demo0/panel/index.tsx`
- [Dashboard charts](https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo0/panel): `src/pages/Demo0/panel`

### Demo1 dashboard

- [Demo1 dashboard](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo1/demo.tsx): `src/pages/Demo1/demo.tsx`
- [3D city map](https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo1/map): `src/pages/Demo1/map`
- [Dashboard panels](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo1/panel/index.tsx): `src/pages/Demo1/panel/index.tsx`
- [Charts and framing](https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo1/panel): `src/pages/Demo1/panel`

### Demo2 and 3

- [Demo2 dashboard](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo2/demo.tsx): `src/pages/Demo2/demo.tsx`
- [3D map scene](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo2/map/base.tsx): `src/pages/Demo2/map/base.tsx`
- [Map effects](https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo2/map): `src/pages/Demo2/map`
- [Dashboard panels](https://github.com/knight-l/sc-datav/tree/main/src/pages/Demo2/panel): `src/pages/Demo2/panel`
- [Demo3 scene](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo3/demo.tsx): `src/pages/Demo3/demo.tsx`
- [3D model](https://github.com/knight-l/sc-datav/blob/main/src/pages/Demo3/model.tsx): `src/pages/Demo3/model.tsx`

### Other components

- **Dashboard viewer**

## Connections

- Dashboard viewer → Demo gallery: opens
- Demo gallery → Route selection: navigates to (evidence: `src/pages/Index/index.tsx`)
- Route selection → Demo gallery: routes to (evidence: `src/App.tsx`)
- Route selection → Demo0 dashboard: routes to (evidence: `src/App.tsx`)
- Route selection → Demo1 dashboard: routes to (evidence: `src/App.tsx`)
- Route selection → Demo2 dashboard: routes to (evidence: `src/App.tsx`)
- Route selection → Demo3 scene: routes to (evidence: `src/App.tsx`)
- Demo gallery → Gallery backdrop: renders (evidence: `src/pages/Index/index.tsx`)
- Demo0 dashboard → 3D map scene: renders (evidence: `src/pages/Demo0/demo.tsx`)
- Demo0 dashboard → Charts and controls: renders (evidence: `src/pages/Demo0/demo.tsx`)
- 3D map scene → Map layers: assembles (evidence: `src/pages/Demo0/map/index.tsx`)
- Charts and controls → Dashboard charts: renders (evidence: `src/pages/Demo0/panel/index.tsx`)
- Dashboard charts → ECharts renderer: uses (evidence: `src/pages/Demo0/panel/chart1.tsx`)
- Dashboard charts → Virtual data scroll: uses (evidence: `src/pages/Demo0/panel/chart4.tsx`)
- Charts and controls → Responsive sizing: sizes with (evidence: `src/pages/Demo0/panel/index.tsx`)
- Demo1 dashboard → 3D city map: renders
- Demo1 dashboard → Dashboard panels: renders
- Dashboard panels → Charts and framing: renders (evidence: `src/pages/Demo1/panel/index.tsx`)
- Dashboard panels → Responsive sizing: sizes with (evidence: `src/pages/Demo1/panel/index.tsx`)
- Dashboard panels → ECharts renderer: uses
- 3D map scene → Map effects: assembles (evidence: `src/pages/Demo2/map/base.tsx`)
- Demo2 dashboard → 3D map scene: renders
- Demo2 dashboard → Dashboard panels: renders
- Demo3 scene → 3D model: renders (evidence: `src/pages/Demo3/demo.tsx`)
- ECharts renderer → Element size hook: measures (evidence: `src/components/chart.tsx`)
- Virtual data scroll → Element size hook: measures (evidence: `src/components/seamVirtualScroll.tsx`)
- Virtual data scroll → Animation frame hook: animates with (evidence: `src/components/seamVirtualScroll.tsx`)