Review Paper on Algorithm Visualizer Deployment in AWS

Abstract

Algorithm Visualizer” is a website which helps Engineering students to understand difficult topics of data structures and algorithms in a visualized manner. It pays emphasis on practical approach of the algorithms such as sorting and searching algorithms.

Introduction

I. INTRODUCTION

An algorithm visualizer is a web application where you can see how different algorithms work step by step. It's like watching how different sorting and searching algorithms works . No. of elements can be increases or decreased , speed of algorithm can be changed, we can even reset the algorithms iterations again and again. These algorithms are used for solving problems, and the visualizer helps you understand them better by showing each step visually. For example, you can watch how sorting algorithms arrange numbers in order, or how pathfinding algorithms navigate through a maze. It's a fun and interactive way to learn about the inner workings of algorithms without getting lost in complex code.

Let's describe the algorithm visualizer web application you have:

1. Number of Elements: This feature allows users to choose the quantity of elements they want to work with. For instance, if they're exploring sorting algorithms, they can decide whether they want to sort 10, 50, or 100 elements. This flexibility enables users to observe how algorithms behave with varying amounts of data.
2. Speed Control: The speed control feature lets users adjust the pace of the visualization. They can speed up or slow down the animation according to their preference. This allows for a better understanding of how algorithms operate in different time frames.
3. Sorting Algorithms: The application includes various sorting algorithms like Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, and more. Users can select which sorting algorithm they want to visualize and observe how each algorithm sorts the elements in real-time.
4. Searching Algorithms: In addition to sorting algorithms, the application also features different searching algorithms such as Linear Search, Binary Search, Depth-First Search (DFS), Breadth-First Search (BFS), and others. Users can choose searching algorithm to see how it locates elements within the dataset.
5. Interactive Visualization: The visualization is interactive, allowing users to see the algorithm's progress step by step. They can watch as elements move or change position, giving them a clear understanding of how the algorithm operates.
6. Feedback Mechanism: The application may include a feedback mechanism where users can provide comments or suggestions for improvement. This helps in refining the application and making it more user-friendly.
7. Responsive Design: The web application is designed to be responsive, meaning it works well on different devices such as desktops, laptops, tablets, and smartphones. This ensures that users can access and interact with the visualization from any device with an internet connection.

Overall, this algorithm visualizer web application provides an intuitive and educational platform for users to explore and understand various sorting and searching algorithms. It offers flexibility, interactivity, and educational value to users interested in learning about algorithms.

II. LITERATURE REVIEW

A. Relevance of Work

Every software engineer should have a good understanding of DSA to develop efficient software. Visualizers have a good history of providing effective understanding to the users. Many algorithm visualizers have been developed over the years.

In 2008, paper “AlCoLab: Architecture of Algorithm Visualization System” concerns the style of script supported algorithm visualization systems for educational purposes, focusing on the support and the improvement that those systems provide in the process of teaching of an conceptual subject such as algorithms.

In 2019, paper “Towards Developing an Effective Algorithm Visualization Tool for Online Learning” reports a work-in-progress research project at Athabasca University on developing an effective algorithm visualization tool for online learning.

In 2019, paper “Open Interactive Algorithm Visualization ” presents a work-in-progress project form developing an open interactive algorithm visualization website.

In 2021, paper “AlgoAssist: Algorithm Visualizer and Coding Platform for Remote Classroom Learning” focuses on "algorithm visualization", which allows a better understanding of its flow and operation. It supports the combination of the lab into a single application dedicated to pre-assessment, algorithm explanation, visualization, coding, and post-assessment.

In 2021, paper “Algorithm Visualizer ” aims to simplify and deepen the understanding of algorithms operation.

Within the paper we talk about the possibility of improving the standard methods of teaching algorithms, with the algorithm visualizations.

III. MATERIALS AND PROPOSED METHODS

System Architecture The proposed system involves the simulation of the different type of algorithms codes. As you can see, there are no major components besides the three coding languages. Most websites have tools or scripts that require a server on the back-end (like PHP), but it is not necessary in this case since React JS runs right in the user’s browser. Figure 1: System Architecture 1. HTML5 and CSS are used for the interface. The HTML5 communicates with the React JS code and vice versa to launch the appropriate algorithms and update the interface accordingly, as seen with a single, bidirectional arrow. As the React JS was modified from a functional programming focus to a more object-oriented one, the parts of the HTML5 that did change were the function calls for each button. All of the back-end interaction is abstracted to the various buttons for selecting algorithms and running the animation       

IV. PROPOSED WORK

A. System Architecture

The proposed system includes the visualization of algorithms such as sorting, Searching and path-finding algorithms. HTML5 and CSS are used for interface. HTML5 communicates with ReactJs code and vice versa to visualize the particular algorithm and update the interface accordingly as shown in Fig I with bidirectional arrow.

The proposed system contains 3 types of algorithms

1. Sorting Algorithm
2. Searching Algorithm
3. Path-finding algorithms

Sorting Algorithms: A sorting algorithm is used to rearrange the array or list of numbers according to a comparison operator on the elements. List of elements can be arranged in ascending or descending order as per comparison operator.

Searching Algorithms: Searching algorithms are developed to check or retrieve an element from a data structure where it is stored. These algorithms are classified in 2 main types based on the type of search operation  Linear search: In this algorithm the list of array is traversed sequentially and every element is checked. Interval Search : This algorithm is specially developed to search in a sorted list of elements. It is more efficient since it does not check all the elements  Example: Binary search Path-finding Algorithm :  There are many problems in computer science that needs user to find the shortest path between set points to solve such problems Path-finding Algorithms are developed.

Conclusion

This system is implemented for visualizing some of the sorting, searching, path-finding algorithms. This is a helpful tool for all kinds of students and tutors to easily understand the execution of algorithms. For future enhancement we can include more algorithms of sorting, searching and path-finding.

References

[1] REFERENCES K. Becker and M. Beacham, \"A tool for teaching advanced data structures to computer science students: an overview of the BDP system,\" Journal of Computing Sciences, vol. 16, no. 2, pp. 65-71, 2001 . [2] E. Vrachnos and A. Jimoyiannis, \"Design and evaluation of a web-based dynamic algorithm visualization environment for novices,\" Procedia Computer Science, vol. 27, pp. 229-239, 2014. [3] F. E, A. M and S. C, \"The role of visualization in computer science education,\" Computers in the Schools, vol. 29, pp. 95-117, 2012. D F. E, A. M and S. C, \"The role of visualization in computer science education,\" Computers in the Schools, vol. 29, pp. 95-117, 2012. [4] D. Hundhausen, S. Douglas and J. Stasko, \"A metastudy of algorithm visualization effectiveness,\" Journal of Visual Languages and Computing, vol. 3, no. 3, pp. 259-290, 2002. [5] G. Robling and T. L. Naps, \"A testbed for pedagogical requirements in algorithm visualizations,\" in Conference on Innovation and Technology in Computer Science Education, New York, USA, 2002. [6] J. Urquiza-Fuentes and J. A. Velazquez-Iturbide, \"A survey of successful evaluations of program visualization and algorithm animation systems,\" ACM Transactions on Computing Education, vol. 9, no. 2, pp. 1-24, 2009. [7] Bremananth R, Radhika V Thenmozhi S “Visualizing Sequence of Algorithms for Searching and Sorting” 2009 International Conference on Advances in Recent Technologies in Communication and Computing- 2009. [8] T. L. Naps, G. Robling, V. Almstrum, W. Dann, R. Fleischer, C. Hundhausen, A. Korhonen, L. Malmi, M. McNally, S. Rodger and J. A. Velazquez-Iturbide, \"Exploring the role of visualization and engagement in computer science education,\" in Proceedings of ITiCSE on Innovation and Technology in Computer Science Education, New York, USA, 2002. [9] A. Dix, J. Finlay, G. D. Abowd and R. Beale, Human-Computer Interaction, 3. Edition, Ed., Harlow: Pearson Education, 2004.

Copyright

Copyright © 2024 Kanak Joshi, Payal Kewat, Ragini Chouhan. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.