🎯 AlgoViz

A beautiful, interactive visualization platform for understanding sorting algorithms

Live Demo • Documentation • Contributing • Report Bug • Request Feature

✨ Features

🔄 Interactive Sorting Visualizations

• Merge Sort: Divide-and-conquer algorithm visualization with O(n log n) complexity
• Insertion Sort: Step-by-step visualization of building sorted arrays
• Bubble Sort: Interactive demonstration of adjacent element comparisons

🎨 Visual Learning Experience

• Real-time animation of sorting processes
• Color-coded elements for better understanding
• Step-by-step breakdown of each algorithm
• Comparison and swapping animations

🚀 Coming Soon

• Selection Sort visualization
• Quick Sort implementation
• More algorithm animations

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript
• Animations: GSAP (GreenSock Animation Platform)
• Styling: Custom CSS with responsive design
• Fonts: Google Fonts (Fugaz One, Open Sans)

🚀 Getting Started

Prerequisites

• Modern web browser
• Code editor (VS Code recommended)

Installation

1. Clone the repository

git clone https://github.com/harshavardhan-md/algoviz.git

2. Navigate to project directory

cd algoviz

3. Open index.html in your browser or use a local server

# Using Python
python -m http.server 8000

💡 Usage

1. Select Algorithm: Choose from available sorting algorithms

2. Input Numbers:

   • Enter numbers manually
   • Use "Randomize" button for random values
   • Clear input with "Clear" button

3. Start Visualization:

   • Click "Start" to begin the sorting process
   • Watch the step-by-step animation
   • Observe comparisons and swaps in real-time

🏗️ Project Structure

algoviz/
├── index.html          # Main entry point
├── main.css           # Styling
├── scripts/
│   └── mergeSort.js   # Sorting algorithms
├── assets/            # Images and icons
└── README.md

🤝 Contributing

We love your input! We want to make contributing to AlgoViz as easy and transparent as possible. Please see our Contributing Guidelines for details.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👥 Team

Harshavardhan M	GURUNATH REDDY N A
JITHENDRA S S	GULNISHAT K

📝 License

Distributed under the MIT License. See LICENSE for more information.

🙏 Acknowledgments

• GSAP for amazing animation capabilities
• Google Fonts for typography
• All our contributors and supporters

---

Made with ❤️ by the AlgoViz Team

⬆ Back to Top