Algorithm Visualiser

Implementing Features of an Algorithm Visualizer Using HTML, CSS, and JavaScript.

In an era where collaboration and innovation drive success, our team of five embarked on an exciting journey over the span of six days to create an Algorithm Visualiser. This project was not only a testament to our teamwork and dedication also an exploration of web development fundamentals - HTML, CSS, and JavaScript.

In this article, i will walk you through key features i have implemented in this project.

Bubble Sort Visualiser:

I rendered bars with given values as height and the value written on each bar. Stored the given values in an array and used Bubble sort algorithm to sort them, each time the values are swapped in the algorithm, i highlighted the bars to be swapped and interchanged there values of height.

/* snippet from the code base */
    for (let i = 0; i < array.length - 1; i++) {
        for (let j = 0; j < array.length - i - 1; j++) {
            for (let k = 0; k < bso_bars.length; k++) {
                if (k !== j && k !== j + 1 && k < l) {
                    bso_bars[k].style.backgroundColor = "brown";
                }
            }
            if (array[j] > array[j + 1]) {
                let temp = array[j];
                array[j] = array[j + 1];
                array[j + 1] = temp;

                let tempHeight = bso_bars[j].style.height;
                bso_bars[j].style.height = bso_bars[j + 1].style.height;
                bso_bars[j + 1].style.height = tempHeight;
                bso_bars[j].innerHTML = array[j];
                bso_bars[j + 1].innerHTML = array[j + 1];
                bso_bars[j].style.backgroundColor = "#feb737";
                bso_bars[j + 1].style.backgroundColor = "#feb737";

                await sleep(speed);
            }
        }
        l--;
        bso_bars[l].style.backgroundColor = "#2fb45d";

        await sleep(speed);
    }

Similarly, i did for other sorting visualisers- selection sort, merge sort and quick sort.

Linked List Visualiser:

To create a linked list visualiser i used d3 library ( https://d3js.org/ ).

• Selected the HTML container element and Appended an SVG element to this container, with attributes of height, width and background color.
• Define a LinkedList class to manage a linked list with methods to insert and delete nodes. the insert method, creates a new node and add it to the list at a specified index or at the end if no index is provided. The delete method, removes a node at a specific index from the list.
• The Visualise Method, clears existing visual elements from the SVG. Calculate the total width needed for the visualisation and appends text and lines to visually represent the linked list starting with the head. Loop through the list nodes, appending a circle and text for each node’s data. Draw lines with arrow markers to represent links between nodes. Add a final “null” text to represent the end of the list.

/* snippet from the code base */  
  
while (current !== null) {
            const nodeGroup = svg.append("g")
                .attr("class", "node")
                .attr("transform", `translate(${xPos}, ${yPos})`);

            nodeGroup.append("circle")
                .attr("r", nodeRadius)
                .attr("stroke", "black")
                .attr("fill", "white")
                .attr("stroke-width", 2); 

            nodeGroup.append("text")
                .attr("dy", 5)
                .attr("text-anchor", "middle")
                .text(current.data);

            if (current.next !== null) {
                svg.append("line")
                    .attr("class", "link")
                    .attr("x1", xPos + nodeRadius)
                    .attr("y1", yPos)
                    .attr("x2", xPos + nodeRadius + nodeMargin)
                    .attr("y2", yPos)
                    .attr("stroke", "black")
                    .attr("marker-end", "url(#arrow)");
            }

            current = current.next;
            xPos += nodeRadius * 2 + nodeMargin;
  }

Sieve of Eratosthenes

• Created an array of 101 elements, marks the first element as true and rest of them are set to false.
• Loop through numbers 1 to 100, for each number mark all the multiples of the number as non_primes. Highlight the current index and all its multiples at each iteration. Keep track of the indices that are not prime to highlight all primes at the end.

/* snippet from the code base */
 
for (let i = 1; i < 101; i++) {
            if (i == 1) {
                arr[i] = true;
                var cur = document.getElementById(`idx${i}`);
                cur.classList.add("current_cell");
                await sleep(ms);
                cur.classList.remove("current_cell");
                cur.classList.add("not_prime")
                if (flag) {
                    return;
                }
                await sleep(ms);
            } else {
                if (!arr[i]) {
                    var cur = document.getElementById(`idx${i}`);
                    cur.classList.add("current_cell");
                    await sleep(ms);
                    for (let j = 2; j * i < 101; j++) {
                        var multiples = document.getElementById(`idx${i * j}`);
                        multiples.classList.add("multiple");
                    }
                    await sleep(ms);
                    for (let j = 2; j * i < 101; j++) {
                        var multiples = document.getElementById(`idx${i * j}`);
                        multiples.classList.remove("multiple");
                        arr[i * j] = true;
                        if (flag) {
                            return;
                        }
                        multiples.classList.add("not_prime");
                    }
                    cur.classList.remove("current_cell");
                }
            }
        }

Reference:

GitHub - plpatil1/CW-Twitter-Trailblazers_099: Algorithm Visualizer

For suggestions and comments leave a reply.