Mini-JavaScript-Projects/visualizers/index.html at main · AmanSinghNp/Mini-JavaScript-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Structure Visualisers</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="shared.css" />
  </head>
  <body>
    <nav class="app-nav">
      <div class="nav-inner">
        <a class="brand" href="./index.html">DS Visualisers</a>
        <div class="links">
          <a class="link" href="./Sorting Visualiser/index.html">Sorting</a>
          <a class="link" href="./Stack Visualiser/index.html">Stack</a>
          <a class="link" href="./Queue Visualiser/index.html">Queue</a>
          <a class="link" href="./Graph Visualiser/index.html">Graph</a>
          <a class="link" href="./BST Visualiser/index.html">BST</a>
        </div>
      </div>
    </nav>

    <main class="app-shell">
      <header style="margin-bottom: 18px;">
        <p class="pill">Interactive Playground</p>
        <h1 style="margin: 8px 0 6px; font-size: 1.8rem;">
          Data Structure Visualisers
        </h1>
        <p style="color: #475569; max-width: 720px;">
          Explore core data structures with consistent controls, quick status readouts,
          and cross-links. Built with clean, vanilla JavaScript.
        </p>
      </header>

      <div class="category-section">
        <h2 class="category-title">Linear Structures</h2>
        <section class="hub-grid">
          <a class="hub-card" href="./Stack Visualiser/index.html">
            <h3>Stack</h3>
            <p>LIFO (Last-In First-Out) operations.</p>
          </a>
          <a class="hub-card" href="./Queue Visualiser/index.html">
            <h3>Queue</h3>
            <p>FIFO (First-In First-Out) operations.</p>
          </a>
          <a class="hub-card" href="./Deque Visualiser/index.html">
            <h3>Deque</h3>
            <p>Double-ended queue (insert/remove at both ends).</p>
          </a>
          <a class="hub-card" href="./Linked List Visualiser/index.html">
            <h3>Linked List</h3>
            <p>Singly linked list node traversal.</p>
          </a>
          <a class="hub-card" href="./Priority Queue Visualiser/index.html">
            <h3>Priority Queue</h3>
            <p>Queue ordered by priority value.</p>
          </a>
        </section>
      </div>

      <div class="category-section">
        <h2 class="category-title">Trees</h2>
        <section class="hub-grid">
          <a class="hub-card" href="./BST Visualiser/index.html">
            <h3>BST</h3>
            <p>Standard Binary Search Tree.</p>
          </a>
          <a class="hub-card" href="./AVL Tree Visualiser/index.html">
            <h3>AVL Tree</h3>
            <p>Self-balancing BST with rotations.</p>
          </a>
          <a class="hub-card" href="./Red-Black Tree Visualiser/index.html">
            <h3>Red-Black Tree</h3>
            <p>Balanced tree with color properties.</p>
          </a>
          <a class="hub-card" href="./B-Tree Visualiser/index.html">
            <h3>B-Tree</h3>
            <p>Multi-way search tree (Degree 3).</p>
          </a>
          <a class="hub-card" href="./Heap Visualiser/index.html">
            <h3>Min-Heap</h3>
            <p>Binary Heap array representation.</p>
          </a>
          <a class="hub-card" href="./Trie Visualiser/index.html">
            <h3>Trie</h3>
            <p>Prefix tree for string storage.</p>
          </a>
          <a class="hub-card" href="./Segment Tree Visualiser/index.html">
            <h3>Segment Tree</h3>
            <p>Range queries (Sum) on an array.</p>
          </a>
          <a class="hub-card" href="./Fenwick Tree Visualiser/index.html">
            <h3>Fenwick Tree</h3>
            <p>Binary Indexed Tree for prefix sums.</p>
          </a>
          <a class="hub-card" href="./Disjoint Set Visualiser/index.html">
            <h3>Disjoint Set</h3>
            <p>Union-Find with path compression.</p>
          </a>
        </section>
      </div>

      <div class="category-section">
        <h2 class="category-title">Algorithms</h2>
        <section class="hub-grid">
          <a class="hub-card" href="./Sorting Visualiser/index.html">
            <h3>Sorting</h3>
            <p>Bubble, Selection, Insertion Sort.</p>
          </a>
          <a class="hub-card" href="./Graph Visualiser/index.html">
            <h3>Graph Traversal</h3>
            <p>BFS and DFS on custom graphs.</p>
          </a>
          <a class="hub-card" href="./Pathfinding Visualiser/index.html">
            <h3>Pathfinding</h3>
            <p>Dijkstra and A* on a grid.</p>
          </a>
          <a class="hub-card" href="./Backtracking Visualiser/index.html">
            <h3>Backtracking</h3>
            <p>N-Queens Problem solver.</p>
          </a>
          <a class="hub-card" href="./DP Visualiser/index.html">
            <h3>Dynamic Programming</h3>
            <p>0/1 Knapsack Problem table.</p>
          </a>
          <a class="hub-card" href="./String Matching Visualiser/index.html">
            <h3>String Matching</h3>
            <p>KMP Algorithm with LPS table.</p>
          </a>
          <a class="hub-card" href="./Recursion Tree Visualiser/index.html">
            <h3>Recursion Tree</h3>
            <p>Call stack visualization (Fibonacci).</p>
          </a>
          <a class="hub-card" href="./Hash Table Visualiser/index.html">
            <h3>Hash Table</h3>
            <p>Collision handling via chaining.</p>
          </a>
          <a class="hub-card" href="./Convex Hull Visualiser/index.html">
            <h3>Convex Hull</h3>
            <p>Graham Scan algorithm visualization.</p>
          </a>
          <a class="hub-card" href="./LRU Cache Visualiser/index.html">
            <h3>LRU Cache</h3>
            <p>Doubly linked list + hash map.</p>
          </a>
          <a class="hub-card" href="./Binary Search Visualiser/index.html">
            <h3>Binary Search</h3>
            <p>Divide-and-conquer search algorithm.</p>
          </a>
        </section>
      </div>

      <p class="footer-note">
        Tip: Use the top nav to jump between major categories quickly.
      </p>
    </main>
  </body>
</html>