Usual Sort Algorithm

Frontend implementation of common sorting algorithms, including examples, performance metrics, implementation ideas, and algorithm visualization

🌐 Online Demo | 📖 Algorithm Details

---

✨ Features

• 🎯 10+ Sorting Algorithms: Covers classic algorithms including bubble sort, quick sort, selection sort, insertion sort, shell sort, merge sort, heap sort, counting sort, bucket sort, and radix sort
• 📊 Performance Testing: Real-time display of algorithm execution time, supports different data scales (20, 5000, 10000, 50000)
• 🎨 Algorithm Visualization: Each algorithm comes with GIF animation demonstrations for intuitive understanding of the execution process
• 💡 Implementation Ideas: Detailed explanation of the core concepts and implementation steps for each algorithm
• 🔍 Array Deduplication: Provides 3 different array deduplication implementation methods
• 🚀 Zero Dependencies: Pure vanilla JavaScript implementation, no frameworks or libraries required

---

🚀 Quick Start

Method 1: Direct Online Demo

Visit the online demo to experience it directly.

Method 2: Local Development

1. Clone the repository

   git clone https://github.com/clayz/usualSortAlgorithm.git
   cd usualSortAlgorithm

2. Start a local server (Python recommended)

   # Python 3
   python -m http.server 8000
   
   # Or use Python 2
   python -m SimpleHTTPServer 8000

3. Open in browser Visit http://localhost:8000/index.html

---

📖 Supported Sorting Algorithms

Basic Sorting Algorithms

Algorithm	Time Complexity	Space Complexity	Stability	Description
Bubble Sort	O(n²)	O(1)	✅ Stable	Compare and swap adjacent elements
Bubble Sort (Optimized)	O(n²)	O(1)	✅ Stable	Uses flag to mark early termination
Selection Sort	O(n²)	O(1)	❌ Unstable	Selects minimum element each time
Insertion Sort	O(n²)	O(1)	✅ Stable	Suitable for small-scale or nearly sorted data

Efficient Sorting Algorithms

Algorithm	Time Complexity	Space Complexity	Stability	Description
Quick Sort	O(n log n)	O(log n)	❌ Unstable	Divide and conquer, most widely used in practice
Merge Sort	O(n log n)	O(n)	✅ Stable	Divide and conquer, preferred for stable sorting
Heap Sort	O(n log n)	O(1)	❌ Unstable	Utilizes heap data structure
Shell Sort	O(n^1.3)	O(1)	❌ Unstable	Improved version of insertion sort

Special Sorting Algorithms

Algorithm	Time Complexity	Space Complexity	Stability	Description
Counting Sort	O(n + k)	O(k)	✅ Stable	Suitable for integers with small range
Bucket Sort	O(n + k)	O(n + k)	✅ Stable	Efficient when data is uniformly distributed
Radix Sort	O(d(n + k))	O(n + k)	✅ Stable	Sorts by digits, suitable for integers

Array Deduplication Methods

• Temporary Array Method: Uses indexOf to check if element already exists
• HashMap Method: Leverages object property uniqueness
• IndexOf Method: Determines first occurrence through position index

---

🛠️ Tech Stack

• Frontend Framework: Vanilla JavaScript (ES5+)
• UI Framework: Material Design Lite
• Styling: CSS3
• Visualization: GIF animations (Source: Visualgo.net)

---

📸 Screenshots

Main Interface

The project provides an intuitive interactive interface that supports:

• Generate random arrays of different scales
• Select different sorting algorithms
• View sorting results and execution time in real-time
• View algorithm visualization animations
• Learn algorithm implementation ideas

Algorithm Visualization Examples

Bubble Sort

Quick Sort

Merge Sort

Visit the online demo for more visualization animations

---

📚 Learning Value

Why Learn Sorting Algorithms?

1. Algorithm Fundamentals: Sorting is one of the most fundamental problems in computer science
2. Interview Essential: Common topic in technical interviews at major companies
3. Performance Optimization: Understand the appropriate scenarios for different algorithms to optimize real-world projects
4. Thinking Training: Develop algorithmic thinking and problem-solving skills

Project Highlights

• ✅ Visual Learning: Intuitively understand algorithm execution through GIF animations
• ✅ Performance Comparison: Real-time testing of different algorithms' performance at various data scales
• ✅ Code Implementation: Complete JavaScript implementation for each algorithm
• ✅ Idea Explanation: Detailed explanation of core concepts and steps for each algorithm

---

📊 Performance Testing

The project supports performance testing on arrays of different scales:

• Small Scale (20 elements): Suitable for observing algorithm execution process
• Medium Scale (5000 elements): Test basic algorithm performance
• Large Scale (10000, 50000 elements): Compare algorithm performance on large datasets

⚠️ Note: Large-scale data testing may take a long time, please be patient.

---

📁 Project Structure

usualSortAlgorithm/
├── index.html          # Main page
├── css/
│   └── algorithm.css   # Stylesheet
├── js/
│   ├── algorithm.js    # Sorting algorithm implementations
│   └── algorithm-idea.js # Algorithm idea explanations
├── img/                # Algorithm visualization GIF images
├── stylesheets/        # Third-party stylesheets
└── README.md          # Project documentation

---

🤝 Contributing

Issues and Pull Requests are welcome!

If you have new sorting algorithm implementations, performance optimization suggestions, or bug fixes, contributions are welcome.

---

📄 License

This project is licensed under the MIT License.

---

👤 Author

Clay

• GitHub: @clayz
• Online Demo: http://clayz.top/Algorithm/index.html

---

🙏 Acknowledgments

• Algorithm visualization GIFs source: Visualgo.net
• UI Framework: Material Design Lite

---

⭐ Star History

If this project is helpful to you, please give it a ⭐ Star!