VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana, Sangama, Belagavi-590010

PROJECT REPORT
ON

“SORTING VISUALIZATION”
For the Academic year 2022-2023
Submitted by:

1. YASH CHOUBISA 1MV21CS124

2.YASHASWA SHARMA 1MV21CS125
3.SOURABH PANDEY 1MV21CS105
4. YASHDEEP SAHU 1MV21CS126

Project carried out at

Sir M. Visvesvaraya Institute of Technology
Bangalore - 562157
 Under the guidance of
Mrs. SAVITA CHOUDHARY

SIR M VISVESVARAYA INSTITUTE OF TECHNOLOGY

BANGALORE -562157

DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING
DECLARATION

2
 We hereby declare that the entire project work embodied in this dissertation has been
carried out by us and no part has been submitted for any degree or diploma of any institution
previously.

Place: Bangalore

Date:16TH March 2023

Signature of Students:

ABSTRACT

3
The project will consist of a graphical user interface (GUI)
that displays the sorting process step-by-step, allowing
users to see how the algorithm works. Users will be able
to select from a variety of sorting algorithms, including
bubble sort, insertion sort, selection sort.
The project will be developed using modern web
technologies such as HTML, CSS, and JavaScript. It will be
designed to be accessible to a wide range of users, from
beginner programmers to experienced developers
looking to refresh their understanding of sorting
algorithms.

TABLE OF CONTENTS

Declaration I

Abstract II
4
Table of contents

1. INTRODUCTION

2. OBJECTIVES

3. TOOLS AND TECHNOLOGIES

4. CODE

5. OUTPUT

6. CONCLUSION

5
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
6
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 performsorting
algorithms on these bars
to sort these

7
bars in a ascending
order by applying the
different algorithms
by clicking on the
buttons of these sorting
algorithms .
Introduction
The “Sorting
Visualiser” project is
basically a web
8
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 ,

9
Merge Sort etc. We
shuffle the bars in a
random order that is in
a unsorted order.
We performsorting
algorithms on these bars
to sort these
bars in a ascending
order by applying the
different algorithms

10
by clicking on the
buttons of these sorting
algorithms .
Introduction
The “Sorting
Visualiser” project is
basically a web
development project
which is used to
visualize the sorting
11
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.

12
 We performsorting
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 .
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
13
Bubble Sort, Selection Sort , Merge Sort, Heap Sort, Quick Sort and
Insertion Sort. 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 .

Functionality:

The sorting visualizer should include the following features:

- A GUI that will allow users to interact with the data, such as changing
the size of the array set, changing the order of the array, and changing
the speed of the sorting algorithm.

- A visualization of the sorting algorithm, such as a bar graph, line

graph, or bubble chart, to illustrate the progress of the sorting
algorithm.

- A control panel that will allow the user to select different sorting
algorithms, adjust the speed of the sorting algorithm, and pause and
resume the sorting algorithm.

- A timer that will measure the time it takes for the sorting algorithm to
complete.

14
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
15
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

16
resulting animation is
then performed either
automatically or by
the user, who then sets
their own pace.
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.

Main Objectives:

 To demonstrate the different sorting algorithms and the way they

work.
17
 To give a visual representation of the sorting process.
 To improve the user's understanding of the sorting algorithms.
 To improve the user's understanding of the complexity and
efficiency of the sorting algorithms.
 To identify the most efficient sorting algorithm for a given dataset.
 To enable comparison of different sorting algorithms.
 To provide an interactive way to learn sorting algorithms.
 To provide an enjoyable learning experience.

18
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
19
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)

20
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
21
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-

22
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

23
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.
Tools and Technology used:-

HTML:
24
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.

25
 Code:
HTML:
<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Sorting Visualization</title>

    <link rel="stylesheet" type="text/css" href="style/index.css" />

  </head>

  <body>

    <div class="header">

      <h1>Sorting Visualizer</h1>

      <div class="vars">

        <div class="range">

          <div class="slide">

            <label for="bars">ِArray Size</label> :

            <input

              id="bars"

              type="range"

              name="bars"

              min="1"
26
              max="100"

              value="50"

              oninput="setup()"

              onchange="setup()"

            />

            <span id="b"></span>

          </div>

          <div class="slide">

            <label for="delay">Speed</label> :

            <input

              id="delay"

              type="range"

              name="delay"

              min="0"

              max="1000"

              value="25"

              oninput="setup()"

              onchange="setup()"

            />

            <span id="d"></span>

          </div>

        </div>

        <div class="sorts">

          <input
27
            type="button"

            onclick="SelectionSort()"

            value="Selection Sort"

          />

          <input type="button" onclick="BubbleSort()" value="Bubble Sort" />

          <input

            type="button"

            onclick="InsertionSort()"

            value="Insertion Sort"

          />

          <input type="button" onclick="MergeSort()" value="Merge Sort" />

          <input type="button" onclick="QuickSort()" value="Quick Sort" />

          <input

            type="button"

            onclick="HeapSort()"

            value="Heap Sort"

          /><br /><br />

        </div>

        <button onclick="reset()">Generate New Array</button>

      </div>

    </div>

    <div id="container"></div>

    <script src="App/beep.js"></script>

    <script src="App/script.js"></script>
28
  </body>

</html>

CSS:
*{

    margin: 0;

@font-face {

    font-family: "Pacifico";

    src: url("Fonts/Pacifico-Regular.woff2") format('woff2');

#container{

    display: flex;

    margin: 0 auto;

    width: intrinsic;          

    width: -moz-max-content;  

    width: -webkit-max-content;

    height: 60%;

#b{

    display: inline-block;

29
    margin-left: 1vw;

    width: 1vw;

#d{

    display: inline-block;

    margin-left: 1vw;

    width: 1vw;

#bars, #delay{

    vertical-align: middle;

.header{

    display: flex;

    flex-wrap: wrap;

    font-weight: bold;

    background-color: #fd0081;

    margin: 0;

    color: white;

    padding: 1vw 1vw 2vw 1vw;

    margin-bottom: 2vw;

h1{
30
    font-size: 3vw;

    font-family: Pacifico, cursive;

    font-weight: lighter;

    width: 25%;

    text-align: center;

.range{

    justify-content: space-evenly;

    display: flex;

    flex-wrap: wrap;

    flex-flow: wrap;

.slide{

    margin: 0vw 1vw;

.bar{

    border: 0.05vw solid black;

    width:0.6vw;

    margin:0.1vw;

    background-color: #fd0081;

.sorts{

    display: flex;

    justify-content: center;
31
    flex-wrap: wrap;

.vars{

    width: 60%;

    align-self: flex-start;

    text-align: center;

    font-size: 1.3vw;

    font-family: sans-serif;

input[type="button"] {

    margin: 1.5vw 0.5vw;

input[type="button"]:hover, button:hover{

    background-color: #f8a7a7;

    cursor: pointer;

    color: #1200a4;

input[type="button"]:disabled, input[type="range"]:disabled{

    background-color: #ffffff;

    cursor: not-allowed;

    color: blue;

input[type="button"], button{

    background: white;
32
    border: none;

    padding: 1.3vh;

    border-radius: 9vw;

    min-width: 8vw;

    color: rgb(6, 6, 223);

    font-size: 1.2vw;

JavaScript:
let bars = [];

const def = "#fd0081", chng = "#431f91", finished = "#8ef511", selected = "yellow";

window.onload = setup();

async function setup() {

    let b = document.getElementById("bars");

    let d = document.getElementById("delay");

    document.getElementById("b").innerText = b.value;

    document.getElementById("d").innerText = d.value + "ms";

    if (bars.length != parseInt(b.value)) {

        generateBars(parseInt(b.value));

  }

function reset() {
33
    location.reload();

function Disable_The_Input() {

    let x = document.getElementsByTagName("input");

    for (let i = 0; i<x.length; i++)

        x[i].disabled = true;

    return parseInt(document.getElementById("delay").value);

function Finished_Sorting() {

    let x = document.getElementsByClassName("bar");

    for (let i = 0; i<x.length; i++)

        x[i].style.backgroundColor = finished;

    x = document.getElementsByTagName("input");

    for (let i = 0; i<x.length; i++)

        x[i].disabled = false;

function generateBars(n = -1) {

    bars = [];

    let container = document.getElementById("container");

    n = n <0 ?Math.random() * 20 : n;
34
    for (let i = 0; i< n; i++) {

        bars.push('<div class="bar" id="' + i + '" style="height:' + Math.floor(2 + Math.random() *

98) + '%"></div>');

  }

    container.innerHTML = bars.join('');

function Sleep(ms) {

    return new Promise(resolve =>setTimeout(resolve, ms));

function MapRange(value, in_min, in_max, out_min, out_max) {

    return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;

//=============================== Sorting Algorithms

==================================//

// 1

// SELECTION SORT

// SelectionSort() : Implementation of selection sort algorithm. O(n^2)

async function SelectionSort() {

    let delay = Disable_The_Input();

    let container = document.getElementById("container");

35
    for (let i = 0; i<bars.length; i++) {

        let mn_ind = i;

        let curr_id = bars[i].split('id="')[1].split('"')[0];

        document.getElementById(curr_id).style.backgroundColor = selected;

        let sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,

500, 1000);

        beep(100, sound, delay)

        for (let j = i + 1; j <bars.length; j++) {

            let nxt_ele = bars[j].split('id="')[1].split('"')[0];

            document.getElementById(nxt_ele).style.backgroundColor = chng;

            let a = parseInt(bars[mn_ind].split(/[:%]/)[1]);

            let b = parseInt(bars[j].split(/[:%]/)[1]);

            if (a > b) mn_ind = j;

            await Sleep(delay / 5.0);

            document.getElementById(nxt_ele).style.backgroundColor = def;

    }

        let nxt_ele = bars[mn_ind].split('id="')[1].split('"')[0];

        document.getElementById(nxt_ele).style.backgroundColor = selected;

        await Sleep(2 * delay / 5.0);

        let tmp = bars[mn_ind];

        bars[mn_ind] = bars[i];

        bars[i] = tmp;

36
        container.innerHTML = bars.join('');

        await Sleep(2 * delay / 5.0);

        document.getElementById(curr_id).style.backgroundColor = def;

        document.getElementById(nxt_ele).style.backgroundColor = def;

  }

    Finished_Sorting();

// 2

// BUBBLE SORT

// BubbleSort() : Implementation of bubble sort algorithm. O(n^2)

async function BubbleSort() {

    let delay = Disable_The_Input();

    let container = document.getElementById("container");

    for (let i = 0; i<bars.length - 1; i++) {

        let has_swap = false;

        for (let j = 0; j <bars.length - i - 1; j++) {

            let curr_id = bars[j].split('id="')[1].split('"')[0];

37
            let nxt_ele = bars[j + 1].split('id="')[1].split('"')[0];

            document.getElementById(curr_id).style.backgroundColor = selected;

            let sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2,

100, 500, 1000);

            beep(100, sound, delay)

            document.getElementById(nxt_ele).style.backgroundColor = chng;

            await Sleep(delay / 2);

            let a = parseInt(bars[j].split(/[:%]/)[1]);

            let b = parseInt(bars[j + 1].split(/[:%]/)[1]);

            if (a > b) {

                has_swap = true;

                let t = bars[j];

                bars[j] = bars[j + 1];

                bars[j + 1] = t;

                container.innerHTML = bars.join('');

      }

            document.getElementById(curr_id).style.backgroundColor = selected;

            document.getElementById(nxt_ele).style.backgroundColor = chng;

            await Sleep(delay / 2.0);

            document.getElementById(curr_id).style.backgroundColor = def;

            document.getElementById(nxt_ele).style.backgroundColor = def;

38
    }

        if (has_swap == false) break;

  }

    Finished_Sorting();

// 3

// INSERTION SORT

// InsertionSort() : Implementation of inserion sort algorithm. O(n^2)

async function InsertionSort() {

    let delay = Disable_The_Input();

    let container = document.getElementById("container");

    for (let i = 1; i<bars.length; i++) {

        let j = i - 1;

        let key = bars[i];

        let curr_id = key.split('id="')[1].split('"')[0];

        let nxt_ele = bars[j].split('id="')[1].split('"')[0];

        document.getElementById(curr_id).style.backgroundColor = selected;

        let sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,

500, 1000);

        beep(100, sound, delay)

39
        while (j >= 0 &&parseInt(bars[j].split(/[:%]/)[1]) >parseInt(key.split(/[:%]/)[1])) {

            document.getElementById(nxt_ele).style.backgroundColor = def;

            nxt_ele = bars[j].split('id="')[1].split('"')[0];

            document.getElementById(nxt_ele).style.backgroundColor = chng;

            await Sleep(delay);

            bars[j + 1] = bars[j];

            j--;

    }

        bars[j + 1] = key;

        container.innerHTML = bars.join('');

        document.getElementById(curr_id).style.backgroundColor = selected;

        document.getElementById(nxt_ele).style.backgroundColor = chng;

        await Sleep(delay * 3.0 / 5);

        document.getElementById(curr_id).style.backgroundColor = def;

        document.getElementById(nxt_ele).style.backgroundColor = def;

  }

    Finished_Sorting();

// 4

// MERGE SORT

// Slide_down() : Places bars[r] at lth position by sliding other bars to the right.

40
function Slide_down(l, r) {

    let temp = bars[r];

    for (let i = r - 1; i>= l; i--) {

        bars[i + 1] = bars[i];

  }

    bars[l] = temp;

async function merge(l, m, r, d) {

    let y = l;

    let i = l;

    let j = m + 1;

    while (i< j && j <= r) {

        let curr_id = bars[j].split('id="')[1].split('"')[0];

        let nxt_ele = bars[i].split('id="')[1].split('"')[0];

        document.getElementById(curr_id).style.backgroundColor = selected;

        document.getElementById(nxt_ele).style.backgroundColor = chng;

        let a = parseInt(bars[j].split(/[:%]/)[1]);

        let b = parseInt(bars[i].split(/[:%]/)[1]);

        if (a > b) i++;

        else {

            Slide_down(i, j);
41
            i++; j++;

    }

        await Sleep(d / 2.0);

        container.innerHTML = bars.join('');

        document.getElementById(curr_id).style.backgroundColor = selected;

        document.getElementById(nxt_ele).style.backgroundColor = chng;

        let sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,

500, 1000);

        beep(100, sound, d)

        await Sleep(d / 2.0);

        document.getElementById(curr_id).style.backgroundColor = def;

        document.getElementById(nxt_ele).style.backgroundColor = def;

        sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,

500, 1000);

        beep(100, sound, d)

  }

async function mergeSort(l, r, d) {

    if (l < r) {

        let m = parseInt(l + (r - l) / 2);

        await mergeSort(l, m, d);

        await mergeSort(m + 1, r, d);

        await merge(l, m, r, d);

  }
42
}

async function MergeSort() {

    let delay = Disable_The_Input();

    await mergeSort(0, bars.length - 1, delay);

    Finished_Sorting();

// 5

// QUICK SORT

// Partition(): Places the (r)th bar at the correct position

async function Partition(l, r, d) {

    let i = l - 1;

    let j = l;

    let id = bars[r].split('id="')[1].split('"')[0];

    document.getElementById(id).style.backgroundColor = selected;

    for (j = l; j < r; j++) {

        let a = parseInt(bars[j].split(/[:%]/)[1]);

        let b = parseInt(bars[r].split(/[:%]/)[1]);

        if (a < b) {

            i++;

            let curr_id = bars[i].split('id="')[1].split('"')[0];

            let nxt_ele = bars[j].split('id="')[1].split('"')[0];

43
            document.getElementById(curr_id).style.backgroundColor = chng;

            document.getElementById(nxt_ele).style.backgroundColor = chng;

            let temp = bars[i];

            bars[i] = bars[j];

            bars[j] = temp;

            await Sleep(d / 3.0);

            container.innerHTML = bars.join('');

            document.getElementById(curr_id).style.backgroundColor = chng;

            document.getElementById(nxt_ele).style.backgroundColor = chng;

            document.getElementById(id).style.backgroundColor = selected;

            let sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2,

100, 500, 1000);

            beep(100, sound, d)

            await Sleep(d / 3.0)

            document.getElementById(curr_id).style.backgroundColor = def;

            document.getElementById(nxt_ele).style.backgroundColor = def;

    }

  }

    let temp = bars[i + 1];

    bars[i + 1] = bars[r];

    bars[r] = temp;

44
    container.innerHTML = bars.join(' ');

    document.getElementById(id).style.backgroundColor = selected;

    await Sleep(d / 3.0);

    document.getElementById(id).style.backgroundColor = def;

    return i + 1;

async function quickSort(l, r, d) {

    if (l < r) {

        let p = await Partition(l, r, d);

        await quickSort(l, p - 1, d);

        await quickSort(p + 1, r, d);

  }

async function QuickSort() {

    let delay = Disable_The_Input();

    await quickSort(0, bars.length - 1, delay);

    Finished_Sorting();

// 6
45
// HEAP SORT

// Heapfiy(): Creates a max heap.

async function Heapfiy(n, i, d) {

    let largest = i;

    let l = 2 * i + 1; // lft

    let r = 2 * i + 2; // rgt

    let curr_id = bars[i].split('id="')[1].split('"')[0];

    let nxt_ele;

    let id3;

    document.getElementById(curr_id).style.backgroundColor = selected;

    if (r < n) {

        id3 = bars[r].split('id="')[1].split('"')[0];

        document.getElementById(id3).style.backgroundColor = chng;

  }

    if (l < n) {

        nxt_ele = bars[l].split('id="')[1].split('"')[0];

        document.getElementById(nxt_ele).style.backgroundColor = chng;

  }

    await Sleep(d / 3.0)

    if (l < n &&parseInt(bars[l].split(/[:%]/)[1]) >parseInt(bars[largest].split(/[:%]/)[1]))

        largest = l;

    if (r < n &&parseInt(bars[r].split(/[:%]/)[1]) >parseInt(bars[largest].split(/[:%]/)[1]))

        largest = r;
46
    if (largest != i) {

        let t = bars[i]; bars[i] = bars[largest]; bars[largest] = t;

        container.innerHTML = bars.join(' ');

        document.getElementById(curr_id).style.backgroundColor = selected;

        let sound = MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,

500, 1000);

        beep(100, sound, d)

        if (r < n) document.getElementById(id3).style.backgroundColor = chng;

        if (l < n) document.getElementById(nxt_ele).style.backgroundColor = chng;

        await Sleep(d / 3.0)

        container.innerHTML = bars.join(' ');

        await Heapfiy(n, largest, d);

  }

    container.innerHTML = bars.join(' ');

async function HeapSort() {

    let delay = Disable_The_Input();

    let n = bars.length;

    for (let i = n / 2 - 1; i>= 0; i--) // Build the heap

        await Heapfiy(n, i, delay);

    for (let i = n - 1; i>= 0; i--) {

47
        let t = bars[0]; // Swaping

        bars[0] = bars[i];

        bars[i] = t;

        container.innerHTML = bars.join(' ');

        await Heapfiy(i, 0, delay);

  }

    Finished_Sorting();

48
Output

49
50
 CONCLUSION

This web-based
animation tool for
viewing the following
sorting
algorithms functions in
great part because of all
the time and

51
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

52
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

53
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

54
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

55
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

56
it. This would be
excellent, as it would
enable a form of
comparison study.
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.

57
58