What if you had a visual tool to help you understand DSA?

So my first Dev.to post was about a project I built and I'm currently working on. So recently I started DSA (Data Structures & Algorithms) and I have to say it's been fun but I'm a visual learner and the concepts were'nt really getting to me at first

The whole idea behind binary search had me on a chokehold for a day and i had myself asking how do i turn this concept into code - P.S I actually did. Don't even get me started on algorithms that are categorised under O(N^2) Insertion sort to be exact

So long story short, I came up with

AlgoTracker - Data-Visualiser

So as the name implies it visualises data, but to be more intricate it shows how these data concepts work in real time, step by step as the image below shows

This is a screenshot of the search panel and below you can see the step counter - This shows you which cell (data) in the array the computer sorted or searched and which it didn't, and how it came to the final result and it also displays the time taken to complete the task and the exact algorithm used - O(N), O(log n), O(N^2) and then there's a graph that also compares the algorithms against each other to know which is faster

Note: Search Notations compare against each other and Sort notations compare against each other, they don't inter-compare so a search algorithm cannot be compared against a sort algorithm

So i'll go into details about each of this features

Sort Panel

So the sort panel is where you insert data to be sorted through any of the sorting options and then the panel gives back the sorted data, time taken to sort and the steps - Sorting refers to arranging unsorted or mixed values in a certain order - and in our case it's ascending so the lowest value to the highest

Right now the only sorting options are Selection & Insertion and they only sort numbers but I'm working on adding string comparisions and other sorting options

Selection Sort
In selection sort each cell in the array is checked from left to right to determine which value is least. As each cell is checked the lowest value that has been encountered is being kept in track or stored ( It’s index is being stored in a variable ). If a cell that contains a even lower value compared to the one in the variable is encountered. The value in the variable is replaced and it points to the new value ( index )

[ 2, 6, 1, 3 ] // Lowest value so far is 2
[ 2, 6, 1, 3 ] // Lowest value so far is still 2
[ 2, 6, 1, 3 ] // Lowest value so far now is 1
[ 2, 6, 1, 3 ] // Lowest value so far is still 1

Once the index which contains the lowest number is determined and/or found. Its value is swapped with the first index in the pair

[ 1, 6, 2, 3 ]

Each pass-through consists of the first step of searching and comparisons and then the second step of swapping. So this pass-through is repeated up until the array is fully sorted.

Below is the code implementation

function selectionSort(array) {
    for(let i = 0; i < array.length - 1; i++) {
                let lowestNumberIndex = i;
            for(let j = i + 1; j < array.length; j++) {
                    if(array[j] < array[lowestNumberIndex]) {
                            lowestNumberIndex = j;
                        }
                    }
                if(lowestNumberIndex != i) {
                        let temp = array[i];
                        array[i] = array[lowestNumberIndex];
                        array[lowestNumberIndex] = temp;
                }
    }
    return array;
}

And below is a screenshot of the sort panel of the visualiser

So you can see the unsorted data and sorted data are displayed - Sorted below and unsorted above and below the sorted data you can see details such as Algorithm, Time & Complexity(The Big O Notation). It shows we used selection sort and it took 0.1ms for the computer to sort the whole array which is pretty fast. Now for the step visualiser

So this is the unsorted data before it gets sorted

This is the first sorting as the definition i gave originally said the whole array is checked from left to right to check which is least, in this case it's 1 so it's position is swapped with the value that is currently stored in index 0 which is 10

Same thing here the scan starts from index 1 since the least value has already been found it starts scanning from index 1 till the end to find the second least value which is 2 so it's postion is swapped with 8

And same thing here up until the end

So if you observe properly it takes 10 steps and 0.1ms to sort 10 values which is pretty fast or could be slow depending on if another algorithm can do it faster

Insertion Sort
Insertion Sort consists of the following steps:

1. In the first pass-through, we temporarily remove the value at index 1 (the second cell) and store it in a temporary variable. This will leave a gap at that index, since it contains no value. In subsequent pass-throughs, we remove the values at the subsequent indexes

2. We then begin a shifting phase, where we take each value to the left of the gap and compare it to the value in the temporary variable. If the value to the left of the gap is greater than the temporary variable we shift that value to the right. As we shift values to the right, inherently the gap moves leftward. As soon as we encounter a value that is lower than the temporary removed value, or we reach the left end of the array. The shifting phase is over.

3. We then insert the temporarily removed value into the current gap.

4. Steps 1 - 4 represent a single pass-through. we repeat these pass throughs until the pass-through begins at the final index of the array. By then, the array will have been fully sorted.

Below is the code implementation

function insertionSort(arr) { 
    for(let i = 1; i < arr.length; i++){
        console.log(i, arr);
        let temp = arr[i];
        let j;
        for(j = i - 1; j >= 0 && arr[j] > temp; j--){
            arr[j + 1] = arr[j];
        }
        arr[j + 1] = temp;
    }
} 

Below is a screenshot of the same sorted data but if you look at the algorithm it says Insertion Sort so this was sorted using insertion and if you pay close attention the time taken was 1ms

So if you compare it against the info we got from selection sort which took 0.1ms to sort it - it tells us Selection Sort is faster in this scenrio but selection sort took 10 steps how many steps did insertion take?

Now this says insertion took 9 steps which is way faster than selection's 10 using this data alone we won't be wrong to say insertion is faster But that is where the graph panel comes in because it compares these data and presents it in a chart to tell you which is faster and the image below clearly shows selection is faster although the main reason is because selection is more efficient as data grows

So this tool not only presented the steps (- The number of steps and how it checked each value in the array -) the computer used to come about the final result, it also compared each algorithm to give which is faster and more efficienct for your code. So as it is an academic tool I believe it's also useful for devs also - well the final product would be.

Now for search

Search Panel

The search panel is still quite similar but different it searches the array of data for any target value of your choice and under this we have Linear Search & Binary Search one of the two fundamental search algorithms - along the line i plan on adding hash table searching as it's way faster than both of them but for now it's just these 2

Linear Search
So linear search is quite simple, it searches each cell in the array from left to right until it finds the target value. That's literally it. No shortcuts, no skipping — just checking every single value one by one until it either finds what it's looking for or reaches the end of the array.

If the target value is at the end of the array — congratulations, it checked everything before getting there. That's O(N) for you.

function linearSearch(array, target) {
    for(let i = 0; i < array.length; i++) {
        if(array[i] === target) {
            return i;
        }
    }
    return -1;
}

Screenshot of Linear Search

Based on this image we can clearly see it took literally no time to search and find the target value which is 6 but it took a total of 6 steps which is basically how an O(N) algorithm works, the number of steps increases as the data increases

Binary Search
Now this one is where it gets interesting. Binary Search doesn't check every cell — it's smarter than that. But the catch is the array has to be sorted first. That's the deal.
Here's how it works — it starts at the middle of the array and checks if the target value is higher or lower than the middle value. If the target is lower it eliminates the entire right half of the array and repeats the process on the left half. If it's higher it eliminates the left half entirely. It keeps halving the search space until it finds the target or runs out of values to check.

So in an array of ten, and you're looking for ten it'll start at 5, then compare 5 to the target value which is 10 so 5 is smaller than 10 meaning 10 would be found on the right hand side so it'll eliminate all of the values at the left of five, that's the basic explanation

This is why it's O(log N) — every step cuts the problem in half. It's genuinely fast.

Below is the code implementation

function binarySearch(array, target) {
    let left = 0;
    let right = array.length - 1;

    while(left <= right) {
        let mid = Math.floor((left + right) / 2);

        if(array[mid] === target) {
            return mid;
        } else if(array[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return -1;
}

Screenshot of the search panel - Binary Search

So right now based on this image we can see it actually took the same time in searching the same value as linear search but in less steps which is 3 compared to linear search's 6 so due to this we can clearly say binary search is faster

As the data size grows, Linear Search grows at the same rate — 20 elements = 20 operations, 100 elements = 100 operations. It's a straight line because it checks everything one by one.
Binary Search barely moves. At 20 elements it only needs about 4-5 operations because it keeps halving the problem. That curved flat line is O(log N) in action. and in our case of 10 elements it only needed 3

Final Thoughts
AlgoTracker started as a personal tool — I needed to see these concepts to understand them and textbooks weren't it at least for me that is. But the more I built it out the more I realised it could genuinely help other visual learners who are in the same boat I was in.
It's still a work in progress — string comparisons, hash table searching, and more algorithms are on the roadmap. But as it stands right now it does what it was built to do: show you exactly what's happening under the hood, step by step, no hand waving.
Live demo: https://algo-tracker-vu7t.vercel.app/
GitHub: https://github.com/Cr4N31/AlgoTracker
If you're learning DSA and you're a visual learner — give it a spin and let me know what you think 👇