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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
lOMoARcPSD|41678232
Code :
Kindly Refer to GitHub Link: -
GitHub - gaurav459-sharma/Sorting-Visualizer at master
9 | Page
Downloaded by sahil verma (sv176670@gmail.com)
lOMoARcPSD|41678232
Home Page :
10 | P a g e
Downloaded by sahil verma (sv176670@gmail.com)
lOMoARcPSD|41678232
Working:-
Merge sort visualisation-
Quick Sort visualisation-
11 | P a g e
Downloaded by sahil verma (sv176670@gmail.com)
lOMoARcPSD|41678232
Codes:-
12 | P a g e
Downloaded by sahil verma (sv176670@gmail.com)
lOMoARcPSD|41678232
13 | P a g e
Downloaded by sahil verma (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
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 (sv176670@gmail.com)
