Stack

Stack Builder

This purpose of this application (completed Sept. 1,2021) is to make Stacks easier to visualize. This web application takes user input and lets the user the play with push() and pop() functions.

The idea

A Stack is an example of an abstract data type. My example just implements the push() and pop() methods. This tool may be useful in teaching beginning programmers about Stacks. I was inspired to create this program because understanding Stacks helps you to visualize how an XML Parser checks to see if an XML file is properly formed. Everytime the XML Parser encounters a Start tag, it gets pushed onto the Stack. When the XML Parser encounters an End tag, it checks to see if the name of the End tag matches the name of the tag on the top of the Stack. If the names match, it pops that name off of the Stack. In this way, the Stack should be completely empty when the XML Parser reaches the end of the file. If it is not, then you know that the XML file is not properly formed.

Stacks are also used to store calls to a function in a program. If you have a recursive function, each time the function calls itself, it places another call on the Stack. If the recursive function is very inefficient (it calls itself too many times before terminating), you can run out of Stack space. This is called Stack Overflow.

A simple usage of a Stack is to reverse the order of objects. You can push the objects onto the Stack in the original order and when you pop the objects off of the Stack, they will be placed in the reverse order.

The program

You can run my Stack program by going to this page. You can find the code to this program in my Projects - Stack folder or run it yourself in JFiddle

My program draws SVG rectangles. These rectangles are used to represent objects stored on the Stack. So if I pushed three objects onto the stack, I’m going to represent those objects as three rectangles. The last object pushed onto the Stack will be contained in the top rectangle. For this Stack, the underlying data structure that I selected was a JavaScript array.

Here is my toSVG() method of my Rectangle Class.

toSVG() {
               const svgNS = "http://www.w3.org/2000/svg";
               let svg = document.createElementNS(svgNS, "svg");
               svg.setAttribute("id", this.id);
               svg.setAttribute("x", this.x);
               svg.setAttribute("y", this.y);
               let rect = document.createElementNS(svgNS, "rect");
               rect.setAttribute("x", 2);
               rect.setAttribute("y", 2);
               rect.setAttribute("width", this.width);
               rect.setAttribute("height", this.height);
               rect.setAttribute("style", "fill: white; stroke: black; stroke-width: 4");
               svg.appendChild(rect);
               let text = document.createElementNS(svgNS, "text");
               text.setAttribute("x", this.width / 2 + 2);
               text.setAttribute("y", this.height / 2 + 7);
               text.setAttribute("text-anchor", "middle");
               text.appendChild(document.createTextNode(this.label));
               svg.appendChild(text);
               return svg;
            }

Instead of pushing the objects in to the array, the handlePush() function uses unshift() to place the elements into the array. This makes it store the elements in a reverse order from what would be seen in an actual Stack. Storing the elements in this reverse-order fashion makes it easier to draw the Stack on the screen. This is because it allows for processing the array from the first element to the last element.

function handlePush() {
           const value_box = document.getElementById("value_box");
           let label = value_box.value;
           stack_array.unshift(label);
           value_box.value = "";
           drawStack();
           //console.log(stack_array);
         }

Conclusion

A lot of programming and algorithm books are very heavy on the text and have few pictures. Since many people are visual learners, I think text-heavy explanations can make learning difficult concepts even more daunting. For those people who cannot picture a Stack in their mind, this application helps visualize that abstract concept. I think that if a beginner programmer had this tool while they were introduced to Stacks, then they would find that Stacks are not that scary and might find it fun to learn about Stacks. At least, I think Stacks are more fun with this tool! In conclusion, I think this can be a useful visual tool for learning about Stacks and I would like to build other tools in the future for other abstract concepts like linked lists and red-black trees.