GUI(Graphical User Interface) helps in better in understanding than programs. In this article, we will visualize Counting Sort using JavaScript. We will see how the frequencies of elements are stored and how we get the final sorted array. We will also visualize the time complexity of Counting Sort.
Refer:
Approach:
- First, we will generate a random array using Math.random() function.
- Different color use is used to indicate which element is being traversed.
- Another array is used to store the frequency of given Elements.
- Since the algorithm performs the operation very fast, the setTimeout() function has been used to slow down the process.
- New array can be generated by pressing the “Ctrl+R” key.
- The sorting is performed using CountingSort() function.
Example:
Below is the program to visualize the Counting Sort algorithm. All the section codes are covered one by one.
index.html
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href = "style.css" />
</ head >
< body >
< br />
< p class = "header" >Counting Sort</ p >
< div id = "array" ></ div >
< br />
< br />
< div id = "count" ></ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
style.css
* { margin : 0px ;
padding : 0px ;
box-sizing: border-box;
} .header { font-size : 20px ;
text-align : center ;
} #array { background-color : white ;
height : 265px ;
width : 598px ;
margin : auto ;
position : relative ;
margin-top : 64px ;
} . block {
width : 28px ;
background-color : #6b5b95 ;
position : absolute ;
bottom : 0px ;
transition: 0.2 s all ease;
} .block 2 {
width : 28px ;
background-color : darkgray;
position : absolute ;
transition: 0.2 s all ease;
} .block_id { position : absolute ;
color : black ;
margin-top : -20px ;
width : 100% ;
text-align : center ;
} .block_id 2 {
position : absolute ;
color : black ;
margin-top : 22px ;
width : 100% ;
text-align : center ;
} .block_id 3 {
position : absolute ;
color : black ;
margin-top : 1px ;
width : 100% ;
text-align : center ;
} #count { height : 265px ;
width : 598px ;
margin : auto ;
} |
script.js
var container = document.getElementById( "array" );
// Function to generate the array of blocks function generatearray() {
for ( var i = 0; i < 20; i++) {
// Return a value from 1 to 100 (both inclusive)
var value = Math.ceil(Math.random() * 20);
// Creating element div
var array_ele = document.createElement( "div" );
// Adding class 'block' to div
array_ele.classList.add( "block" );
// Adding style to div
array_ele.style.height = `${value * 13}px`;
array_ele.style.transform = `translate(${i * 30}px)`;
// Creating label element for displaying
// size of particular block
var array_ele_label = document.createElement( "label" );
array_ele_label.classList.add( "block_id" );
array_ele_label.innerText = value;
// Appending created elements to index.html
array_ele.appendChild(array_ele_label);
container.appendChild(array_ele);
}
} // Function to generate the frequency array var count_container = document.getElementById( "count" );
function generate_freq() {
for ( var i = 0; i < 20; i++) {
// Creating element div
var array_ele2 = document.createElement( "div" );
// Adding class 'block2' to div
array_ele2.classList.add( "block2" );
// Adding style to div
array_ele2.style.height = `${20}px`;
array_ele2.style.transform = `translate(${i * 30}px)`;
// index of freq array
var array_ele_idx = document.createElement( "label" );
array_ele_idx.classList.add( "block_id2" );
array_ele_idx.innerText = i + 1;
//giving initial freq to all blocks as 0
var array_ele_label2 = document.createElement( "label" );
array_ele_label2.classList.add( "block_id3" );
array_ele_label2.innerText = 0;
// Appending created elements to index.html
array_ele2.appendChild(array_ele_label2);
array_ele2.appendChild(array_ele_idx);
count_container.appendChild(array_ele2);
}
} // Asynchronous CountingSort function async function CountingSort(delay = 250) {
var blocks = document.querySelectorAll( ".block" );
// To store frequency of every block
for ( var i = 0; i < blocks.length; i += 1) {
//To highlight the current traversed block
blocks[i].style.backgroundColor = "#FF4949" ;
//Extracting the value of current block
var value = Number(blocks[i].childNodes[0].innerHTML);
var freq_array = document.getElementsByClassName( "block_id3" );
freq_array[value - 1].innerText++;
// To wait for .1 sec
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, delay)
);
//Changing to previous color
blocks[i].style.backgroundColor = "#6b5b95" ;
}
//Sorting by using frequency array
var idx = 0;
for ( var i = 0; i < blocks.length; i += 1) {
var freq = document.getElementsByClassName( "block_id3" );
var temp = Number(freq[i].innerText);
var freq_block = document.getElementsByClassName( "block2" );
//changing color of freq block
freq_block[i].style.backgroundColor = "#FF4949" ;
// To wait for .1 sec
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 2 * delay)
);
if (temp == 0) {
//changing color of freq block to previous one
freq_block[i].style.backgroundColor = "darkgray" ;
continue ;
}
var block_label = document.getElementsByClassName( "block_id" );
//sorting the block array
for ( var j = 0; j < temp; j++) {
blocks[idx].style.height = `${(i + 1) * 13}px`;
block_label[idx].innerText = i + 1;
idx++;
}
//changing color of freq block to previous one
freq_block[i].style.backgroundColor = "darkgray" ;
// To wait for .1 sec
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 2 * delay)
);
}
} // Calling generatearray function generatearray(); // Calling generate_freq function generate_freq(); // Calling CountingSort function CountingSort(); |
Output: