📘 Algorithms Visualized

Interactive visualizations for common computer science algorithms

---

🚀 Demo

Live Website

---

📂 Table of Contents

• Features
• Tech Stack
• Usage
• Graph Editor
• Graph Sequence Game
• Sorting Algorithm Visualization
• Future Features

---

🌟 Features

• Step-by-step visualization of sorting algorithms.
• Adjustable speed and input data.
• Clean and responsive UI.
• Interactive Graph Editor for creating and manipulating graphs.
• Game to practice graph degree sequence realizations.

---

🛠️ Tech Stack

• Frontend: HTML, CSS, JavaScript
• Visualization: SVG, D3.js
• Backend: JavaScript

---

🧑‍💻 Usage

1. Clone the repo:

   git clone https://github.com/oscar-jiang/silver-fishstick.git
   

2. Open home-page.html using live server

3. Select algorithms or tools from the sidebar

4. Interact with visualizations or play the degree sequence game

---

🖼️ Graph Editor

An interactive undirected graph editor built with JavaScript and D3.js.

• Draw mode: Click anywhere on the canvas to add nodes.
• Delete mode: Remove nodes or edges by clicking on them.
• Link mode: Connect nodes by selecting them sequentially to add edges.
• Drag and drop: Move nodes freely to reposition your graph visually.
• Reset canvas: Clear the entire graph and start fresh.

---

🎲 Graph Sequence Game

Test your understanding of graph degree sequences with an interactive game based on the Havel-Hakimi algorithm.

• Create and manipulate graphs by adding nodes and linking them with edges.
• Move nodes freely to organize your graph visually.
• Multiple levels ranging from beginner to advanced challenges to practice your skills.
• Use the Havel-Hakimi Algorithm button to automatically verify if a given degree sequence can form a simple undirected graph.
• Interactive controls and clear status indicators guide you through the gameplay.
• Learn how the algorithm works by experimenting with graph sequences.

---

🧮 Sorting Algorithm Visualization

Explore and interact with multiple sorting algorithms.

• Choose from popular sorting algorithms like Bubble Sort, Merge Sort, Quick Sort, and Selection Sort.
• Generate random arrays of variable sizes (10 to 300 items) to sort.
• Adjust the playback speed to see the sorting process at your preferred pace.
• Visual feedback includes array elements displayed as bars with live updates during sorting.
• Intuitive controls for play, and generating new arrays.
• Responsive and clean UI powered by D3.js for smooth visualizations.

This tool helps users understand how sorting algorithms work internally by watching step-by-step movements and comparisons.

---

🚧 Future Features

• Enhance animations for sorting algorithms to be smoother.

• Add visualizations for graph traversal algorithms such as DFS (Depth-First Search) and BFS (Breadth-First Search).

• Implement interactive visualizations for Dijkstra’s shortest path algorithm.

• Support weighted and directed graphs.