Gujarat Technological University

Chandkheda, Ahmedabad

Bhagwan Mahavir College of Engineering & Technology

Surat, 395017(Affiliated with GTU)

A Mini Project Report on

“Sorting Visualizer”

Under the subject

Summer Internship(3170001)

Department of Computer Engineering

Submitted By
Patel Riya Dineshchandra 180060107042

Academic Year
(2021-2022)

Internal Guide Head of the Department

Ridhdhi Naik Twinkle Ankleshwaria

 Gujarat Technological University
Chandkheda, Ahmedabad

Bhagwan Mahavir College of Engineering & Technology

Surat, 395017 (Affiliated with GTU)

DECLARATION

We hereby declare that the Report, submitted along with the

Internship Report for entitled “Sorting Visualizer” submitted in partial
fulfillment for the degree of Bachelor of Engineering in Computer
Department to Gujarat Technological University, Ahmadabad, is a record
of the work carried out by Bhagwan Mahavir college of Engineering &
Technology under the supervision of Mrs. Ridhdhi Naik and that no part
of any of report has been directly copied from any students’ reports, without
providing due reference.

Name of the student

Riya Patel
 Gujarat Technological University
Chandkheda, Ahmedabad

Bhagwan Mahavir College of Engineering & Technology

Surat, 395017 (Affiliated with GTU)

DEPARTMENT OF COMPUTER ENGINEERING

CERTIFICATE

This is to certify that the mini project on Sorting Visualizer has been
satisfactorily carried by Patel Riya Dineshchandra (180060107042) under
my guidance in the fulfillment of the course Summer Internship (3170001)
work during the academic year 2021-2022.

Internal Guide Head of the Department

Ridhdhi Naik Twinkle Ankleshwaria

Acknowledgement

I wish to express my sincere gratitude to my project guide Prof. Ridhdhi

Naik and all the faculty members for helping me through my project by
giving me the necessary suggestions and advices along with their valuable co-
ordination in completing this work.

I also thank my parents, friends and all the members of the family for their
precious support and encouragement which they had provided in completion
of my work. In addition to that, I would also like to mention the college
personals who gave me the permission to use and experience the valuable
resources required for the project from the college premises.

Thus, in conclusion to the above said, I once again thank the faculties and
members of Bhagwan Mahavir College of Engineering & Technology for
their valuable support in completion of the project.

Thank You
Patel Riya D.
 Content

I. Certificate

II. Acknowledgement

III. Abstract

IV. Chapter 1: Introduction

1.1 Project Summary

1.2 Project Details

1.3 Project Specifications

1.4 Literature Review

1.5 Materials/Tools Required

V. Chapter 2: Design

2.1 Design Methodology

2.2 Implementation Strategy

VI. Chapter 3: Implementation

VII. Chapter 4: Summary

VIII. Chapter 5: Reference

Abstract
Analysis and design of algorithms is a great challenge for both computer
and information science students. Fear of programming, lack of interest, and
the abstract nature of the programming concepts are the main cause of the
high drop out and failure rates in introductory programming courses. With an
aim to motivate and help students, many researchers have proposed different
kinds of tools. Although it has been reported that some of these tools have a
positive impact on gaining programming skills, the problem still remains
mostly unsolved. This report discusses a study performed on animating
sorting algorithms as a learning aid for classroom instruction. A web-based
animation tool is created to visualize five common sorting algorithms:
Selection Sort, Bubble Sort, Insertion Sort, Quick Sort and Merge Sort. The
animation tool represents data as a bar-graph and after selecting an algorithm,
the user can run an automated animation or step through it at their own pace.
Technical structure of the visualization system as well as its practical
implications and educational benefits are presented and discussed.
Chapter 1: Introduction

1.1 Project Summary

It is widely perceived that algorithm visualizations can provide a
powerful alternative to static written presentations (from textbooks) or verbal
descriptions supported by illustrations (from lectures).But creating and
deploying effective algorithm visualizations is difficult. Algorithms and data
structures are an essential part of knowledge in a framework of computer
science. So, within this report, we discuss the extension of standard methods
of teaching algorithms, using the whiteboard or slides, with the algorithm
visualizations.
Algorithmic thinking and programming skills play a central role in
computing education. Students typically need to become familiar with a great
number of different algorithms and data structures. The ability to design an
algorithm for a given problem is one of the most important and challenging
tasks in computer science education. So, this project is a small step towards
making the sorting algorithm easy to understand for the students.

1.2 Project Details

This project describes a web-based tool that visualizes how sorting
algorithms modify and organize a set of data. If you need to organize a list of
people by their age in ascending order, for example, there are multiple
algorithms that can perform the task. In this project, five of the well-known
ones are visualized by representing a histogram. Each bar has a different
height which would make it distinct from the rest of the data as it is being
shifted by the algorithm from its original, unordered position to its final
ordered position. The five algorithms are: Selection Sort, Bubble Sort,
Insertion Sort, Quick Sort and Merge Sort.
This tool is web-based to appeal to a wide spectrum of people using
different technology media. This way, the user would not need to worry about
installing special software or trying to organize configurations to use the
tool.The webpage is coded with HTML5 (Hypertext Markup Language,
Version 5),CSS (Cascading Style Sheets) and JavaScript. The physical
elements of the webpage (buttons and layout) are coded with very minimal
HTML5 code. The next biggest contributor would be the CSS code, which is
responsible for the appearance and behavior of the buttons and text. Finally,
the rest is devoted to JavaScript, responsible for the histogram generation,
movement and algorithm design. All the options refer to designated parts of
the JavaScript code to perform the task.

1.3 Project Specification

In this project, the tool is used to visualize different sorting algorithms
such as Selection Sort, Bubble Sort, Insertion Sort, Quick Sort and Merge
Sort.The user can choose from the given options of algorithms, size of an
array and speed of the animation and then click the button “Sort”. After
clicking the button, the sorting will get started and user will be able to
understand the sorting algorithm easily. All given five sorting algorithms can
be visualized using this tool. In this tool, different colors are used for the bars
to indicate which elements are being compared, sorted and unsorted. When
the two elements are compared, they are of the color blue, elements become
blue and unsorted ones has default color. The array size can be chosen from
the range of 5 to 100. The speed of the animation can be selected as per user’s
requirement. There are several options for speed such as 0.50x, 0.75x, 1.00x,
2.00x and 4.00x.
1.4 Literature Review
I took guidance from the website crio.do for my project. In addition to
that, the website w3schools.com and YouTube channel Traversy Media were
also very helpful for the coding part with some other websites.

1.5 Materials/Tools Required

This project is web-based and coded with HTML5 (Hypertext Markup
Language, Version 5), CSS (Cascading Style Sheets) and JavaScript. So, all
the coding is done in Visual Studio Code which is a source-code editor made
by Microsoft. The testing is done in Google Chrome browser.
Chapter 2: Design

2.1 Design Methodology

The user interface includes components such as a canvas area and
control buttons for the array size, speed of the animation and selections of
algorithm: Selection Sort, Bubble Sort, Insertion Sort, Quick Sort and Merge
Sort. Below in Figure 2.1 is a picture of webpage after it loads.

Figure 2.1

The blue bar contains the selection options for algorithm, array size and
speed of the animation. It also contains the buttons for generating new array
and sorting the array.
After selecting the size of an array, the webpage will look like the
picture shown in Figure 2.2 below.
 Figure 2.2
The user can select any of the five algorithms to see the visualization of
how that algorithm works. There is no algorithm selected by default, so the
user will need to select one before starting the animation. Then select size of
the array to sort from the range of 5 to 100 and user can also choose the speed
of animation.
The buttons also show feedback by changing color when the cursor
hovers over them. An example is shown below where Figure 2.3 shows an
unselected button, and Figure 2.4 shows the same button with feedback.

Figure 2.3 Figure 2.4

The user can choose from the given options of algorithms, size of an
array and speed of the animation and then click the button “Sort”. After
clicking the button, the sorting will get started and user will be able to
understand any of the sorting algorithms: Selection Sort, Bubble Sort,
Insertion Sort, Quick Sort and Merge Sort easily. In this tool, different colors
are used for the bars to indicate which elements are being compared, sorted
and unsorted.
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 JavaScript runs
right in the user’s browser. HTML5 and CSS are used for the interface.
Throughout the project, the code for the HTML5 and CSS did not
change much. As the JavaScript 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 interaction is abstracted to
the various buttons for selecting algorithms and running the animation.

2.2 Implementation Strategy

This web-based sorting visualizer aims to enhance learning of different
types of sorting algorithms for the students of computer science and also to
ease the teaching for the mentors as students need to be familiar with a great
number of different algorithms and data structure so this tool will be a little
help.
Chapter 3: Implementation
When the webpage of Sorting Visualizer is loaded, it looks like the picture
given below in Figure 3.1

Figure 3.1
The look of webpage after selecting the size of an array is shown in Figure
3.2

Figure 3.2
When the user clicks on the “Sort” button, the elements will look as the
picture shown in Figure 3.3 while getting sorted.

Figure 3.3
Figure 3.4 shows the picture of elements when the array is completely sorted.

Figure 3.4
Chapter 4: Summary
While many good algorithm visualizations are available, the need for
more and higher quality visualizations continues. Through much time and
effort, I have successfully created a working web-based animation tool for
visualizing the following sorting algorithms: Selection Sort, Bubble Sort,
Insertion Sort, Quick Sort and Merge Sort. This tool gives options to select
sorting algorithm, size of an array and speed of the animation. After selecting
these, it visualizes the selected sorting algorithm and gives wider idea to the
user. This web-based Sorting Visualizer is an easy-to-navigate tool which can
be really useful to the students of computer science as they need to be familiar
with a great number of different algorithms and data structure.
Chapter 5: Reference
1. https://www.crio.do/projects/javascript-sorting-visualizer/
2. https://www.w3schools.com/
3. https://youtube.com/c/TraversyMedia
4. https://www.freecodecamp.org/