VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Belagavi-590018, Karnataka
 GURU NANAK DEV ENGINEERING COLLEGE
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

“Algorithm Visualizer”
Submitted by:- Under the Guidance of:-
Akshay Kumar (3GN18CS010) Prof. Asha P.
Anmolpreet Singh (3GN18CS015)
Gurpreet Kaur (3GN18CS030)
K.S Shashank (3GN18CS037)
INTRODUCTION

Algorithm analysis and design is a great challenge for both computer and information science
students. Fear of programming, lack of interest and the abstract nature of programming
concepts are main causes of the high dropout and failure rates in introductory programming
courses. With an aim to motivate and help students, a number of researchers have proposed
various tools. Although it has been reported that some of these tools have a positive impact
on acquiring programming skills, the problem still remains essentially unresolved.
This project describes “ ALGORITHM VISUALISER ”, a tool for visualization of algorithms.
Algorithm Visualiser is an easy-to-set-up and fully automatic visualization system with step-by-
step explanations and comparison of algorithms. Design principles and technical structure of
the visualization system as well as its practical implications and educational benefits are
presented and discussed.
PROBLEM STATEMENT
 Algorithms is one of a foundation concept of computer science used to prepare students
to further important concepts. Traditionally, students learn this concept by memorizing
facts of an execution process of a certain predefined algorithm resulting in having a
superficial understanding of the underlying process. The students are deprived their
opportunities to solve the problems by themselves, and having low development of
problem-solving skills, such as Computational thinking.
 While computer science students have to solve many novel problems, lacking the
essential cognitive skills would be a problem since the problem-solving skills are very
crucial in computer science education.
 In order to promote skills, using visualization is a good mediator because it has many
pedagogical benefits and promotes active learning and student-centered learning.
 Literature Survey
 A Sorting Algorithm is used to rearrange a given array or list elements according to a comparison
operator on the elements. The comparison operator is used to decide the new order of elements
in the respective data structure
 Searching Algorithms are designed to check for an element or retrieve an element from any data
structure where it is stored
 Path finding  is the plotting, by a computer application, of the shortest route between two points.
It is a more practical variant on solving mazes. 
Algorithm Visualization
 Often called algorithm animation can be defined as the use of images to convey some useful
information about algorithms. That information can be a visual illustration of an algorithm’s
operation, of its performance on different kinds of inputs, or of its execution speed versus that
of other algorithms for the same problem. To accomplish this goal, an algorithm visualization
uses graphic elements— points, line segments, two- or three-dimensional bars, and so on—to
represent some “interesting events” in the algorithm’s operation.

There are two principal variations of algorithm visualization:

 Static algorithm visualization
 Dynamic algorithm visualization, also called algorithm animation
 SORTING ALGORITHM
 Bubble Sort : It is the simplest sort method which performs sorting by  repeatedly moving the largest element to the
highest index of  the array. It comprises of comparing each element to its  adjacent element and replace them
accordingly. 
 Merge Sort : Merge sort follows divide and conquer approach in which, the  list is first divided into the sets of equal
elements and then  each half of the list is sorted by using merge sort. The sorted  list is combined again to form an
elementary sorted array.
 Quick Sort : Quick sort is the most optimized sort algorithms which  performs sorting in O(n log n) comparisons. Like
Merge sort,  quick sort also work by using divide and conquer approach.
 Selection Sort  : Selection sort finds the smallest element in the array and place  it on the first place on the list, then it
finds the second smallest  element in the array and place it on the second place. This  process continues until all the
elements are moved to their  correct ordering. It carries running time O(n2) which is worse than insertion sort.
 Insertion Sort :  Insertion sort is a simple sorting algorithm that works similar  to the way you sort playing cards in your
hands. The array is  virtually split into a sorted and an unsorted part. Values from  the unsorted part are picked and placed
at the correct  position in the sorted part.
 Heap Sort : Heap sort is a comparison-based sorting technique based on Binary Heap data structure. It is similar to
selection sort where we first find the minimum element and place the minimum element at the beginning. We repeat the
same process for the remaining elements
PATHFINDING AND SEARCHING ALGORITHM

Search Algorithm : 
 The searching algorithms are used to search or find one or more than one element from a
dataset. These type of algorithms are used to find elements from a specific data
structures.
 Searching may be sequential or not. If the data in the dataset are random, then we need
to use sequential searching. Otherwise we can use other different techniques to reduce
the complexity
Path Finding Algorithm :
 Path finding algorithms build on top of graph search algorithms and explore routes
between nodes, starting at one node and traversing through relationships until the
destination has been reached.
 These algorithms find the cheapest path in terms of the number of hops or weight.
Weights can be anything measured, such as time, distance, capacity, or cost
 PROPOSED SYSTEM
The proposed system involves the simulation of the different  Path Finding Algorithm
type of algorithms as following,
 1. Dijkstra's algorithm
Sorting Algorithm :
1. Bubble Sort 2. Depth First Search

2. Quick Sort 3. Breadth First Search

3. Selection Sort 4. A* Search
4. Heap Sort
 Search Algorithm:
1. Linear Search.
2. Binary Search
3. Jump Search
4. Exponential Search
SYSTEM REQUIREMENTS
HARDWARE REQUIREMENTS :-
 System type: 64-bit OS
 Processor: Intel Core i5 Processor(10th Gen)
 8GB RAM

SOFTWARE REQUIREMENTS :-
 HTML5
 CSS3
 JavaScript
 Visual Studio Code
 Operating System – Windows 10
WORKING
 The back-end code is comprised of HTML5, CSS, and JavaScript. All three types of code are
contained in one .html file and can be run solely from this file. One of the advantages of HTML
5 is that it is not necessary to include different types of web languages in a single file. Below in
Figure below is an illustration of how the three coding languages relate and communicate with
each other.

HTML5 and CSS are used for the interface. The HTML5 communicates with the JavaScript code
and vice versa to launch the appropriate algorithms and update the interface accordingly, as seen
with a single, bidirectional arrow.
All of the back-end interaction is abstracted to the various buttons for selecting algorithms and
running the animation.
HOME PAGE
SORTING ALGORITHM
PATH-FINDING ALGORITHM
SEARCHING ALGORITHM
THANK YOU