SORTING ALGORITHM VISUALISER

A Project Report
Submitted in partial fulfillment of the
Requirements for the award of the Degree of

BACHELOR OF SCIENCE (INFORMATION

TECHNOLOGY)
By

Under the esteemed guidance of

Mr. Satyendra Pal

Professor & sayali vibhute

DEPARTMENT OF INFORMATION TECHNOLOGY

BGPS MUMBAI COLLEGE OF ARTS, COMMERCE, AND SCIENCE
(Affiliated to University of Mumbai)
MUMBAI, 400037
MAHARASHTRA
2024

BGPS MUMBAI COLLEGE OF ARTS, COMMERCE, AND SCIENCE

(Affiliated to University of Mumbai)
MUMBAI, MAHARASHTRA, 400037
DEPARTMENT OF INFORMATION TECHNOLOGY
 CERTIFICATE

This is to certify that the project entitled, ‘sorting algorithm visualizer’, is

bonafide work of ‘KRISHNA S. RAJBHAR & NIKHIL V. BHATKAR
bearing Seat.No: 24/IT-25 & 24/IT-06 submitted in partial fulfillmentof the
requirements for the award of degree of BACHELOR OF SCIENCE in
INFORMATION TECHNOLOGY from University of Mumbai.

Internal Guide Coordinator

External Examiner

Date: College Seal

 DECLARATION

I, KRISHNA RAJBHAR & NIKHIL BHATKAR , hereby declare that

the project entitled, “Sorting Algorithm Visualizer” submitted in the partial
fulfilment for the award of Bachelor of Science in INFORMATION
TECHNOLOGY during the academic year 2024- 2025 is my original work and
the project has not formed the basis for award of any degree, association,
fellowship or any other similar titles.

Signature of the Student:

Place:
Date:
 ABSTRACT

The abstract of the Sorting Algorithm Visualizer project outlines the core purpose
and functionality of the tool in a detailed manner. The visualizer is a web-based
application designed to provide real-time, interactive visual demonstrations of various
sorting algorithms such as Merge Sort, Bubble Sort, Heap Sort, and Quick Sort. By
offering an intuitive interface, the application allows users to select a specific algorithm,
control the speed of the sorting process, and closely observe how data elements are
compared, swapped, and arranged in each step of the algorithm.

The abstract emphasizes the educational value of the tool, highlighting how it
simplifies complex concepts in computer science by breaking down the algorithmic
operations into easily understandable visual representations. It also notes that the
platform is built using modern technologies like HTML, CSS, JavaScript, React, and
Node.js, ensuring a seamless and responsive user experience. Through these
technologies, the tool provides smooth animations and an efficient interface that
makes learning sorting algorithms more engaging and accessible.

Furthermore, the abstract points out that this project is designed not only for students
but also for educators and professionals, making it a valuable resource for anyone
looking to improve their understanding of sorting algorithms. The visualizer also allows
users to compare the efficiency and execution steps of multiple algorithms, deepening
their comprehension of different sorting techniques. Finally, the abstract suggests the
potential for future enhancements, such as the inclusion of additional sorting algorithms
like Radix Sort and Selection Sort, and optimizing the tool for handling larger datasets.
 TABLE OF CONTENTS

1. Introduction 01
1.1. Objective 01
1.2. Features 02
1.3. Technology Stack 04
1.4. Expected Outcome 07
1.5. Methodology 09
1.6. Timeline 10
1.7. Gantt Chart 10
2. Requirements Specification 11
2.1. Project Category 11
2.2. Hardware Requirements 11
2.3. Software Requirements 12
3. System Analysis 13
3.1. Introduction 13
3.2. System Overview 14
4. System Design 15
4.1. Introduction 15
4.2. Architectural Design 16
4.3. UML Diagrams 17
4.3.1. Use Case Diagram 17
4.3.2. Context (DFD) Diagram 19
4.3.3. Activity Diagram 21
 Introduction

1.1 Objective

The Sorting Algorithm Visualizer is a web-based educational tool designed to help users
understand the intricate workings of various sorting algorithms, which are essential for
organizing and managing data in computer science. Sorting algorithms are fundamental in
applications such as databases, search engines, and large-scale systems, yet their underlying
principles can be difficult for learners to grasp. This visualizer simplifies the learning process
by providing real-time, interactive visualizations of popular algorithms like Merge Sort,
Bubble Sort, Heap Sort, and Quick Sort. Through these visualizations, users can watch the
sorting process unfold step by step, making it easier to understand the behavior of these
algorithms.

Built using modern technologies like React.js, JavaScript, and Node.js, the platform ensures a
responsive and dynamic user experience. React.js efficiently handles the rendering of complex
user interfaces, allowing the application to provide smooth and real-time visual updates during
algorithm execution. By leveraging JavaScript for algorithm implementation, the project
enables users to not only observe the sorting process visually but also gain insight into the
underlying code. This combination of intuitive design and real-time feedback transforms
abstract sorting concepts into a hands-on learning tool that enhances the user’s comprehension
of algorithmic principles.

In addition to its visual components, the Sorting Algorithm Visualizer offers several interactive
features such as algorithm selection, speed control, and performance metrics tracking. Users
can adjust the speed of the visualizations to explore how algorithms behave with different data
sets and track important metrics like the number of comparisons and swaps. This level of
interaction provides a more personalized learning experience, helping users of all levels—
whether beginners or advanced learners—understand the efficiency and practical applications
of various sorting algorithms. Through this combination of visual and interactive learning, the
platform makes the often-challenging subject of sorting algorithms more accessible and
engaging for students, educators, and developers.

1
1.2 Key Features
 The Sorting Algorithm Visualizer comes with a range of interactive and educational
features that cater to users looking to deepen their understanding of sorting algorithms.
Below is a detailed breakdown of each feature and its significance:

Real-time Visualization
 The primary feature of the platform is the real-time visualization of sorting algorithms.
When a user selects an algorithm and inputs a dataset, the platform breaks down the sorting
process into individual steps and displays each step on the screen using visual elements like
bars or lines, which represent the elements being sorted.
 Visual Feedback: Each comparison, swap, or movement of data is shown through
animations. For instance, if two elements are swapped, their positions are visually swapped
on the screen. The use of animations helps in understanding the underlying mechanics of
how the algorithm sorts data.
 Step-by-Step Learning: Users can clearly see how algorithms process data at each stage,
making complex algorithms more digestible.
 Highlights Key Operations: The platform highlights key operations like comparisons,
swaps, and recursive divisions, providing a deeper understanding of how each algorithm
works.

Multiple Algorithm Support

 The platform supports multiple well-known sorting algorithms, each with its own unique
approach to sorting data. This allows users to experiment with different methods and
observe their strengths and weaknesses.
 Bubble Sort: A basic comparison-based algorithm that repeatedly swaps adjacent elements
if they are in the wrong order. The visualization helps users see how the largest unsorted
element "bubbles" to the correct position with each iteration.
 Merge Sort: A divide-and-conquer algorithm that recursively splits the dataset in half, sorts
each half, and merges them back together. Users can see the recursive splitting and merging
process in action.

2
 Quick Sort: Another divide-and-conquer algorithm that selects a pivot element and
partitions the dataset around the pivot, sorting elements on either side. Users can visualize
the partitioning and recursive sorting.
 Heap Sort: This algorithm builds a binary heap and uses it to sort elements. The
visualization demonstrates the heapification process and the extraction of the maximum
element in each iteration.
 More algorithms can be added in future updates, offering a broader perspective for users.

3
1.3 Technology Stack

The Sorting Algorithm Visualizer is built using a modern web development technology
stack that ensures the platform is highly responsive, interactive, and scalable. The chosen
technologies are well-suited for handling real-time visualizations and interactions, which are
key to the user experience. Below is a detailed explanation of each component of the
technology stack:

Frontend: React.js

React.js is the primary technology used for the frontend. It is a JavaScript library
developed by Facebook, designed specifically for building dynamic user interfaces. React
enables the creation of complex, interactive web applications by breaking the UI into reusable
components.

 Component-Based Architecture: React’s component-based structure allows the

development of isolated, reusable elements. Each part of the visualizer, such as the
sorting animation, controls, and metrics display, can be encapsulated in individual
components. This approach makes the application modular, easier to maintain, and
scalable as more features or algorithms are added.

 Virtual DOM: React uses a Virtual DOM that optimizes updates by only changing
elements that need to be updated, rather than reloading the entire page. This ensures
that the visualizer runs smoothly, even when performing complex sorting animations.

 State Management: Sorting algorithms need to update the state of the dataset in real-
time to reflect each comparison or swap. React’s built-in state management handles
these dynamic changes efficiently, ensuring that every update to the dataset is reflected
instantly on the screen.

 Interactive UI: React’s declarative style simplifies the process of designing a user
interface. Users can interact with various controls—such as selecting algorithms,
adjusting speeds, and resetting animations—in real-time, with React handling the
underlying state changes and UI updates.

4
 Backend: Node.js

Node.js is used to handle the backend of the platform. It is a JavaScript runtime

environment that allows developers to run JavaScript on the server side. Node.js is ideal for
real-time applications like the Sorting Algorithm Visualizer due to its asynchronous and event-
driven architecture.

 Single-Page Application Support: The visualizer is a single-page application (SPA),

where most of the logic occurs on the client side, but Node.js can still serve necessary
backend functionality, such as user authentication (if expanded), logging user data, or
managing user sessions.

 Asynchronous I/O: Since sorting algorithms require processing multiple actions (such
as comparisons and swaps) in a defined order, Node.js’ asynchronous I/O capabilities
ensure that these processes happen efficiently, without blocking the execution of other
operations.

 Real-time Data Handling: Node.js can handle real-time interactions efficiently,

ensuring that any user input (like changing the array size or adjusting animation speed)
is quickly reflected on the frontend.

 Scalability: Node.js is known for its ability to scale applications, making it easier to
expand the platform’s features, algorithms, or user base in the future.

Programming Language: JavaScript

JavaScript is the primary programming language used throughout the application,

handling both the frontend (via React.js) and backend (via Node.js). JavaScript's flexibility and
ubiquity make it an ideal language for the Sorting Algorithm Visualizer.

 Algorithm Implementation: Sorting algorithms like Bubble Sort, Merge Sort, Quick
Sort, and Heap Sort are implemented in pure JavaScript. The language’s event-driven
nature allows it to efficiently manage the iterative and recursive nature of these
algorithms.

5
 DOM Manipulation: JavaScript is responsible for directly manipulating the Document
Object Model (DOM), which is crucial for updating the visual elements in real-time
during the sorting process. As data changes (due to swaps or comparisons), JavaScript
ensures that the corresponding visual elements are updated instantly on the screen.

 Cross-Platform Compatibility: JavaScript is natively supported by all major

browsers, making the platform accessible to users on any device, whether desktop,
mobile, or tablet.

CSS and HTML

 While JavaScript and React handle the functionality, CSS and HTML are used to
structure and style the platform.

 HTML (Hypertext Markup Language): HTML is responsible for creating the

skeleton of the web page. It provides the basic structure of the interface, such as buttons,
menus, and divs, that React components populate. The application uses semantic
HTML5 to ensure accessibility and proper SEO.

 CSS (Cascading Style Sheets): CSS is used to style the elements of the visualizer and
ensure the interface is visually appealing and easy to use. The platform relies on modern
CSS techniques such as Flexbox and CSS Grid to create a responsive layout that adapts
to different screen sizes.

o Responsive Design: Ensuring that the platform works on all device sizes
(desktops, tablets, and smartphones) is crucial for user accessibility. CSS media
queries are employed to adjust the layout, fonts, and component sizes based on
the device’s screen resolution.

o Animation Support: CSS is also used to animate certain elements, such as

transitions and swaps in the visualizer, making the sorting process more
intuitive and engaging for the user.

6
1.4 Expected Outcome

The primary outcome of the Sorting Algorithm Visualizer is to provide users with a
comprehensive understanding of sorting algorithms. By offering real-time
visualizations of popular algorithms like Bubble Sort, Merge Sort, Heap Sort, and
Quick Sort, the platform makes it easier for users to grasp the step-by-step process of
sorting data. Users will be able to observe comparisons, swaps, and recursive divisions
in action, allowing them to demystify these algorithms and gain a deeper understanding
of how they work. Moreover, the tool tracks key metrics such as the number of
comparisons and swaps, which provides users with insights into the efficiency of each
algorithm, helping them better understand the time and space complexity involved.

Another important outcome is the platform’s ability to create an interactive and

engaging learning experience. Unlike traditional tutorials, which are often passive,
this visualizer allows users to actively participate in the learning process. By selecting
algorithms, adjusting visualization speed, and experimenting with different datasets,
users will develop a hands-on understanding of sorting techniques. The tool also allows
for easy comparison between algorithms, which encourages users to analyze their
strengths and weaknesses, providing a deeper comprehension of which algorithms are
most suitable for specific tasks.

The Sorting Algorithm Visualizer is expected to become a valuable educational

resource for both students and educators. Students will benefit from its dynamic,
visual approach, making it easier for them to learn and retain the concepts behind
sorting algorithms. The platform empowers them to move beyond theory and gain
practical experience by visualizing algorithmic behavior. Similarly, educators can use
this tool in classrooms or online lectures to visually demonstrate algorithmic concepts
in real-time, making it a powerful aid for teaching complex topics. The interactive
nature of the platform can also stimulate classroom discussions and further exploration
of data structures and algorithms.

In addition, the platform is designed to help users develop stronger problem-solving

skills. By experimenting with different algorithms and input sizes, users will better

7
understand how to select the most efficient sorting technique for a given dataset. They
will also learn to analyze the trade-offs between various algorithms, such as the balance
between time complexity and space usage. This critical thinking approach not only
helps users understand the practical applications of sorting algorithms but also
strengthens their problem-solving abilities when faced with real-world challenges.

The platform is built with future growth in mind, so another key outcome is the
opportunity for continuous expansion. More algorithms can be added in future
updates, broadening the learning scope for users. Additionally, the platform’s
performance can be optimized to handle larger datasets, making it suitable for more
advanced users and developers who want to test sorting algorithms with real-world data
sizes. This continuous evolution ensures that the visualizer will remain relevant and
useful for a growing user base.

8
1.5 Methodology

The development of the Sorting Algorithm Visualizer follows a structured, iterative

approach aimed at delivering an intuitive and effective learning tool. The first step involves
researching and selecting sorting algorithms that are both educational and widely used,
such as Bubble Sort, Merge Sort, Quick Sort, and Heap Sort. Each algorithm is
implemented in JavaScript to handle the logic and steps necessary to perform sorting. The
focus is on ensuring that the algorithms not only work correctly but also provide meaningful
visual feedback at each step—this is essential for users to fully grasp the inner workings of
these sorting techniques. Key operations, such as comparisons and swaps, are highlighted
visually to ensure clarity.

The next phase is dedicated to designing and developing the user interface (UI), ensuring
the platform is both user-friendly and visually engaging. The UI is built using React.js,
taking advantage of its component-based architecture to keep the application modular and
maintainable. The interface includes interactive elements, such as buttons for selecting
sorting algorithms, sliders to control the speed of the visualization, and input fields for
adjusting the size of the dataset. By providing these interactive options, users can
experiment with different algorithms and settings, enhancing their learning experience.
Real-time visual feedback is critical here, and the platform is designed to update instantly
as users make adjustments, ensuring a seamless and responsive experience.

In the final stage, the platform undergoes rigorous testing and optimization to ensure it
performs efficiently across different devices and browsers. Various datasets are tested to
ensure that the visualizations work smoothly even with larger data inputs. The platform is
also evaluated for usability, ensuring that users can easily navigate and understand the
controls without any confusion. User feedback is integrated to continuously improve the
platform, and potential areas for future enhancement—such as adding more algorithms,
optimizing for performance, or improving the visual representation of steps—are identified.
The development process follows an agile methodology, with regular iterations and updates
based on user needs and technological advancements.

9
1.6 Timeline
 Requirements gathering: June – July.
 Feasibility Study: June – July.
 System Design: July – August.
 Technology Selection: July – August.
 Development: July – September.
 Final Review: September.
 Deployment: September.

1.7 Gantt Chart

10
 Requirements Specification

2.1 Project Category

The Sorting Algorithm Visualizer falls under the Educational Software category, specifically
designed for teaching and learning purposes. It serves as an interactive learning tool for
students, educators, and developers to understand the inner workings of sorting algorithms. By
visualizing the sorting process in real-time, this web-based tool simplifies the complex
operations of various algorithms and helps users grasp the differences in efficiency and
performance. Its purpose is to make algorithm analysis more accessible and intuitive,
promoting an enhanced educational experience through hands-on interaction with algorithms.

2.2 Hardware Requirements

The hardware requirements for the Sorting Algorithm Visualizer are minimal, as the tool is
web-based and primarily runs on modern web browsers. However, for optimal performance
and user experience, the following hardware is recommended:

 Processor: Dual-core or higher (Intel i3, i5, AMD Ryzen 3, or equivalent)

 RAM: 4 GB or higher (preferably 8 GB for smooth multitasking and handling large

datasets)

 Storage: 100 MB of available storage (for caching and temporary storage during usage)

 Graphics: Integrated graphics (Intel HD, AMD, or equivalent) capable of rendering

dynamic visualizations

 Display: Full HD resolution (1920x1080 or higher recommended for clear

visualization)

 Internet Connection: A stable broadband connection for accessing the online tool and
loading assets

The platform can be accessed on various devices, including laptops, desktops, and tablets, as
long as they meet the minimum hardware specifications for smooth operation.

11
2.3 Software Requirements

The Sorting Algorithm Visualizer is built using modern web development technologies,
making it compatible with most operating systems and browsers. The following software
components are required:

 Operating System: Any modern OS that supports web browsers (Windows 10/11,
macOS, Linux, or ChromeOS)

 Web Browser: Latest version of Chrome, Firefox, Edge, or Safari, with JavaScript
enabled

Frontend Technologies:

o React.js: The primary library used for building the user interface and managing
the state of the application. React ensures the interface is dynamic and
responsive, allowing real-time updates as sorting algorithms execute.

o JavaScript: Essential for implementing the core logic of the sorting algorithms
and handling events triggered by user interaction.

o CSS: Used for styling the user interface, ensuring the platform is visually
appealing and easy to navigate.

o HTML5: The structure of the web application is built using HTML5, ensuring
compatibility across different devices and browsers.

Backend Technologies:

o Node.js: Provides the backend infrastructure for the platform, handling any
server-side logic and interactions. Node.js is lightweight and efficient for
managing connections and data flows, making it suitable for educational
platforms like this.

Development Tools:

o Visual Studio Code (or similar IDE): For coding and debugging the
application.

o Git: Version control to manage code changes and collaboration between

developers.

12
 System Analysis
System analysis is a critical phase in the development process, as it provides a detailed
examination of the system’s functionality, architecture, and overall operation. This section
aims to analyze how the various components of the auction platform work together to meet
user requirements, ensure seamless operation, and address potential challenges. By breaking
down the platform into its core elements, system analysis helps in understanding the flow of
data, user interactions, and the technical backbone supporting the system.

3.1 Introduction
The Sorting Algorithm Visualizer is a sophisticated web-based tool designed to facilitate the
understanding of sorting algorithms. By providing a real-time visualization of popular
algorithms such as Merge Sort, Bubble Sort, Heap Sort, and Quick Sort, the platform serves as
an invaluable educational resource. This tool aims to demystify the complexities of sorting
processes, making it easier for users to grasp the underlying principles and mechanics of each
algorithm.

The intuitive interface allows users, including students, educators, and developers, to engage
with the content interactively, fostering a deeper understanding of algorithmic efficiency and
performance. The educational focus of the tool ensures that users can not only visualize the
algorithms in action but also track the number of comparisons and swaps made during the
sorting process. This interactivity enhances the learning experience by enabling users to
experiment with different algorithms and settings, encouraging exploration and discovery.

3.2 System Overview

The Sorting Algorithm Visualizer operates as a comprehensive educational platform,
leveraging modern web technologies such as React.js, JavaScript, and Node.js. The system
architecture consists of a frontend interface where users can easily select different sorting
algorithms and adjust visualization parameters, including speed and data set size. Each
algorithm is implemented with precision to reflect its unique behavior, allowing users to
observe the sorting process step-by-step in real time. The backend, powered by Node.js,
efficiently manages the data flow and user requests, ensuring a seamless experience. Users can

13
compare the algorithms side by side, enabling them to analyze their efficiency and learn which
methods are more suitable for specific scenarios.

The design of the system emphasizes user engagement, with visual feedback mechanisms that
make complex sorting techniques more digestible. Future enhancements are planned to expand
the range of algorithms available and to improve the system's performance, particularly for
larger datasets, making the tool even more versatile as an educational resource. Overall, the
Sorting Algorithm Visualizer is positioned as a powerful tool for learning and experimentation
in the field of computer science and algorithm analysis.

14
 System Design

4.1 Introduction
The system design phase focuses on translating the requirements into a detailed blueprint
of the auction platform. This includes designing the overall architecture, defining system
components, and creating UML diagrams to represent various aspects of the system. The design
ensures that all components work together seamlessly to provide a robust and user-friendly
auction platform.

4.2 Architectural Design

Components:

Frontend: User interface components where users interact with the visualizer.

o Algorithm Selection Component: Users choose the sorting algorithm.

o Visualization Module: Displays animations of the sorting process.
o Control Panel: Provides speed control and playback functions.
o Performance Tracker: Shows statistics like comparisons and swaps.

15
  Backend: Node.js server for handling data requests and server-side logic (if
applicable).
 API Endpoints: For retrieving or processing data related to sorting algorithms.
 Visualization Libraries: Libraries (like D3.js) for rendering visualizations.
 User: The end user (students, educators, developers) interacting with the application.

Explanation
 Frontend contains components responsible for user interaction and visualization.
 Backend is the Node.js server, which processes user requests.
 Visualization Libraries are used for rendering the animations.
 The User interacts with the UI to select algorithms and control the visualization.

16
4.3 UML Diagrams
UML (Unified Modelling Language) diagrams are graphical representations used to
visualize, specify, construct, and document the artifacts of a software system. UML provides a
standard way to design and describe the structure and behaviour of software systems, making
it easier for developers, analysts, and stakeholders to understand complex systems and their
interactions.

4.3.1 Use Case Diagram

Actors:
1. User: The person interacting with the application.
Use Cases:
 Select Algorithm: User selects a sorting algorithm to visualize.
 Start Visualization: User initiates the sorting visualization.
 Pause Visualization: User pauses the ongoing visualization.
 Reset Visualization: User resets the visualization to start over.
 Adjust Speed: User changes the speed of the visualization.
 View Performance Stats: User views statistics like comparisons and swaps.

17
USE CASE DIAGRAM:

18
4.3.2 Context (DFD) Diagram

The Context Diagram offers a high-level overview of the auction platform, illustrating its
interactions with external entities and the flow of information between them. This diagram is
crucial for understanding the boundaries of the system and how it integrates with various
external services and users. It provides a simplified view of the system's interactions, focusing
on the key data flows and external entities involved.

1. System: Sorting Algorithm Visualizer (SAV)

o This represents the main application that users will interact with. It encompasses
all functionalities related to selecting and visualizing sorting algorithms.
2. External Entities:
o User:
 The primary actor who interacts with the system. The user can select
different sorting algorithms, control the visualization (play, pause,
reset), and adjust settings like speed.
o API:
 This represents any backend service that the Sorting Algorithm
Visualizer might communicate with. It provides data or statistics
necessary for the application, such as algorithm information or
performance metrics.
o Visualization Libraries (VL):
 These are external libraries (like D3.js) used by the system to render
visualizations. They handle the graphical representation of the sorting
processes, allowing for smooth and effective animations.
The context diagram is useful for:
 Understanding System Boundaries: It clearly delineates what is part of the system
versus what is external, helping developers and stakeholders understand the
application’s scope.
 Identifying Key Interactions: It highlights how the system will communicate with
users and other services, which is essential for planning architecture and integration.
 Visual Communication: It provides a simple visual representation that can be easily
understood by technical and non-technical stakeholders alike, facilitating discussions
around requirements and design.

19
CONTEXT DIAGRAM:

20
4.3.2 Activity Diagram

The Activity Diagram illustrates the workflow of a typical auction process, capturing the
sequence of activities and interactions involved from the listing of an item to the completion
of payment. This diagram provides a clear visual representation of the processes and how
different actors interact with the system throughout the auction lifecycle.

Structure of the Code

1. Start and End Nodes
o start and stop: These keywords define the starting and ending points of the
activity diagram.

2. Activities
o Select Algorithm: This is the first activity where the user selects a sorting
algorithm to visualize.
o Adjust Speed: This is a decision point where the user can choose to adjust the
speed of the visualization.
o Change Speed: If the user decides to adjust the speed, this activity occurs.
o Start Visualization: The user starts the visualization process after selecting the
algorithm and adjusting the speed.
o Display Sorting Animation: The system displays the sorting algorithm in
action.
o Pause Visualization: If the user chooses to pause the visualization, this activity
is executed.
o Resume Visualization: This occurs if the user decides to resume after pausing.
o Display Stats: If the user opts to view stats, this activity is executed.
o Reset Visualization: This decision point allows the user to reset the
visualization.
o Reset to Initial State: If the user decides to reset, this activity is executed.

21
 3. Decision Points
o if (Adjust Speed?) then (yes): This checks if the user wants to adjust the
speed. If yes, it leads to the Change Speed; activity.
o if (Pause/Resume?) then (pause): This checks if the user wants to pause the
visualization. If yes, it leads to the Pause Visualization; activity.
o if (Reset Visualization?) then (yes): This checks if the user wants to reset the
visualization. If yes, it leads to the Reset to Initial State; activity.

Flow of Activities
1. Start: The process begins with the user selecting an algorithm.
2. Adjust Speed: The user can decide to adjust the speed of the visualization. If they
choose to do so, they can change the speed; otherwise, they move on to starting the
visualization.
3. Start Visualization: The user starts the visualization, which displays the sorting
process.
4. Pause/Resume: The user can pause the visualization at any time, and this can
continue until they decide to resume.
5. View Performance Stats: The user can opt to view performance metrics like
comparisons and swaps.
6. Reset Visualization: After viewing stats, the user can choose to reset the
visualization to its initial state.
7. End: The process concludes when the user decides to stop the interaction.

22
ACTIVITY DIAGRAM:

23