Welcome to SortViz! This is a powerful, interactive educational tool designed to help visualize and understand a wide range of sorting algorithms. From the basic Bubble Sort to the more complex Heap Sort, this application provides a clear, step-by-step animation of how each algorithm operates on a given dataset.
I built this project to create a comprehensive and user-friendly platform for learning and comparing different sorting methods. The goal was to build a tool that is not only functional for demonstrating algorithms but also packed with features to allow for deep exploration and customization.
Here are some of the cool things this project can do:
- Seven Sorting Algorithms: Visualize Bubble, Insertion, Selection, Merge, Shell, Quick, and Heap Sort.
- Customizable Data: Input your own numbers or use the built-in generators to create random, nearly sorted, reverse sorted, or arrays with few unique values.
- Adjustable Array Size & Speed: Fine-tune the visualization by changing the size of the array (10-100) and the animation speed.
- In-Depth Algorithm Info: Click the info button next to any algorithm to open a modal with its time/space complexity, a detailed description, and common use cases.
- Fullscreen Mode: Expand the visualizer to fill the screen for a more immersive learning experience.
- Dynamic Light/Dark Theme: A sleek theme toggle that adapts to your preference and saves your choice.
- Responsive Design: A clean and modern interface that works beautifully on any device.
Getting this project up and running is as simple as it gets. No complex builds or dependencies needed!
-
Clone the repository
git clone [https://github.com/cikeyz/sort-viz.git](https://github.com/cikeyz/sort-viz.git) cd sort-viz -
Open in your browser
- Simply open the
index.htmlfile in any modern web browser.
- Simply open the
And that's it! You're ready to start visualizing.
Using the visualizer is intuitive and interactive:
- To Generate an Array: Use the "Array Size" slider or click one of the four generation buttons (e.g., "Random", "Nearly Sorted") to create a dataset.
- To Sort: Click on any of the algorithm buttons on the right panel (e.g., "Bubble Sort", "Quick Sort") to start the animation.
- To Learn More: Click the "i" icon next to any algorithm to learn about its properties and use cases.
- To Control the Animation: Use the "Animation Speed" slider to speed up or slow down the visualization. Click "Stop" to halt the current sorting process.
This project was built with a focus on fundamentals and a clean, vanilla implementation.
- Frontend: HTML5, CSS3, and modern JavaScript (ES6+)
- Core Logic: A
SortingVisualizerclass that manages the UI, canvas rendering, and the implementation of all seven sorting algorithms. - Rendering: HTML5 Canvas API for drawing and animating the bars.
- Styling: Custom CSS variables for dynamic theming and a responsive layout.
- Storage: Browser LocalStorage for persisting the user's theme preference.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Found a bug? Don't worry, we all create them. Just open an issue and I'll take a look!
This project is distributed under the MIT License. See the LICENSE file for more information. It's pretty permissive, so you can do almost anything you want with it.
Carl Kristian (CK) Ortiz
- GitHub: @cikeyz
- LinkedIn: ck-ortiz
- Email: [email protected]