International Journal of Scientific Research in Engineering and Management (IJSREM)

Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

Research Paper on Visualization of Sorting Algorithm

Rahul Srivastava*1, Sachin Kumar*2, Dr. Sadhana Rana*3
*1,*2
Student, Computer Science And Engineering, SRMCEM, Lucknow, India.
*3
Assistant Professor, Computer Science And Engineering, SRMCEM, Lucknow, India.
[email protected] , [email protected]

Abstract:
In the realm of sorting algorithms, visualization projects serve as educational tools to comprehend and demonstrate various sorting
techniques. This paper presents an analysis and review of sorting visualization projects that do not utilize parallelism. By exploring sorting
algorithms without parallel processing, this review aims to provide insights into the efficiency, functionality, and visual representation of
these algorithms. Understanding sorting algorithms without parallelism contributes to a foundational understanding of their sequential
execution and computational complexities.

Keywords: Sorting Algorithms, React Visualizer, Selection Sort, Merge Sort, Bubble Sort, Insertion Sort, Heap Sort.

1. Introduction
In the ever-expanding landscape of computer science, sorting Resolving such issues typically involves consulting a car
algorithms represent foundational pillars, enabling efficient handbook, conducting research, or seeking guidance from
data organization and retrieval. Visualizing these algorithms someone experienced. In a similar vein, learning styles
offers a compelling gateway into understanding their inner significantly influence how we absorb information. As a visual
workings and complexities. Throughout the annals of human learner, I discovered my affinity for comprehending complex
ingenuity, the evolution of tools has continually transformed concepts through visual demonstrations rather than textual
our capabilities. Digital computers, especially, stand as explanations. This realization sparked my curiosity in
beacons of innovation, performing tasks at speeds that surpass understanding sorting algorithms and prompted the creation of
human capacity, including executing intricate sorting an online tool detailed in this paper—a tool designed to
algorithms. This sorting visualization project delves into the elucidate the transformative nature of sorting algorithms in
realm of sorting algorithms, sans parallelism, seeking to organizing data sets. Imagine organizing a list of individuals
unravel their sequential execution and computational by their ages in ascending order—this simple task mirrors the
intricacies through visual representation. By immersing essence of sorting algorithms.
ourselves in this exploration, we endeavor to decode the To aid visualization, I crafted a histogram representing
mechanisms that govern sorting algorithms, providing an numerical data, where each number translates into a bar's
educational resource that illuminates their functionality and height, symbolizing its value. The journey of these data points,
nuances. Beyond mere computational exercises, the undergoing transformation from disarray to ordered sequences,
visualization of sorting algorithms encapsulates a profound mirrors the essence of Selection Sort, Bubble Sort, Insertion
narrative—a testament to human endeavor, mathematical Sort, and Merge Sort—four well-known sorting algorithms. To
elegance, and the quest for optimized data manipulation. simplify the visualization, imagine age labels on index cards.
Through this project, we aim to unlock the visual symphony Selecting the youngest card and sequentially arranging them is
underlying sorting methodologies, fostering a deeper akin to Selection Sort's process—an intuitive analogy that
comprehension accessible to both seasoned enthusiasts and simplifies understanding. However, grasping more intricate
budding computer science learners. algorithms, such as Quick Sort, which pivot around data
The sorting visualization project focuses on creating a user- reorganization, proves challenging through text alone. In a bid
friendly online tool aimed at explaining and visually to cater to diverse learning styles, I developed an animation-
demonstrating how sorting algorithms function in organizing based visualization tool, accessible via the web. Utilizing
and transforming sets of data. It's designed to cater to various HTML5, JavaScript, and CSS, this web-based platform
learning styles, especially emphasizing visual learning eliminates the need for additional software installations or
preferences. complex setups. The decision to leverage web-based
technologies aims to mitigate user anxiety, ensuring a seamless
The project aims to serve as an educational resource for and user-friendly experience for individuals across various
students, enthusiasts, or anyone interested in understanding technological proficiencies.
Understanding the intricacies of sorting algorithms often
sorting algorithms. By offering a visual representation, it
proves
facilitates a deeper understanding of these fundamental
to be a challenge, especially when attempting to visualize the
concepts in computer science.
complex maneuvering of data in text form alone. Hence,
Navigating through challenges often involves finding the inspired by my innate affinity for visual learning and realizing
most effective approach rather than delving into complexities. the inherent complexities in comprehending these algorithms
Consider the scenario of a broken car headlight—an everyday through conventional textual descriptions, I embarked on a
mission to create an interactive, visually immersive online
inconvenience made increasingly confounding by modern,
platform.
abstract designs.

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 3

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

The image is a flowchart for a sorting website. It outlines the users to adjust the level of parallelism, impacting sorting
steps and options available on the website for sorting an array. speed and efficiency dynamically.
Users can generate a new array to sort through direct input of The Sorting Module, responsible for generating and
array values, random generation of array values, or changing executing sorting algorithms, undergoes a substantial
the array size. They can set the speed of sorting and specify the transformation with parallelism. It divides the array data into
type of sort they want to use: selection sort, bubble sort, segments allocated to different threads or processors for
insertion sort, or merge sort. After these parameters are set, concurrent processing. In a parallel setting, this module
users can start sorting and the website will show orchestrates the simultaneous execution of sorting algorithms
comparison/exchange/merge count. across multiple segments, managing synchronization points
Below that there's a box labeled "Generate a new array to sort" where sorted segments are merged or combined to form the
with three options: - Direct input of array values - Random final ordered array.
generation of array values - Change array size - Next step in
flow is "Set the speed of sorting". - Followed by another box Meanwhile, the Visualization Module brings the sorting
labeled "Specify sort type" with four options: - Selection Sort process to life through graphics. In a parallel context, it
- Bubble Sort - Insertion Sort - Merge Sort - The final step in visualizes the concurrent execution of sorting algorithms by
flow is an oval labeled "Start sorting", followed by text “show various threads or processors. The module's parallel
comparison/exchange/merge count”. representation could include graphical depictions of multiple
The figure (figure 1) below illustrates the Working and threads or processors engaging in simultaneous sorting
Visualization of Sorting Algorithm. actions. Visual animations might illustrate how these
segments interact and eventually merge to produce the final
sorted sequence.
The Input / Output Module manages user interactions and
data operations. In parallelism, it could provide real-time
statistics on parallel execution times or thread utilization.
Users might be able to dynamically modify parallel settings
during sorting, such as adjusting the number of parallel
threads or processors engaged in the sorting process. The
Sorting Logic Module is responsible for implementing
sorting algorithms, adapting them for parallel execution. In a
Figure1: Sorting Algorithm Working. parallel environment, it segments the data for simultaneous
sorting across multiple threads or processors. This module
orchestrates synchronization and communication between
2. Module Description these segments, ensuring accurate merging or combination
into the final sorted sequence.
A module diagram is a graphical representation of the
Lastly, the Graphics Library Module provides low-level
components and dependencies of a software system. It shows
graphics functions. In a parallel context, it may require
how the modules interact with each other and what functions
optimization to handle concurrent rendering from multiple
they provide. A module diagram for a visualization of sorting
threads or processors efficiently. Enhancements might
algorithm might look something like this (Figure 2).
involve managing concurrent graphics rendering to ensure a
smooth visualization of the parallel sorting process, aligning
with the sorting logic and visualization modules for coherent
parallel execution.
Typically, Visualization Project stands as the visual
storyteller, translating sorting algorithms into graphical
representations and animations. Its primary goal is to provide
users with a visual journey through the sorting process,
elucidating complex algorithmic operations through intuitive
graphics. This module plays a crucial role in enhancing
comprehension by illustrating step-by-step sorting
Figure2: User Interface procedures, making abstract algorithms more tangible and
comprehensible. Through visual aids and animations, it
The User Interface Module plays a pivotal role in facilitating ensures users grasp the inner workings of sorting algorithms,
user interaction and input. In a parallel context, this module fostering a deeper understanding of their functionalities and
could offer enhanced functionalities, enabling users to select complexities within the sorting visualization tool. This is the
between running sorting algorithms either sequentially or in purpose of the explanation module in Figure 2. The Sorting
parallel. Module operates as the backbone responsible for executing
It might present options for users to specify the number of sorting algorithms based on user inputs. Its core function
threads or processing units to engage in parallel sorting. involves dividing the dataset into segments for potential
Additionally, the interface could provide controls allowing parallel processing, execution of sorting algorithms.

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 4

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

3. Used Methodologies
7. Continuous Integration and Deployment (CI/CD): -
Frames In a Sorting Visualization project, several
Description: CI/CD practices facilitate automated testing,
methodologies can be employed to develop and implement
integration, and deployment of code changes, ensuring a stable
the functionality of visualizing sorting algorithms. Here are
and updated application. - **Implementation**: Set up
some commonly used methodologies:
automated testing for sorting algorithms, user interface
1. Object-Oriented Programming (OOP): - components, and visualizations. Implement continuous
Description: OOP involves organizing code into objects that deployment pipelines for timely updates and improvements.
have attributes and methods. Each sorting algorithm, user Implementing these methodologies contributes to the
interface element, or visualization component can be robustness, maintainability, and effectiveness of the Sorting
represented as an object. Visualization project, ensuring a user-friendly, informative,
and engaging experience for users exploring sorting
Implementation: Implement sorting algorithms, user interface
algorithms.
elements, and visualization components as separate objects.
Utilize inheritance, encapsulation, and polymorphism to
create a modular and maintainable codebase.
2. Model-View-Controller (MVC): -
Description: MVC separates the application into three
interconnected components: Model (data), View (user
interface), and Controller (logic).
Implementation: Use this pattern to separate sorting
algorithm logic (Model), user interface elements (View), and
user interactions and algorithm execution control
(Controller). It helps in better organization and maintenance
of the codebase.
3. Asynchronous Programming: -
Description: Asynchronous programming enables concurrent
execution of tasks, useful for implementing parallel sorting
algorithms or updating the visualization while the sorting
process is ongoing. Figure3: ALGO-SORT
Implementation: Utilize features like multithreading or
asynchronous JavaScript (such as Web Workers) to perform Certainly! These methodologies contribute significantly to the
parallel sorting algorithms. Update the visualization in real- development of a Sorting Visualization project. Object-
time to reflect changes as the sorting progresses. Oriented Programming (OOP) structures code into reusable
4. Data Structures and Algorithms: - objects, enhancing modularity and maintainability. Model-
View-Controller (MVC) divides the application into
Description: Employ various data structures (arrays, linked interconnected components, separating data, user interface,
lists) and sorting algorithms (Bubble Sort, Merge Sort, Quick and logic, facilitating better code organization. Asynchronous
Sort) to showcase different sorting techniques. Programming enables concurrent task execution, vital for
Implementation: Implement these algorithms considering implementing parallel sorting algorithms and updating real-
their time complexity and efficiency. Visualize the step-by- time visualizations. Data Structures and Algorithms bring
step process of sorting, highlighting comparisons, swaps, or diversity to sorting techniques, showcasing different sorting
partitioning steps. methods and visualizing step-by-step processes. Event- Driven
5. Event-Driven Programming: - Programming reacts to user actions, initiating sorting
Description: Event-driven programming reacts to user actions algorithms and enhancing user interaction. Responsive Design
or system events, triggering responses accordingly. In a and Animation ensures a seamless user experience, adapting
sorting visualization tool, this methodology allows users to the interface to various devices and using animations for
interact with the interface and initiate sorting. engaging visualizations. Continuous Integration and
Implementation: Implement event handlers that respond to Deployment automates testing and deployment, ensuring a
user inputs (e.g., selecting a sorting algorithm, adjusting stable and updated application. Integrating these
speed) to trigger the execution of sorting algorithms or update methodologies results in an efficient, user- friendly, and
the visualization. informative Sorting Visualization tool.

6. Responsive Design and Animation: - The Continuous Integration and Deployment automates
Description: Incorporate responsive design principles for the testing, integration, and deployment processes, ensuring code
user interface elements and animations to ensure a seamless stability and timely updates. This methodology helps maintain
experience across various devices. a robust and updated application by automatically validating
Implementation: Utilize CSS for responsive layouts and changes and deploying new versions without disruptions,
transitions, and JavaScript or libraries like D3.js for creating thereby improving the overall quality and reliability of the
dynamic and engaging visualizations of sorting algorithms. sorting visualization tool.

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 5

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

4. Unit Testing involves evaluating the visual output against expected

outcomes, validating user interactions, and ensuring error- free
Unit testing for visualizations of sorting algorithms involves
and accurate representations of sorting processes. Additionally,
verifying the correctness and functionality of individual
it focuses on responsiveness, cross- compatibility, and handling
components responsible for visual representation. While
various scenarios to ensure a robust and reliable visualization
traditional unit testing focuses on verifying code logic and
tool.
functions, testing visualizations requires assessing whether
the visual representations accurately depict the sorting
Unit testing for visualizations of sorting algorithms is a crucial
process. Here's how unit testing can be approached for
aspect of ensuring the accuracy, functionality, and reliability of
visualizations of sorting algorithms:
the graphical representations depicting the sorting processes.
1). Test Component Behavior: Unlike traditional unit testing that primarily focuses on
Validation of Sorting Logic: Ensure that the visualization verifying code logic and functionalities, testing visualizations
accurately reflects the steps of the sorting algorithm. Validate involves evaluating whether the visual elements effectively
that elements are rearranged according to the algorithm's illustrate the sorting algorithm's execution. The validation
logic (e.g., comparisons, swaps) at each iteration. process includes several key components. Firstly, it assesses the
Handling Edge Cases: Test the visualization for handling behavior of visualization components, ensuring they accurately
edge cases, such as sorting an already sorted array, an array mirror the steps of the sorting algorithm, including
in reverse order, or an array with duplicate elements, comparisons, swaps, or any relevant operations. This validation
ensuring the visualization responds appropriately. extends to handling edge cases, confirming that the
visualization appropriately responds to scenarios such as
2). Comparison with Expected Output: sorting pre-sorted arrays or arrays with duplicate elements.
Expected Visualization Output: Establish a reference or Moreover, comparing the actual visualization output with an
expected output for each step of the sorting algorithm. expected reference output becomes crucial; it verifies that the
Compare the actual visualization output with the expected data representation and positioning of elements align with the
output to verify correctness. anticipated outcome at each sorting step.
Data Consistency Check: Confirm that the data Another critical aspect involves testing interactive elements if
representation and positioning of elements in the present within the visualization tool. This includes validating
visualization match the expected outcome at each sorting user interactions—such as altering sorting speed or selecting
step. different algorithms—to ensure they trigger correct and
expected visual changes in real time. Additionally,
3). Interactive Component Testing: comprehensive testing covers the rendering of visual elements
User Interaction: If the visualization tool involves user across various browsers and devices to confirm consistent
interactions (e.g., adjusting sorting speed, selecting different performance and presentation. It includes assessing
algorithms), ensure these interactions trigger the correct responsiveness across different screen sizes and ensuring
visual changes. smooth animations that accurately portray the sorting process.
Real-Time Updates: Test the visualization for real-time Furthermore, robust unit testing addresses error handling,
updates, ensuring that modifications initiated by user checking how the visualization manages unexpected scenarios
interactions are accurately reflected without errors or delays. or erroneous inputs, guaranteeing the tool's resilience and
stability. Finally, performance testing evaluates how the
4). Handling Visual Rendering: visualization handles large datasets, ensuring that it remains
Cross-Browser and Device Testing: Verify that the responsive and functional without compromising the user
visualization renders consistently across various browsers experience. Through these comprehensive testing
and devices, ensuring a uniform experience for users. methodologies, unit testing for sorting algorithm visualizations
Responsiveness and Animation Verification: Assess aims to ensure accuracy, interactivity, responsiveness, and
responsiveness by checking how the visualization adapts to reliability, culminating in an effective and trustworthy
different screen sizes. Ensure animations and transitions are visualization tool for exploring Sorting algorithms.
smooth and correctly depict the sorting process.
Unit testing for visualizations of sorting algorithms is pivotal in
5). Error Handling and Edge Cases: validating the accuracy, functionality, and robustness of the
Handling Errors: Test how the visualization handles graphical representations depicting sorting processes. Unlike
unexpected scenarios, such as erroneous inputs or interrupted conventional testing that scrutinizes code logic, visualization
processes, ensuring graceful handling of errors without testing ensures that the visual elements faithfully reflect the
crashing the application. steps of sorting algorithms.
Performance Testing: Evaluate the visualization's
performance when dealing with large datasets to ensure it This testing approach involves multifaceted assessments to
remains responsive and functional without significant verify different aspects of the visualization tool. Firstly, it
degradation. meticulously inspects the behavior of visualization components,
validating their synchronization with sorting algorithms' steps,
Implementing unit tests for sorting algorithm visualizations encompassing comparisons, swaps, and other operations. This
scrutiny extends to handling diverse scenarios, ensuring the
visualization adeptly responds to varying inputs, including

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 6

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

already sorted arrays or atypical datasets with duplicates or Controller

outliers. Furthermore, unit testing compares the actual The implementation of the Controller component in the
visualization output against predetermined reference outputs, Sorting Algorithm project, adhering to the Model-View-
meticulously scrutinizing data positioning and rendering Controller (MVC) architecture, focuses on managing and
accuracy at each sorting step. orchestrating user interactions while facilitating
communication between the View and Model components.
5. Implementation Serving as the central coordinator, the Controller interprets and
manages user inputs within the application. It encapsulates the
View logic responsible for handling user interactions initiated
through the user interface elements embedded within the View.
The implementation of the View component in the Sorting This includes interpreting user selections of sorting algorithms,
Algorithm project, adhering to the Model-View-Controller adjustments in settings, or triggering sorting executions. The
(MVC) architecture, concentrates on crafting the user Controller component acts as the bridge, facilitating seamless
interface and visualization elements. Within this component, communication between the View, where users interact with
the primary goal revolves around creating an intuitive and the interface, and the underlying Model, housing the sorting
interactive user interface that effectively presents the sorting algorithms.
algorithm visualizations. Designing the user interface It ensures that user-triggered events are appropriately
involves the utilization of HTML, CSS, and JavaScript, or translated into actions, invoking the relevant sorting algorithms
relevant front-end technologies, to architect layouts, from the Model. By coordinating these interactions, the
interactive elements, and visual representations. Controller governs the flow of the application, directing the
These visualizations, which could be in the form of animated execution of sorting algorithms based on user inputs and
charts, diagrams, or graphical depictions, are meticulously updating the View with real-time sorting visualizations or
crafted to accurately illustrate the step-by-step sorting relevant information derived from the Model's operations. This
process. Additionally, the implementation encompasses the pivotal component ensures a cohesive and interactive user
incorporation of interactive components, such as buttons, experience while efficiently orchestrating the sorting algorithm
dropdown menus, and sliders, empowering users to input data, executions in response to user interactions.
select sorting algorithms, adjust settings (such as speed), and
initiate sorting executions. Ensuring the interface's
responsiveness across diverse devices and browsers remains
paramount, facilitating a seamless and consistent user
experience. Ultimately, the View component serves as the
conduit for users to engage with the sorting algorithms
visually, fostering comprehension and engagement through
an intelligible and interactive interface.

Model

The implementation of the Model component in the Sorting

Algorithm project, following the Model-View-Controller
(MVC) architecture, is centered around housing and Figure4: Model Interface
executing the sorting algorithms. Within the Model section, The Model component in the Sorting Algorithm project plays
the primary emphasis lies in encapsulating the logic and a fundamental role in encapsulating the logic and
functionalities of different sorting algorithms, including but implementation of various sorting algorithms. At its core, the
not limited to Bubble Sort, Merge Sort, and Quick Sort. The Model section hosts a collection of meticulously crafted
Model component houses the core codebase responsible for sorting algorithms such as Bubble Sort, Merge Sort, Quick
the accurate execution of these algorithms. It involves Sort, and other variations. Each algorithm is meticulously
meticulously coding the logic for each sorting method, translated into executable code segments within the Model,
defining methods or functions representing their specific adhering to the programming language's syntax and design
sorting techniques, and rigorously testing these principles. Methods or functions are structured and organized
implementations with diverse datasets. Testing encompasses to represent individual sorting techniques, ensuring clear and
various scenarios, ensuring the algorithms correctly handle distinct encapsulation of each algorithm's logic. Rigorous
common cases like already sorted arrays or those containing testing and validation procedures are conducted within this
duplicate elements. Model segment to assess the algorithms' performance across
Moreover, optimization efforts are crucial, focusing on different scenarios, including varying dataset sizes, pre-sorted
refining algorithms to enhance their efficiency by minimizing arrays, or arrays containing duplicate elements.
unnecessary computations and considering time complexity Additionally, optimization strategies are employed within the
to facilitate faster sorting processes. This Model-centric Model to fine-tune these algorithms, focusing on enhancing
approach ensures the reliability, accuracy, and performance their efficiency and minimizing redundant computations to
of the sorting algorithms embedded within the application. elevate sorting speed and overall performance. Through this

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 7

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

meticulous implementation process, the Model component iterative selection and swapping of elements, usually depicted
forms a robust foundation, ensuring the reliability, accuracy, graphically as bars or array elements transitioning into their
and efficiency of the sorting algorithms integrated into the correct sorted positions. By showcasing these transitions
Sorting Algorithm project. dynamically through animations or real-time updates, users can
follow the algorithm's progression, comprehending how
6. Comparative Analysis of Sorting Algorithm elements are selectively chosen and
arranged, ultimately culminating in a fully sorted dataset.
Insertion Sort:
This interactive visual representation facilitates a clearer
In the Sorting Visualization project, the implementation of the understanding of the Selection Sort algorithm's mechanics and
Insertion Sort algorithm involves a visual representation that its iterative approach to sorting.
elucidates its step-by-step functioning. Initially, the algorithm
considers the first element of the dataset as a sorted sequence,
marking its assumed correct position. Subsequently, it iterates
through the unsorted elements, sequentially comparing each
element with those in the sorted sequence. As the algorithm
progresses, it scrutinizes each unsorted element against the
sorted sequence, shifting greater elements to the right to create
space for insertion when a smaller value is encountered. This
process visually demonstrates the comparison and insertion
steps, showcasing the transition of elements into their rightful
positions within the sorted sequence. Graphical
representations, often depicted as bars or array elements with
their respective values, dynamically illustrate the algorithm's
execution through animations or real-time updates. Users can
visually track how elements are checked, shifted, and finally
placed, culminating in the complete sorting of the dataset in
ascending or descending order based on the specified criteria.
This visual depiction enhances user comprehension of Figure6: Selection Sort
Insertion Sort's mechanisms, fostering a clearer understanding
of sorting algorithms through an interactive and illustrative Quick Sort:
approach.
Quick Sort algorithm, when visualized within a Sorting
Visualization project, employs a divide-and-conquer strategy
to efficiently sort elements within a dataset. This method
involves selecting a pivot element from the dataset and
partitioning the elements into two groups based on their
relation to the pivot. Subsequently, the algorithm recursively
sorts these partitions until the entire dataset is sorted. Initially,
the algorithm chooses a pivot element, often the last element
Figure5: Insertion Sort in the dataset or selected randomly. Then, it rearranges the
elements so that those smaller than the pivot are placed before
Selection Sort: it, while larger elements follow. This partitioning process
divides the dataset into two segments.
The Selection Sort algorithm's functionality in a Sorting The Quick Sort algorithm then recursively applies this
Visualization project involves a structured process aimed at partitioning and sorting process to each segment, dividing them
sorting elements within a dataset in ascending or descending further until the entire dataset is sorted. Visually representing
order, visualizing each step for user comprehension. Initially, Quick Sort involves illustrating the partitioning of elements
the algorithm starts with an unsorted dataset, gradually around the pivot, graphically showing the elements moving
forming a sorted sequence by repeatedly selecting the smallest into their correct positions relative to the pivot. This
(or largest) element from the unsorted section and placing it visualization process, commonly displayed as bars or array
at the beginning (or end) of the sorted portion. As the elements transitioning through animations or real-time
algorithm progresses, it iterates through the dataset, updates, aids users in comprehending how the algorithm
meticulously identifying the smallest (or largest) element efficiently divides and conquers the dataset to achieve the final
within the unsorted segment. Subsequently, this element is sorted sequence.
exchanged with the element at the current position in the
sorted sequence. This step-by- step process continues until all Through this visual depiction, users can observe the gradual
elements are appropriately placed within the sorted sequence. sorting of elements, enhancing their understanding of Quick
Visually, the sorting visualization illustrates this Sort's recursive nature and its proficiency in sorting large
datasets of data pre-processing tools.

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 8

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

dataset into a max-heap or min-heap structure, then repeatedly

extracting the root element (the maximum or minimum
element) and reconstructing the heap until all elements are
sorted. Initially, the algorithm builds a heap by arranging the
elements in a specific order—either as a max- heap, where the
parent element is greater than its children, or a min-heap,
where the parent element is smaller than its children. It then
repeatedly extracts the root element and rearranges the
remaining elements to maintain the heap property. Visually
representing Heap Sort involves showcasing the construction
and manipulation of the heap structure. This representation,
often illustrated as bars or array elements transitioning through
Figure7: Selection Sort
animations or real-time updates, demonstrates how elements
Merge Sort: are organized into a converting the heap and then

The Merge Sort algorithm, as visualized in a Sorting

Visualization project, implements a divide-and-conquer
strategy to sort elements within a dataset. It systematically
divides the dataset into smaller segments, sorts them
individually, and then merges them back together to achieve
a fully sorted sequence. Initially, the algorithm divides the
dataset recursively into halves until each segment contains
only one element. Subsequently, it merges these smaller
segments, sorting and combining them to form larger sorted
segments. This merging process continues until the entire
dataset is sorted. Visually, Merge Sort is represented by
illustrating the recursive division of the dataset into smaller
Figure9: Heap Sort
parts and the subsequent merging of these sorted segments.
This visual representation, often depicted as bars or array
Implementing sorting algorithms in a Sorting Visualization
elements transitioning through animations or real-time
project is a multifaceted process that intertwines algorithmic
updates, demonstrates how smaller segments are sorted and
functionality with visual representation. The initial phase
then merged to form larger sorted sequences, ultimately
involves selecting and incorporating various sorting algorithms
resulting in a fully sorted dataset. This visual aid aids users
into the project scope, considering algorithms like Bubble Sort,
in understanding the iterative nature of Merge Sort and its
Selection Sort, Merge Sort, Quick Sort, and others. Each
efficiency in sorting large datasets through division, sorting,
algorithm demands meticulous implementation of its logical
and merging operations.
structure and functionality in the chosen programming language.
This implementation guarantees the accurate execution of
sorting methodologies, ensuring that the algorithms correctly
sort the dataset. Concurrently, a significant aspect of this project
lies in crafting a compelling visual representation of the dataset
to be sorted. Typically, this involves graphical elements such as
bars or array representations, visually reflecting the dataset's
elements and their values.
These elements act as dynamic components whose movements
and positions change throughout the sorting process.
Associating sorting actions, such as comparisons, swaps, or
repositioning, with visual changes enhances user engagement
and facilitates a clearer understanding of the algorithm's
behavior.
For instance, when executing Bubble Sort within the visual
environment, the comparisons and exchanges between elements
are visually translated, enabling users to observe how elements
shift until the dataset is entirely sorted. This synchronization
between algorithmic execution and the graphical representation
Figure8: Merge Sort of the dataset creates an interactive and educational experience.
Users can witness the step-by-step progression of the sorting
Heap Sort: process, visually tracking elements as they transition into their
correct positions within the sorted sequence.
The Heap Sort algorithm, when visualized in a Sorting
Visualization project, employs a binary heap data structure

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 9

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

Through this amalgamation of algorithmic precision and produce visual representations and interactive elements,
visual feedback, users gain an intuitive understanding of the making it an ideal platform for those new to programming or
inner workings of sorting algorithms. This visual aid not only seeking a visual approach to learning coding concepts.The
fosters a deeper comprehension of sorting methodologies but library offers various built-in functions for drawing shapes,
also promotes an engaging learning experience. creating animations, handling user interactions, and
This fusion allows users to witness and comprehend the manipulating visual elements. Users can generate diverse
intricate steps involved in sorting datasets, providing a graphical elements, including basic geometric shapes, images,
dynamic educational experience. Visualizing sorting text, and custom visualizations, leveraging p5.js's extensive
algorithms through graphical elements or animations aids in capabilities. Moreover, p5.js facilitates interaction by
demystifying complex concepts, making them accessible to responding to user inputs, such as mouse movements, clicks,
users at various proficiency levels. The interactive nature of and keyboard interactions, enabling the creation of interactive
this visual representation fosters a hands-on learning and responsive visuals.
environment, empowering users to grasp sorting techniques Its versatility extends beyond graphics and animation; p5.js
by observing the algorithms' behavior in action. Ultimately, supports integration with HTML, CSS, and other web
the combined approach of algorithmic implementation and technologies, allowing seamless incorporation of visual
visual depiction creates a compelling platform for creations into web pages and projects. Additionally, p5.js
comprehending and exploring the dynamics of sorting provides access to a supportive community, a wide range of
algorithms. documentation, tutorials, and examples, fostering a
collaborative and educational environment for users to explore
Limitations: creative coding.
In essence, p5.js stands as a user-friendly and powerful
 Traditional algorithms need to have all data in main JavaScript library, empowering individuals to express
memory. creativity through code-driven visual arts, animations, and
 Big datasets are an issue. interactive experiences on the web. Its simplicity,
comprehensive functionality, and emphasis on creative
Solution expression make it a valuable tool for both learning
programming concepts and producing engaging visual content
 Incremental schemes; having the datasets in several within web-based projects.
schemes or sizes.
 Stream algorithms; the use of MOA “Massive Online
Analysis” (Coincidentally, Mao is not only a streaming
algorithm but a flightless bird which also is extinct!)

7. Visualization Libraries

D3.js: D3.js is a robust JavaScript library specifically

designed for data visualization on web browsers. It enables
the creation of dynamic and interactive visualizations by
binding data to HTML, SVG, and CSS elements. D3.js
provides a wide range of tools for generating various charts,
graphs, and animations, making it suitable for illustrating
sorting algorithms dynamically
Figure10: Data Visualization
P5.js: p5.js is a JavaScript library designed for creative
coding, making it an accessible and versatile tool for artists,
designers, educators, and beginners interested in coding and Next.Js: Next.js, a popular React framework, can be utilized
visual arts. Developed with a focus on simplicity and effectively in implementing sorting algorithms. By leveraging
flexibility, p5.js simplifies the process of creating visual Next.js's server-side rendering (SSR) capabilities, sorting
elements and interactive experiences within web algorithms can be seamlessly integrated into web applications,
environments. It is based on the Processing programming ensuring optimal performance and user experience.
language and inherits its core concepts, allowing users to Additionally, Next.js's dynamic routing feature enables
engage in creative coding through visual expressions. efficient handling of sorting requests, allowing for real-time
updates without the need for page reloads. Moreover, Next.js's
At its core, p5.js provides a rich set of functions and built-in API routes facilitate communication between the
commands to create graphics, animations, and interactive frontend and backend, enabling the implementation of complex
content directly within web browsers. With its easy-to- sorting logic while maintaining a clean and modular codebase.
understand syntax and immediate feedback, users can swiftly Overall, Next.js empowers developers to create robust and
responsive sorting algorithms that enhance the

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 10

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

functionality of web applications. Incorporating Next.js into

sorting algorithm implementations offers a multifaceted
approach to enhancing web applications.

Leveraging Next.js's efficient client-side navigation, sorting

algorithms can seamlessly integrate into single-page
applications (SPAs) Next.js's static site generation (SSG)
capabilities enable pre-rendering of sorted data, ensuring swift
load times and improved search engine optimization (SEO).
Additionally, reducing the likelihood of runtime errors and
enhancing code maintainability. By harnessing the power of
Next.js, developers can create sophisticated sorting Figure11: Algorithm
functionalities that elevate the overall performance and
usability of web applications. Next.js serves as an ideal
8. Feedback

framework for implementing sorting algorithms due to its

The assessment of the algorithm's memory constraints resulted
versatility and scalability. With Next.js's seamless integration
in persistent impasses and system crashes. Ahead of the test,
of React components, developers can create dynamic sorting
students were apprised of this issue, and three respondents
interfaces that respond instantly to user input, providing a
shared their insights regarding the concern. Despite the 3.9
smooth and intuitive sorting experience.
average rating received on question 4, evaluating the tool's
usefulness left me pleasantly surprised. Moreover, features
initially disregarded surfaced during my evaluation:
Moreover, Next.js's support for server-side rendering (SSR)
1. Introduction of adjustable animation speed for enhanced
ensures that sorting algorithms perform efficiently even with
user control.
large datasets, as sorting operations can be offloaded to cases.
2. Incorporation of visual feedback when interacting with
Result Start by arranging the data, and then pick the interface buttons to indicate selection status.
visualization algorithm to use. Algorithm buttons provide 3. Implementation of a segmented visualization, akin to box-
sorting of data as it arrives on the interface. Asking to specify like splits, to amplify clarity during Merge Sort.
the ordering of elements takes precedence because when the 4. Utilization of color-coding to denote active comparisons
algorithm has completed running the initialization process, the within the visualization.
interface is now showing a new ordering, while the code has
already completed running the initialization with the prior While most students expressed a desire for an earlier
data set. presentation of the animation tool, two students didn't voice
such a request. They asserted that an earlier introduction could
There was considerable confusion caused by the way the enhance topic accessibility. Notably, following my
ordering buttons and algorithm buttons were shown in the UI presentation, students encountered Merge Sort for the first
after the surveys were completed. When beginning the sorting time, which influenced 54% (7 out of 13) to incorporate it into
process, the student noted that she was having problems their learning using the animation. Considering the author's
starting because she believed that she was hitting the buttons suggestion, a phased approach to studying individual
in the wrong order. This then led to her failing to execute the algorithms, rather than simultaneous mastery of all, might
animation. The answers can be found in Appendix D. Overall,
yield more effective learning outcomes. Interestingly, students
my animation tool did not aid with the understanding of
were tasked with selecting the sorting algorithm for focused
sorting algorithms. Among those who answered question 3,
study—choosing between Selection Sort, Insertion Sort, or
which questioned if their knowledge of a particular algorithm Merge/Insertion Sort, with Bubble Sort omitted as it's not part
changed after using the tool, 5 of the 13 students (38%) stated
of the RIC curriculum. Despite its exclusion, presenting
that they had in some way altered their previous knowledge of
Bubble Sort alongside other algorithms evoked positive
the algorithm. Many thought the tool was a good concept,
reactions from those encountering it for the first time. This
while the other 7 did not find it useful at all. It was said that
observation underscores the viability of creating animations in
one student stated a false positive about the instrument (whom
elucidating concepts. Though memory limitations posed
I did not include in the 5 that said it was helpful).
challenges, leveraging animation software enabled the
introduction of innovative concepts.

Modern computational hardware is poorly suited for efficient

implementation of sorting algorithms. For example, the CPUs
and GPUs have dedicated instructions to add vectors of
numbers, or compute maximum, but there is no instruction that
sorts a vector of numbers, or finds permutation that would sort
that vector.
If performance is critical, it is best to consider other algorithms

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 11

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

that perform better on modern hardware. For example, the 2. Improved Comprehension: Visual representations aid in
universal statistics algorithm computes upper limits faster comprehension. Sorting Visualization projects enable users to
than an equivalent procedure implemented using quantiles. observe the sorting process, allowing them to understand how
This is achieved by performing a few passes over the data data elements are manipulated during sorting. The visual cues
using vector instructions. make it easier to grasp algorithmic behaviors, such as
Sorting algorithms are one of the fundamental topics in comparisons, swaps, or shifting of elements, enhancing
computer science, as they are used to organize data in a way comprehension of algorithmic logic.
that makes it easier to search, access, and manipulate.
However, not all sorting algorithms are created equal, and 3. Engaging Educational Tool: The interactive and visually
choosing the right one can have a significant impact on your stimulating nature of sorting visualizations makes learning
code performance. In this article, you will learn about some algorithms engaging. In academic settings or self-paced
of the common sorting algorithms, their advantages and learning environments, these projects capture learners'
disadvantages, and how to measure their efficiency. attention, fostering active engagement and making the learning
process enjoyable.
9. Limitations
4. Interactive Exploration :Many Sorting Visualization projects
allow users to interact with the animation. Features such as
Algorithm Coverage: Some sorting visualization projects
might have limitations in terms of the number or variety of adjusting animation speed, pausing, or stepping through
sorting algorithms depicted. Due to complexity or design sorting steps empower users to control their learning pace.
This interactive exploration encourages deeper engagement
constraints, only a subset of sorting algorithms might be
showcased, potentially limiting the breadth of understanding and a better understanding of sorting algorithms.
for users.
5. Demonstrating Algorithm Efficiency: Visualizations enable
Performance Issues: Visualization projects might face
challenges in handling large datasets or executing complex side-by-side comparisons of different sorting algorithms. Users
animations efficiently. This can result in performance can witness and compare the performance of algorithms,
bottlenecks, sluggishness, or even system crashes, understanding their time complexity, efficiency, and suitability
particularly when demonstrating algorithms with intensive for different datasets. This comparative analysis provides
computational requirements. insights into algorithmic strengths and weaknesses.

Visualization Clarity: The clarity of visual representations 6. Facilitating Self-paced Learning: Visualizations
accommodate diverse learning styles and speeds. Users can
might be compromised, impacting user comprehension.
Visual complexity, unclear animations, or insufficient replay animations or steps as needed, facilitating self-directed
labeling could hinder users' ability to grasp sorting concepts learning. This flexibility enables learners to grasp concepts at
effectively. their preferred pace, catering to individual learning
preferences.
Platform Dependency: Some sorting visualization projects
7. Real-world Application Understanding: By visualizing how
might be designed for specific platforms or browsers,
potentially excluding users who cannot access or interact with sorting algorithms organize data, users gain practical insights
the visualization due to compatibility issues. into real-world applications. Understanding how these
algorithms work is fundamental in computer science, data
analysis, and software development.
Addressing these limitations might involve improving
algorithm coverage, optimizing performance, enhancing
visualization clarity, increasing interactivity, ensuring cross-
platform compatibility, enriching educational content, and 8. Error Identification and Debugging: Visualization tools
prioritizing accessibility to cater to a broader user base offer a visual aid in identifying errors or inefficiencies within
effectively. sorting algorithms. Users can observe and pinpoint potential
flaws in algorithmic logic or implementation by visually
10. Benefits tracking how data elements are sorted. This visual feedback
helps in debugging and refining algorithms, enhancing the
Absolutely, here's a more detailed breakdown of the benefits
learning process by highlighting common pitfalls or
of a Sorting Visualization project:
misconceptions.
1. Enhanced Learning Experience: Visualizations offer a
9. Cross-disciplinary Learning: Sorting Visualization projects
dynamic learning experience by presenting abstract concepts
transcend specific fields, allowing users from diverse
visually. Sorting Visualization projects provide a hands-on,
backgrounds to comprehend and appreciate algorithms'
visual representation of sorting algorithms, fostering a deeper
significance. Students, professionals, or enthusiasts in various
understanding of how these algorithms function. By
domains, including mathematics, engineering, or business
witnessing the step-by-step sorting process, learners gain a
analytics, can benefit from understanding sorting algorithms
more comprehensive understanding compared to theoretical
through visual representations.
explanations alone.

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 12

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

11. Application The web-based animation tool showcasing various sorting

algorithms has been a culmination of substantial time and
1. Algorithmic Complexity Demonstration: Sorting effort invested. Despite its memory-intensive nature, the
Visualization projects offer a practical means to demonstrate feedback from students who engaged with the tool has
the complexities of various sorting algorithms. Users can predominantly been positive.
visually witness how different algorithms perform under
varying data sizes, showcasing their time complexities (like This echoes findings from previous research, suggesting no
O(n^2), O(n log n), etc.) and helping learners understand substantial discrepancy in learning outcomes through
their computational efficiency. conventional methods versus animated presentations.
Undoubtedly, there's a consensus that investigating and
2. Algorithmic Evolution and Historical Context: These implementing animated tools holds significant promise for
projects provide insights into the evolution and historical enhancing classroom education remains addressing these
context of sorting algorithms. Users can observe the memory difficulties, seen as the imminent challenge on the
progression from basic algorithms like Bubble Sort to more project's horizon.
sophisticated ones like Quick Sort or Merge Sort, fostering
an appreciation for the iterative development of algorithms Plans include implementing Merge/Insertion Sort, an
over time. algorithm integrating aspects of both Merge Sort and
Insertion Sort. Additionally, the goal is to finalize the
3. User Behavior Studies and Human-Computer Interaction integration of Quick Sort, where the code readiness is
(HCI): Sorting Visualization tools can be used for HCI established. The ultimate aspiration is to release the online
studies to analyze how users interact with visual interfaces. tool to the public, accentuated by the desire to introduce a
Researchers observe user behaviors, preferences, and crucial feature—public accessibility.
comprehension levels while navigating the visualization,
aiding in understanding user interaction patterns and However, this step might pose challenges due to the current
optimizing user interfaces for educational tools. availability of the tool strictly in a local environment. The
hurdle lies in enabling the application to serve multiple
4. Visual Analytics and Pattern Recognition: Sorting concurrent requests from various users accessing the tool
Visualizations facilitate visual analytics, allowing users to online. To achieve this, optimizing the code for efficiency
recognize patterns within sorting processes. This capability becomes paramount while contemplating strategies to
extends to identifying common algorithmic patterns and handle simultaneous usage by numerous individuals. Such
strategies, fostering pattern recognition skills beneficial in a development would pave the way for a potential
algorithm design and analysis. comparison study, allowing insights into the tool's
effectiveness and user experiences across diverse user
5. Accessibility and Inclusivity Considerations: Apart from interactions. Regarding the Sorting Visualization project, a
functionality, these projects address accessibility standards parallel narrative emerges. Similar to the sorting algorithm
and inclusivity by incorporating features catering to diverse animation tool, considerable dedication and effort have
user needs. This includes considerations for colorblindness, been devoted to this project. Despite memory concerns,
screen readers, keyboard navigation, and other accessibility positive feedback has been received from engaged users,
features, ensuring usability for all users. aligning with prior research suggesting the efficacy of
visualization in educational settings. There's a shared
6. Ethical Considerations in Educational Technologies: The consensus on the potential of animated presentations to
development of Sorting Visualization projects involves augment classroom learning.
ethical considerations surrounding educational technologies.
This includes considerations for data privacy, ensuring age- The project roadmap includes enhancing the visualization
appropriate content, and adhering to ethical guidelines in tool by integrating Merge/Insertion Sort and finalizing the
educational software development. integration of Quick Sort due to existing code readiness.
Both projects aim to transition to public availability, yet
7. Global Educational Impact: These projects have the challenges persist, particularly in enabling concurrent
potential for global educational impact by providing access access by multiple users. Resolving memory limitations is
to quality educational resources worldwide. They transcend a priority, with a focus on optimizing code efficiency to
geographical barriers, offering a shared learning experience accommodate simultaneous usage. The successful
to students and enthusiasts across the globe. achievement of these objectives would potentially
facilitate comparative studies, providing valuable insights
into the tool's effectiveness across varying user scenarios.
11. Conclusion The ultimate aspiration remains the release of the Sorting
These aspects showcase the diverse dimensions beyond the Visualization tool to the public domain, accentuated by the
direct benefits of Sorting Visualization projects, critical feature of accessibility to a wider audience.
encompassing fields like algorithmic complexity, historical
context, HCI, accessibility, cognitive science, ethics, and
global educational outreach.

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 13

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 08 Issue: 05 | May - 2024 SJIF Rating: 8.448 ISSN: 2582-3930

References
Schneider, Cross Validation, Feb 7, 1997
[1] CORMEN, T. H.; LEISERSON, C. E.; RIVEST,
D. L.; STEIN, C. Introduction to algorithms. H. Danielsiek, W. Paul and J. Vahrenhold,
Second Edition. 2001. ISBN 0-262-03293-7. Detecting and understanding students’
[2] Java documentation. Available from: misconceptions related to algorithms and data
hhttps://docs.oracle.com/javase/8/i. structures, 43rd ACM technical symposium on
[3] KNUTH, D. The Art of Computer Programming: Computer Science Education (2012), 21-26
Fundamental Algorithms. Third Edition. 2004.
ISBN 0-201-89683-4
[14] K. Booten, Harvesting ReRites, Johnston, DJ
[4] SIPSER, M. Introduction to the Theory of ReRites: Human+ AI Poetry+ Raw Output+
Computation. Boston, MA: PWS Publishing Responses. Montréal, QC: Anteism., (2019)
Company, 1997. ISBN 0-534-94728-X.
[15] G. Rößling, M. Schüler and B. Freisleben, The
[5] GeeksforGeeks. Available from: ANIMAL algorithm animation tool, 5th annual
hhttps://www.geeksforgeeks.org/i. SIGCSE/SIGCUE ITiCSE conference on
[6] BĚLOHLÁVEK, R. Algoritmická matematika 1 Innovation and technology in computer science
: část 1. Available also from: education (2000), 37-40.
hhttp://belohlavek.inf.upol.cz/vyuka/algoritmicka [16] W. C. Pierson and S. H. Rodger, Web-based
-matematika-1-1.pdfi. animation of data structures using JAWAA, ACM
[7] Stackoverflow. Available from: SIGCSE Bulletin 30(1) (1998), 267-271.
hhttps://stackoverflow.com/i. [17] A. Moreno and M. S. Joy, Jeliot in a demanding
[8] T. Bingmann. “The Sound of Sorting - educational setting, Electronic Notes in Theoretical
‘Audibilization’ and Visualization of Sorting Computer Science 178 (2007), 51-59.
Algorithms.” Panthemanet Weblog. Impressum, [18] T. L. Naps, Jhavé: Supporting algorithm
22 May 2013. Web. 29 Mar. 2017. visualization, IEEE Computer Graphics and
[9] Bubble-sort with Hungarian (“Cs´ang´o”) Folk Applications 25(5) (2005), 49-55.
Dance. Dir. K´atai Zolt´an and T´oth L´aszl´o.
YouTube. Sapientia University, 29 Mar. 2011.
Web. 29 Mar.2017.
[10] A. Kerren and J. T. Stasko. (2002) Chapter 1
Algorithm Animation. In: Diehl S.(eds) Software
Visualization. Lecture Notes in Computer
Science, vol 2269. Springer, Berlin, Heidelberg.
[11] A. Moreno, E. Sutinen, R. Bednarik, and N.
Myller. Conflictive animations as engaging
learning tools. Proceedings of the Koli Calling ’07
Proceedings of the Seventh Baltic Sea Conference
on Computing Education Research - Volume 88,
Koli ‘07 (Koli National Park, Finland), pages 203-
206.
[12] J. Stasko. Using Student-built Algorithm
Animations As Learning Aids. Proceedings of the
Twentyeighth SIGCSE Technical Symposium on
Computer Science Education. SIGCSE ‘97 (San
Jose, California), pages 25-29.
http://doi.acm.org/10.1145/268084.268091
[13] J. Stasko, A. Badre, and C. Lewis. Do Algorithm
Animations Assist Learning?: An Empirical Study
and Analysis. Proceedings of the INTERACT ‘93
and CHI ‘93 Conference on Human Factors in
Computing Systems, CHI-93 (Amsterdam, the
Netherlands), pages 61- 6.Jeff

© 2024, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM34569 | Page 14