Bubble Sort Visualization

https://atv23.github.io/Bubble-Sort-Visualisation/

Overview

This project offers a visual representation of the Bubble Sort algorithm, created during my second year of university as part of my exploration into data structures and algorithms (DSA) and learning JavaScript. Aimed at those beginning their journey in computer science, this interactive visualization demystifies the Bubble Sort process through a step-by-step demonstration of array element comparison, swapping, and sorting.

Personal Journey

This visualization project was developed while I was in my second year, diving deep into the fundamentals of DSA and picking up JavaScript along the way. It reflects my learning process, showcasing how theoretical knowledge of algorithms can be applied and visualized in practice using programming.

Features

• Dynamic Array Generation: Allows for the creation of customizable arrays to visualize how Bubble Sort handles different datasets.
• Interactive Controls: Facilitates engagement with the sorting process, including starting, resetting, and generating new arrays for sorting.
• Step-by-Step Visualization: Enhances understanding by highlighting comparisons and swaps through color changes, making the sorting algorithm easy to follow.

How to Use

1. Generate Array: Initiate by clicking "Generate Array" and input the array's size and individual values as prompted.
2. Start Sorting: Click "Start Sorting" to begin the visualization. Observe as the algorithm methodically sorts the array.
3. Reset Array: To revert the array back to its initial state, click "Reset Array."
4. Generate New Array: At any point, you can create a new array by selecting "Generate Array" again and entering new values.

Running the Project

To engage with the Bubble Sort visualization:

1. Download the index.html file.
2. Open it in any modern web browser that supports JavaScript and CSS3.
3. Interact with the visualization through the provided buttons and prompts.

Technical Details

• The project is built using HTML for structure, CSS for styling, and JavaScript for the sorting logic and animations.
• It's designed to be accessible and understandable, even for those new to sorting algorithms or JavaScript.
• The visualization runs smoothly in web browsers that support JavaScript and CSS transitions.

Contributions

I welcome feedback, suggestions, and contributions from those who are also on their journey in learning programming and DSA. Feel free to fork the repository, make improvements, and submit a pull request.