As computer science educators, my partners and I have seen first hand how difficult it is for kids to visualize what's actually happening under the hood while their code is running. Even though over 65% of the US population consists of visual learners, according to a study by Prentice Hall, it seems as if we as a society have deemed visuals as introductory by nature, which is completely backwards. The harder and more conceptual material gets, for example in subjects like computer science and mathematics, the more important it is to have visual aids to increase comprehension.

What it does

Right now, Visio is a java based web app which allows users to input a text file containing their code, and it generates a sample visualization for how that code works. In this case, we used a train to represent the program running, and a box car with crates to represent memory allocation, for example a variable living in memory. This is one specific example of what can be done to visualize a complex concept, like a program, but the vision is to empower people to create their own visualizations and promote creativity to bring code to life.

How we built it

Visio currently consists of two main parts: a parser and a visualizer. We basically take in the input txt file and parse it line by line for specific commands, such as a for loop or assignment. At this stage, it's sort of a pseudo compiler. After parsing the file, we turn it into an actual visualization, with animations defined for concepts such as for loops and computation.

What's next for Visio

The vision for Visio is to create a platform the fosters creativity in computer science education by allowing educators, students, and software engineers alike to create share visualizations and then be able to use whichever ones resonate most with them. In the near future, we hope to iteratively improve upon the MVP we created here, and put these tools in the hands of actual students and see what their reaction is. This is an area we're all passionate about, and we want to do everything in our power to inspire the next generation of technologists!

Built With

Share this project: