PROJECT-IV
Sorting Visualizer
A PROJECT REPORT
Submitted By
Anurag Singh(21BCS7744)
Abhinav Prabhat(21BCS7368)
Utkarsh Gupta (21BCS7143)
Pratiksha Gupta (21BCS7086)
Akrit Gupta (21BCS7796)
In partial fulfillment for the award of
the degree of
Bachelor of Engineering
in
Computer Science and Engineering
Chandigarh University
JUL-DEC, 2024
DEPARTMENT OF COMPUTER SCIENCE
& ENGINEERING
CHANDIGARH UNIVERSITY GHARUAN,
MOHALI
BONAFIDE CERTIFICATE
Certified that this project report “Sorting Visualizer” is the bonafide work of “Anurag Singh,
Abhinav Prabhat, Utkarsh Gupta, Pratiksha Gupta, Akrit Gupta” who carried out the project
work under my/our supervision.
SIGNATURE SIGNATURE
HEAD OF THE DEPARTMENT SUPERVISOR
Submitted for the project viva-voce examination held on
INTERNAL EXAMINER EXTERNAL EXAMINER
TABLE OF CONTENTS
1. Introduction
2. Literature Review
3. Design Flow/Process
4. Implementation
5. Testing and Validation
6. Conclusion and Future Work
7. References
8. Appendix
ABSTRACT
The Sorting Visualizer is a tool developed to assist students in understanding sorting
algorithms through visual representation. By using animation and interactive elements, it
enables users to observe the steps involved in various sorting techniques, such as Bubble
Sort, Quick Sort, Merge Sort, and Insertion Sort. This project aims to fill the gap in
traditional teaching by providing a dynamic learning experience.
ACKNOWLEDGEMENTS
We would like to extend our gratitude to our project supervisor, faculty members, and peers
who provided support and guidance throughout the project. This project would not have
been possible without their encouragement and insights.
CHAPTER 1 - INTRODUCTION
1.1 Purpose
This project aims to enhance understanding of sorting algorithms by providing a visual,
interactive tool that allows users to observe and analyze the sorting processes in real time.
Sorting algorithms are fundamental concepts in computer science, and visualization can
help bridge the gap between theoretical knowledge and practical comprehension.
1.2 Identification of Problem
Understanding sorting algorithms is crucial in computer science, but students often find it
difficult to grasp the underlying processes. Without visual aids, it is challenging to observe
the dynamic steps involved in sorting.
1.3 Significance of the Project
The Sorting Visualizer addresses this gap, providing students and educators a resource to
observe each sorting algorithm’s mechanics, allowing for interactive and self-paced
learning.
CHAPTER 2 - LITERATURE REVIEW
2.1 Background of Sorting Algorithms
Sorting algorithms are essential in data processing and computer science education, with
origins dating back to the 1960s. Classic sorting algorithms like Bubble Sort, Merge Sort,
and Quick Sort have been developed to enhance computational efficiency in handling data.
2.2 Educational Tools for Algorithm Visualization
Interactive visual tools for algorithms are widely recognized for their educational value.
Studies have shown that students who engage with visual tools demonstrate higher
retention and understanding of complex algorithmic concepts.
2.3 Analysis of Existing Solutions
Many existing tools offer sorting algorithm visualizations but lack real-time customization
and user interaction. The Sorting Visualizer aims to fill these gaps by offering a more
comprehensive tool that is both accessible and user-friendly.
CHAPTER 3 - DESIGN FLOW AND PROCESS
3.1 Feature Selection and Specification
Key features include algorithm selection, customizable data sets, real-time animations, and
user-controlled speed. These features were chosen to make the tool engaging and
informative.
3.2 System Architecture
The system uses React.js for frontend visualizations and JavaScript for algorithm logic. The
architecture supports scalability and performance optimization across web platforms.
3.3 UI/UX Design
The interface was developed with a focus on ease of use. Users can select algorithms, input
data, and observe animations. Controls are intuitive, allowing adjustment of speed,
pause/play, and reset functions.
CHAPTER 4 - IMPLEMENTATION
4.1 Algorithm Implementation
Sorting algorithms were implemented to support both visual representation and
educational commentary. For instance, Bubble Sort animations emphasize swaps and
comparisons, while Merge Sort displays recursive divisions.
4.2 Frontend and Backend Development
React.js powers the frontend to render animations, while JavaScript handles algorithmic
logic. Each sorting step is rendered in real-time, providing users with a smooth experience.
