ViSA: VISUALIZATION OF SORTING ALGORITHMS

Submitted in the partial fulfilment of the requirements of the degree

of Bachelor of Engineering

by

Sr. No. Name of the Student IEN No.

1 Nupur Luhar 12112056
2 Sakshi Thakare 12112028
3 Shruti Pawar 12112002

Under the Guidance

of Dr. Sanjay Sharma

Department of Computer Engineering

New Horizon Institute of Technology and Management,
University of
Mumbai (2022-2023)

i
 Department of Computer Engineering
New Horizon Institute of Technology and Management,
University of Mumbai

CERTIFICATE

This is to certify that the project entitled “ViSA: VISUALIZATION OF

SORTING ALGORITHMS”, Group Number 3 of

Sr. No. Name of the Student IEN No.

1 Nupur Luhar 12112056
2 Sakshi Thakare 12112028
3 Shruti Pawar 12112002

has satisfactorily completed of mini-project – 1B in partial fulfillment of the

requirement for the award of the Degree of Bachelor of Engineering in “Computer
Engineering”.

Dr. Sanjay Sharma

Mini-Project
Guide

Dr. Sanjay Sharma Dr. Prashant Deshmukh

Head of Department Principal
ii
 Department of Computer Engineering
New Horizon Institute of Technology and Management,
University of Mumbai

Mini Project-B Approval for S.E.

This project report entitled “VISA: VISUALIZATION OF

SORTING ALGORITHMS” by Nupur Luhar, Sakshi Thakare
and Shruti Pawar is approved for the degree of Bachelor of
Engineering in Computer Engineering,2022- 2023.

Examiners:

1. Name:

Sign with Date:

2. Name:

Sign with Date:

Date:

Place:

ii
 Department of Computer Science and Design
New Horizon Institute of Technology and
Management
University of Mumbai

Declaration

We declare that this written submission represents my ideas in my own words and
where others’ ideas or words have been included, I have adequately cited and
referenced the original sources. I also declare that I have adhered to all principles of
academic honesty and integrity and have not misrepresented or fabricated or falsified
any idea/data/fact/source in my submission. I understand that any violation of the above
will be cause for disciplinary action by the institute and can also awoke penal action
from the sources which have thus not been properly cited or from whom proper
permission has not been taken when needed.

1. Nupur Luhar (12112056)

2. Sakshi Thakare (12112028)

3. Shruti Pawar (12112002)

Dat
i
 Department of Computer Science and Design
New Horizon Institute of Technology and
Management
University of Mumbai

Acknowledgement

We would like to take this opportunity to thank one and all.

It is our immense pleasure to express our gratitude to our Guide, Dr. Sanjay Sharma for
providing us with constructive and positive feedback during the preparation of this project.

We express gratitude to Prof. Nirali Arora for constantly guiding us and giving us valuable
insights.

We would like to express our thanks to the Head of Artificial Computer Engineering
Department, Dr. Sanjay Sharma and all other staff members for their encouragement and
suggestions.

Last but not the least, we are thankful to our friends for their support and coordination. We are
also thankful to our parents for their constant support and best wishes.

1. Nupur Luhar (12112056)

2. Sakshi Thakare (12112028)

3. Shruti Pawar (12112002)

Dat
v
 ABSTRACT

This report outlines a study that tested the benefits of animated sorting algorithms for teaching
and discusses a study performed on animating sorting algorithms as a learning aid for classroom
instruction.

Hence, Sorting visualizer is high level dynamic visualizer of software which uses UI techniques
to monitor the computational and portray steps of algorithms.
It is a useful tool in engineering particularly at many stages of designing, implementing and
experimental evaluation, and presentation of the algorithms.

To visualize four sorting algorithms, a web-based animation tool was created using HTML,
CSS, JavaScript to visualize how various sorting algorithms like Selection Sort, Bubble Sort,
Insertion Sort, Quick Sort and Merge Sort work.

The web application was Created the website's User Interface (UI) using HTML, CSS and
implementation of animations, effects and core functionalities (sorting algorithms) was
implemented using JavaScript and React JS.

A visualization of data is implemented as a bar graph, after which a data sorting and algorithm
may be applied. User can perform sorting algorithms on these bars to sort these bars in an
ascending order by applying the different algorithms by clicking on the buttons of these sorting
algorithms.

The resulting animation is then performed either automatically or by the user, who then sets
their own pace. This is research on the computer science curriculum's approach to learning
algorithms. The experiment featured a presentation and a survey, both of which asked students
questions which may illustrate improvements in algorithm comprehension.

v
 TABLE OD CONTENTS

Sr. No. Content Page No.

1. Declaration iv
2. Acknowledgement v
3. Abstract vi
4. Table of Content vii
5. List of Figures ix
6. List of Tables ix

7. Chapter 1
Introduction..........................................................1

1.1 Purpose................................................................................1
1.2 Overview of document........................................................2

9. Chapter 2
Literature Review.................................................3

2.1 Existing System...................................................................3

2.2 Literature Review................................................................4

10. Chapter 3
Problem Statement, Objectives and Scope.........6

3.1 Problem Statement.............................................................6

3.2 Objectives...........................................................................6
3.3 Scope...................................................................................6

v
11. Chapter 4
Proposed System......................................................7

4.1 Advantages of Proposed System............................................7

4.2 System Design........................................................................8

12. Chapter 5
Implementation plan...............................................9

5.1 Gantt Chart.............................................................................9

5.2 Expected Outcome.................................................................10

13. Chapter 6
Conclusion................................................................12

References

Annexure

A Weekly Progress Report

v
 LIST OF FIGURES:

Fig. No. Caption Page No.

5.2.1 Home page 16

5.2.2 Sorting an Array 16
5.2.3 Execution Page 17
5.2.4 Final Result 17

LIST OF TABLES:

Table No. Title Page No.

1 Flowchart 14
2 Schedule Table 15
3 Gantt Chart 15

ix
 CHAPTER 1

INTRODUCTION

1.0 Introduction:

 An algorithm is a sequence of steps or instructions that solves some kind of problem.

Nowadays sorting algorithms are widely used in computer software.
 Sorting is a process of rearranging of items, which are possible to compare, in
ascending or descending order. In the text we are meaning only ascending order if
not stated in a different way. Searching in sorted data is more efficient than in not
sorted ones.
 The text of the thesis describes principles of the most known sorting algorithms
which are demonstrated in the computer program.
It might be used as a source for learning algorithms by students.
Also, the program might be easily used as a demonstration by lecturers and tutors
during classes.

1.1 Purpose:

 The main goal of the thesis was to create a teaching support software with
visualization of the most known sorting algorithms and their variations.
The application supports a graphic visualization of selected algorithms on randomly
generated or manually created array, step-by-step execution possibility, pseudocode
and current state of variables.
 And the purpose to create this web application was to create a program which would
serve as a tool for understanding how most known sorting algorithms work.
The demonstration software is made in a user-friendly and easy-to-use style.
To gain maximal benefit from learning you can try each sorting algorithm on your
data.

1
1.2 Overview of Document:

 The next chapter, the Present Investigation section, of this document gives problem
statement and feasibility analysis of our web application.
 Chapter Three gives an overview of the functionality of the product.
It describes the informal requirements and is used to establish a context for the
technical requirements specification in the next chapter.
 The third chapter, Implementation Details section of this document, is written
primarily for the developers and describes in technical terms the details of the
functionality of the product.
 Both sections of the document describe the same software product in its entirety.

2
 CHAPTER 2
LITERATURE SURVEY

2.1 Existing system:

 In the present system, a student has to approach various algorithms to find the least
time complexity and to attain the result in the minimum required time.
 This often requires a lot of time and effort and eventually makes it harder for the
student/user to understand each algorithm separately and in a much efficient way.
 A student/user may not get desired explanation from these algorithms by solving it
themselves and often the user may be misguided due to lack of understanding and
visualization.

 It is tedious for a student/user to execute a particular array and have it sorted

properly for better understanding and to clear the basics.

2.2 Literature review:

(1) Title: Sorting Algorithm Visualizer

Perspective Author: Shubham Nath, Jatin Gupta, Computer Science
and Engineering, HMRITM, New Delhi, Delhi, India.
Volume:03/Issue:07/July-2021 Impact Factor- 5.354

This paper outlines a study that tested the benefits of animated sorting algorithms for teaching.
To visualize four sorting algorithms, a web-based animation application was constructed.

A visualization of data is implemented as a bar graph, after which a data sorting and algorithm
may be applied.

The resulting animation is then performed either automatically or by the user, who then sets their
own pace.

This is research on the computer science curriculum's approach to learning algorithms.

The experiment featured a presentation and a survey, both of which asked students questions
which may illustrate improvements in algorithm comprehension.
These findings and reactions are catalogued in this document and compared to earlier
investigations

3
(2) Title: VISUALIZATION OF SORTING ALGORITHMS

Perspective Author: Vikas Mukta Varam, Bachelor of Technology

Osmania University College of Technology Hyderabad, India
Volume:02/Issue:04/September-2022 Impact Factor- 6.781

The purpose of this thesis was to develop a graphical tool for the visualization of a
number of sorting methods. The tool also has various other options which help the user
understand and analyze the sorting algorithms implemented.
The programming part of the tool involved designing and implementing the class
hierarchies, application framework, sorting methods, and user-interface.
The following sorting methods that were implemented include one Insertion sort
(Linear Insertion), two Exchange sorts (Bubble sort and Quicksort). Algorithms like
Merge Sort and Selection Sort are also included here.

4
 CHAPTER 3
PROBLEM STATEMENT, OBJECTIVE, AND SCOPE

3.1 Problem Statement:

 We aim to create a web application to simplify learning for the students/users and to
help them understand the concepts of the sorting algorithm in a much efficient way
by helping them with the animated visualization of each algorithm respectively

3.2 Objective:

 Main motive of our web application is to create a teaching support software with
visualization of the most known sorting algorithms and their variations
 We also emphasize to create a program which would serve as a tool for
understanding how most known sorting algorithms work.

3.3 Scope:

 Website Designing is an evergreen field. The job opportunities for website designer
will never end because of the increasing use of internet technology in our everyday
life.
 Here we make ViSA Web Application which would stand out to be really helpful
for the user to understand and implement various sorting algorithms.
Whereas on the other hand, ViSA can stand out to be really helpful for the teaching
faculty to make the students emphasize their knowledge in the required field.
 Educational field is generally a bright and potential employment sector as it offers
wide variety of career opportunities in both the private and public sector, where
innovative and captivating teaching methods are apprehended.
And on the other hand, the student can himself/herself get to learn things without
any help of external resources rather than this web application.

5
 CHAPTER 4
PROPOSED SYSTEM

4.1 Proposed Architecture:

 To overcome the drawbacks of the existing system, the proposed system has been
evolved. This project aims to reduce the paperwork and saving time to generate
accurate results from the visualization of sorting algorithms.
 The system provides with the best user interface. The efficient reports can be
generated by using this proposed system.
 System Architecture is abstract, conceptualization-oriented, global, and focused to
achieve the mission and life cycle concepts of the system.
It also focuses on high ‐ level structure in systems and system elements. It addresses
the architectural principles, concepts, properties, and characteristics of the system-
of- interest. It may also be applied to more than one system, in some cases forming
the common structure, pattern, and set of requirements for classes or families of
similar or related systems.
 Systems Architecture is a generic discipline to handle objects (existing or to be
created) called "systems", in a way that supports reasoning about the structural
properties of these objects.
Systems Architecture is a response to the conceptual and practical difficulties of the
description and the design of complex systems.

4.2 Advantages of Proposed System

 It is trouble-free to use.
 It is a relatively fast approach to learn, implement and visualize the Sorting
Algorithms and its working.
 It is highly reliable, accurate results from the Web Application.
 Best User Interface.
 Efficient reports.

6
4.3 System design:

Fig 1: Flowchart

7
 CHAPTER 5
IMPLEMENTATION
PLAN

5.0 Implementation plan:

Sr. Title Start Date End Date Duration

No.
1 Topic Discussion 29-01-2023 05-02-2023 7 days

2 Topic Finalization 05-02-2023 06-02-2023 1 day

3 Collecting Information and Studying Algorithms 12-02-2023 14-02-2023 2 days

4 Assembling the Base with HTML and CSS 26-02-2023 12-03-2023 3 days
5 Coding Related Work 13-03-2023 26-03-2023 13 days

6 Project Completion 08-04-2023 10-04-2023 2 days

Table:1 - Schedule Table

5.1 Gantt Chart:

Table: 2- Gantt Chart

8
5.2. Expected Outcome:

5.2.1 Homepage:

Fig:5.2.1- Homepage

5.2.2 While sorting given array in selected Sorting Algorithm

(Merge sort Algorithm):

Fig.5.2.2- Sorting an Array

9
5.2.3 While Executing-In all Sorting Algorithms:

Fig.5.2.3 Execution Page

5.2.4 Output- completely sorted array in all Sorting Algorithms:

Fig.5.2.4 Final Result

1
 CHAPTER 6
CONCLUSION

 The purpose of our project was to develop an educational tool that would engage
students in the learning process, helping them to acquire knowledge about well-
known sorting algorithms.
 Sorting Visualization offers a full range of functionalities such as data set entry and
animation control as well as the explanation and detailed algorithm analysis.

1
 References:

[1.] T. Bingmann. “The Sound of Sorting - ‘Audibilization’ and

Visualization of Sorting Algorithms.” Panthemanet Weblog.
Impressum, 22 May 2013. Web. 29 Mar. 2017

[2.] http://panthema.net/2013/sound-of-sorting.

[3.] https://en.wikipedia.org/wiki/Html

[4.] https://en.wikipedia.org/wiki/CSS

[5.] https://en.wikipedia.org/wiki/javascript

[6.] https://neilpatel.com/blog/essential-html-tags/

[7.] https://www.geeksforgeeks.org/types-software-testing/

[8.] https://www.youtube.com/watch?v=lyZQPjUT 5B4

1
Annexure