# ayushdutta-ai/sorting-visualizer architecture

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

- Interactive diagram: https://gitdiagram.com/ayushdutta-ai/sorting-visualizer
- Repository: https://github.com/ayushdutta-ai/sorting-visualizer

## Overview

This is a browser-based sorting visualizer. Users generate a random array, choose a sorting algorithm, and watch the bars animate into sorted order while complexity figures update. The main script handles array generation and algorithm selection; each algorithm mutates shared array state and schedules visual updates through the visualization layer. The tree and sampled scripts support these runtime relationships, but the README is empty and the HTML was not sampled, so page details are limited to referenced controls and elements.

Main entry points: [`scripts/main.js`](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js) (Array and algorithm controls), [`scripts/visualizations.js`](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/visualizations.js) (Animation and speed), [`index.html`](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/index.html) (Complexity display), [`scripts/bubble_sort.js`](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/bubble_sort.js) (Bubble sort)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Interface and controls"]
  node_page["Visualizer page<br/>[index.html]"]
  node_controller["Array and algorithm controls<br/>[main.js]"]
  node_metrics["Complexity display<br/>[index.html]"]
end

subgraph group_algorithms["Sorting algorithms"]
  node_bubble["Bubble sort<br/>[bubble_sort.js]"]
  node_selection["Selection sort<br/>[selection_sort.js]"]
  node_insertion["Insertion sort<br/>[insertion_sort.js]"]
  node_merge["Merge sort<br/>[merge_sort.js]"]
  node_quick["Quick sort<br/>[quick_sort.js]"]
  node_heap["Heap sort<br/>[heap_sort.js]"]
end

subgraph group_visualization["Animation and state"]
  node_bars["Array bars<br/>[main.js]"]
  node_values["Array values<br/>[main.js]"]
  node_animator["Animation and speed<br/>[visualizations.js]"]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"provides controls"| node_controller
node_controller -->|"generates and updates"| node_values
node_controller -->|"creates bars"| node_bars
node_controller -->|"dispatches"| node_bubble
node_controller -->|"dispatches"| node_selection
node_controller -->|"dispatches"| node_insertion
node_controller -->|"dispatches"| node_merge
node_controller -->|"dispatches"| node_quick
node_controller -->|"dispatches"| node_heap
node_bubble -->|"mutates"| node_values
node_selection -->|"mutates"| node_values
node_insertion -->|"mutates"| node_values
node_merge -->|"mutates"| node_values
node_quick -->|"mutates"| node_values
node_heap -->|"mutates"| node_values
node_bubble -->|"schedules updates"| node_animator
node_selection -->|"schedules updates"| node_animator
node_insertion -->|"schedules updates"| node_animator
node_merge -->|"schedules updates"| node_animator
node_quick -->|"schedules updates"| node_animator
node_heap -->|"schedules updates"| node_animator
node_animator -->|"updates styles"| node_bars
node_animator -->|"reenables controls"| node_controller
node_bubble -->|"writes complexity"| node_metrics
node_selection -->|"writes complexity"| node_metrics
node_insertion -->|"writes complexity"| node_metrics
node_merge -->|"writes complexity"| node_metrics
node_quick -->|"writes complexity"| node_metrics
node_heap -->|"writes complexity"| node_metrics

click node_page "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/index.html"
click node_controller "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js"
click node_bars "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js"
click node_values "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js"
click node_bubble "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/bubble_sort.js"
click node_selection "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/selection_sort.js"
click node_insertion "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/insertion_sort.js"
click node_merge "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/merge_sort.js"
click node_quick "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/quick_sort.js"
click node_heap "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/heap_sort.js"
click node_animator "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/visualizations.js"
click node_metrics "https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/index.html"

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_controller,node_metrics,node_user toneBlue
class node_bubble,node_selection,node_insertion,node_merge,node_quick,node_heap toneAmber
class node_bars,node_values,node_animator toneMint
```

## Components

### Interface and controls

- [Visualizer page](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/index.html): `index.html`
- [Array and algorithm controls](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js): `scripts/main.js`
- [Complexity display](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/index.html): `index.html`

### Sorting algorithms

- [Bubble sort](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/bubble_sort.js): `scripts/bubble_sort.js`
- [Selection sort](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/selection_sort.js): `scripts/selection_sort.js`
- [Insertion sort](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/insertion_sort.js): `scripts/insertion_sort.js`
- [Merge sort](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/merge_sort.js): `scripts/merge_sort.js`
- [Quick sort](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/quick_sort.js): `scripts/quick_sort.js`
- [Heap sort](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/heap_sort.js): `scripts/heap_sort.js`

### Animation and state

- [Array bars](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js): `scripts/main.js`
- [Array values](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/main.js): `scripts/main.js`
- [Animation and speed](https://github.com/ayushdutta-ai/sorting-visualizer/blob/main/scripts/visualizations.js): `scripts/visualizations.js`

### Other components

- **User**

## Connections

- User → Visualizer page: uses
- Visualizer page → Array and algorithm controls: provides controls
- Array and algorithm controls → Array values: generates and updates
- Array and algorithm controls → Array bars: creates bars
- Array and algorithm controls → Bubble sort: dispatches
- Array and algorithm controls → Selection sort: dispatches
- Array and algorithm controls → Insertion sort: dispatches
- Array and algorithm controls → Merge sort: dispatches
- Array and algorithm controls → Quick sort: dispatches
- Array and algorithm controls → Heap sort: dispatches
- Bubble sort → Array values: mutates
- Selection sort → Array values: mutates
- Insertion sort → Array values: mutates
- Merge sort → Array values: mutates
- Quick sort → Array values: mutates
- Heap sort → Array values: mutates
- Bubble sort → Animation and speed: schedules updates
- Selection sort → Animation and speed: schedules updates
- Insertion sort → Animation and speed: schedules updates
- Merge sort → Animation and speed: schedules updates
- Quick sort → Animation and speed: schedules updates
- Heap sort → Animation and speed: schedules updates
- Animation and speed → Array bars: updates styles
- Animation and speed → Array and algorithm controls: reenables controls
- Bubble sort → Complexity display: writes complexity
- Selection sort → Complexity display: writes complexity
- Insertion sort → Complexity display: writes complexity
- Merge sort → Complexity display: writes complexity
- Quick sort → Complexity display: writes complexity
- Heap sort → Complexity display: writes complexity