lOMoARcPSD|41678232

Sorting-Visualizer-report

Computer (Bundelkhand University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by sahil verma ([email protected])
 lOMoARcPSD|41678232

Mini Project

On

Sorting Visualizer
Session : 2022-23

B.Tech 4th Year (CSE)

Computer Science & Engineering

Bundelkhand Institute of Engineering and Technology

Jhansi (U.P.)- 284128

Submitted to:- Submitted By:-

Prof. Anil Kumar Solanki Gaurav Sharma

(1904310025)

1 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Certificate

This is to certify that this project report entitled “Sorting Visualiser” by

Gaurav Sharma(1904310025) submitted in partial requirements for the
7th Semester and degree of Bachelor of Technology in Computer
Science of the Bundelkhand Institute Of Engineering and Technology -
Jhansi, during the academic year 2022-23, is a bona fide record of work
carried out under my guidance and supervision.

Verified by Guide:
Prof. Anil Kumar Solanki
(Department of Computer Science and Engineering).

2 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Acknowledgement
We are deeply Indebted to Our Respected Head Of Department “Dr .
Yashpal Singh ” For Guiding us and I would like to express my
sincere gratitude to my project guide “Prof. Anil Kumar Solanki” for
giving us the opportunity to work on this topic. It would never be possible
for us to take this project to this level without there innovative ideas and
his relentless support and encouragement.

Submitted By:

Gaurav Sharma (1904310025)

3 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Table of Contents
1. Introduction……………………………………………………….…….5

2. Objectives………………………………………………………...........6

3. Feature ………………………………………………………………..7

4. Technology Used……………….. …………………………….………8

5. Code journey ………………………………………….........…........9

6. Screenshots of Project…….………………....................................10

7. Testing of project …………………………………………………….16

8. Benefits of Project………………………………………………….…17

9. Conclusion and future work…………………………………………18

11. References …………………..………………………….…….... .19

4 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Introduction

The “Sorting Visualiser” project is basically a web

development project which is used to visualize the sorting
algorithms and performs the operation of algorithms step by
step as the algorithms works like Bubble Sort, Selection Sort ,
Merge Sort etc. We shuffle the bars in a random order that is in
a unsorted order.
We perform sorting algorithms on these bars to sort these
bars in a ascending order by applying the different algorithms
by clicking on the buttons of these sorting algorithms .

5 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Objectives

The main objective of Sorting Visualizer project is to learn and

visualise the sorting algorithms how these algorithms works We
can see the steps of swapping or any divide and conquer part of
these bars. Here 5 different types of sorting algorithms is used
to visualise.

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.

6 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Features:

• Visualize sorting part: Users can see the steps followed by these
sorting visualizer as it contains five buttons of different algorithms
to sort the bars.

• Shuffle bars : Users can easily shuffle the bars in random order
i.e. with small height or large height of bars.

• User Friendly: It’s easy for users and quite simple to operate.

• Ease of Use: Being user friendly environment it is very easy to

operate by just clicking the button for the desired result.

• Colours used: Colours should be used to show whether or not

anything is being compared

• Observe the swapping of bars: when a users apply any sorting

algorithms by clicking the button than these bars start sorting by
swapping according to their height .

7 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Overall Description
Tools and Technology used:-

HTML
Html is a basic low level programming language used to make a
base of the web .It stands for Hypertext Markup Language. For
example, content could be structured within a set of paragraphs, a
list of bulleted points, or using images and data tables. It can be
assisted by technologies such as Cascading Style Sheets and
scripting languages such as JavaScript.

CSS (Cascading Style Sheets)

CSS is the language for describing the presentation of Web
pages, including colours, layout, and fonts. It allows one to adapt
the presentation to different types of devices, such as large
screens, small screens, or printers. CSS is independent of HTML
and can be used with any XML-based markup language.

JavaScript
JavaScript, often abbreviated as JS, is a programming language
that conforms to the ECMAScript specification. JavaScript is high-
level, often just-in-time compiled, and multi-paradigm. It has curly-
bracket syntax, dynamic typing, prototype-based object-
orientation, and first-class functions.
JavaScript is a text-based programming language used both on
the client-side and server-side that allows you to make web pages
interactive. Where HTML and CSS are languages that give
structure and style to web pages, JavaScript gives web pages
interactive elements that engage a user.

8 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Code :

Kindly Refer to GitHub Link: -

GitHub - gaurav459-sharma/Sorting-Visualizer at master

9 | Page

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Home Page :

10 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Working:-

Merge sort visualisation-

Quick Sort visualisation-

11 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Codes:-

12 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

13 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Implementation:

Shuffled the bars by clicking on shuffle button -

Before:-

Fig 1.1 View of unsorted array

After Click on Bubble sort :-

Fig 1.2 View of bubble sort

14 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Click on Merge sort

Fig 1.3 View of merge sort

Fig 1.4 View after array is sorted

15 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

TESTING OF PROJECT

Software testing can be stated as the process of verifying and validating

that a software or application is bug free, meets the technical
requirements as guided by it’s design and development and meets the
user requirements effectively and efficiently with handling all the
exceptional and boundary cases.

Software Testing can be broadly classified into two types:

1. Manual Testing

Manual testing includes testing a software manually, i.e., without

using any automated tool or any script. In this type, the tester takes
over the role of an end-user and tests the software to identify any
unexpected behavior or bug. There are different stages for manual
testing such as unit testing, integration testing, system testing, and
user acceptance testing. Testers use test plans, test cases, or test
scenarios to test a software to ensure the completeness of testing.
Manual testing also includes exploratory testing, as testers explore
the software to identify errors in it.

2. Automation testing

Automation testing, which is also known as Test Automation, is when

the tester writes scripts and uses another software to test the product.
This process involves automation of a manual process. Automation
Testing is used to re-run the test scenarios that were performed
manually, quickly, and repeatedly.

16 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Benefits Of Project

Advantages:

• Efficient Way to visualize the working of sorting algorithms.

• This technique is quite simple to explain to someone in
conversation.
• Colours should be used to show whether or not anything is being
compared.
• Shows expected time to finish up the working of the algorithm to
sort the array.
• User friendly and easy to use.

17 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

CONCLUSION AND FUTURE WORK

This web-based animation tool for viewing the following sorting

algorithms functions in great part because of all the time and
effort that I invested into it. Overall, I am not concerned that a
large rework to a different language will be required soon
because JavaScript is still one of the most popular web
languages: resolving the memory difficulties. Following this, we
would implement Merge/Insertion Sort, which takes into
account the Merge Sort. Then, I would start up Quick Sort so
as to finish the job because the code is ready to be integrated.
Finally, I would make the online tool available to the public, with
the feature I want most, which is to make it available to the
public. This might be tough as well. The application that
created the animation tool knows that it's available locally, but
because of concurrency, it can serve numerous requests to the
web site by separate users. As I try to figure out how to make
the code as efficient as possible, I'd need to spend some time
thinking about how to make it work with numerous people using
it. This would be excellent, as it would enable a form of
comparison study.

18 | P a g e

Downloaded by sahil verma ([email protected])

 lOMoARcPSD|41678232

Reference

[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

19 | P a g e

Downloaded by sahil verma ([email protected])