# serah73/proyecto-visualizaciondedatos architecture

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

- Interactive diagram: https://gitdiagram.com/serah73/proyecto-visualizaciondedatos
- Repository: https://github.com/serah73/proyecto-visualizaciondedatos

## Overview

El repositorio parece ser una página web interactiva de visualización, inspirada conceptualmente en un dashboard de cancelaciones. El fragmento disponible muestra navegación por secciones, progreso de desplazamiento y activación de gráficos al cambiar de sección; también contiene datos de gráficos con etiquetas emocionales. El código no muestreado limita la identificación de otras capacidades y de la estructura concreta de esos gráficos.

Main entry points: [`index.html`](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/index.html) (Página interactiva), [`scripts.js`](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js) (Progreso scroll), [`styles.css`](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/styles.css) (Estilos visuales)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navegación"]
  node_page["Página interactiva<br/>[index.html]"]
  node_scroll["Progreso scroll<br/>[scripts.js]"]
  node_section_nav["Navegación secciones<br/>[scripts.js]"]
  node_styles["Estilos visuales<br/>[styles.css]"]
end

subgraph group_visualization["Visualización"]
  node_active_section["Sección activa<br/>[scripts.js]"]
  node_charts["Gráficos y datos<br/>[scripts.js]"]
end

node_visitor(("Visitante"))

node_visitor -.->|"explora"| node_page
node_page -.->|"inicia"| node_scroll
node_scroll -->|"actualiza progreso"| node_page
node_page -->|"recibe clics"| node_section_nav
node_section_nav -.->|"desplaza secciones"| node_page
node_scroll -->|"detecta sección"| node_active_section
node_active_section -->|"activa gráfico"| node_charts
node_active_section -->|"actualiza indicador"| node_section_nav
node_styles -.->|"da estilo"| node_page

click node_page "https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/index.html"
click node_scroll "https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js"
click node_section_nav "https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js"
click node_active_section "https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js"
click node_charts "https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js"
click node_styles "https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/styles.css"

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_page,node_scroll,node_section_nav,node_styles toneBlue
class node_active_section,node_charts toneAmber
class node_visitor toneIndigo
```

## Components

### Navegación

- [Página interactiva](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/index.html): `index.html`
- [Progreso scroll](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js): `scripts.js`
- [Navegación secciones](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js): `scripts.js`
- [Estilos visuales](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/styles.css): `styles.css`

### Visualización

- [Sección activa](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js): `scripts.js`
- [Gráficos y datos](https://github.com/serah73/proyecto-visualizaciondedatos/blob/main/scripts.js): `scripts.js`

### Other components

- **Visitante**

## Connections

- Visitante → Página interactiva: explora
- Página interactiva → Progreso scroll: inicia
- Progreso scroll → Página interactiva: actualiza progreso (evidence: `scripts.js`)
- Página interactiva → Navegación secciones: recibe clics (evidence: `scripts.js`)
- Navegación secciones → Página interactiva: desplaza secciones
- Progreso scroll → Sección activa: detecta sección (evidence: `scripts.js`)
- Sección activa → Gráficos y datos: activa gráfico (evidence: `scripts.js`)
- Sección activa → Navegación secciones: actualiza indicador (evidence: `scripts.js`)
- Estilos visuales → Página interactiva: da estilo