Onsite Students Create 3D Visualizations to Map & Debug Code

If a programmer were to draw a picture of their code--without words--what would that picture look like? A team of students realized that there often isn’t an easy answer to that question, and so they decided to build a tool to generate beautiful and instructive visualizations of code.

“We felt like programmers were always held back by not being able to accurately visualize their code base,” team member Luke Davis explains. “We wanted to give them a way to see data as it moves through their code. Along the way, we built a nice educational tool.”

Davis built this project, Holograf, with Andy Coenen, Ryan Lee and Matt Conrad. A guiding metaphor the team used was the worm vs. the falcon. While the worm can only see what is directly in front of them--in the case of the programmer, about thirty lines of code--the falcon can see the entire terrain.

coding, visualization, data visualization, coding education, arrays, objects, javascript, function

Holograf allows users to see how data changes over time within their code.

“You see what your code is on the left side, and also a physical representation of what you’ve been doing,” Conrad describes. “The whole app lets you see data as it’s moving through the program.”

The project forced the group to decide how different elements of code should be represented visually.

“The first thing we all agreed would make a lot of sense would be to have a timeline,” says Conrad. “For the loops, we had rings which matched up with people’s conceptions of the loop. Basically every process opens and closes. Each has a self-contained wireframe.”

The group drew on pre-existing associations with various elements of code and brackets, braces and parentheses.

“Object declarations are these beautiful Saturnian things with a sphere in the middle and rings going around,” Davis describes. “Similarly, arrays, instead of having rotating Saturnine rings, we wanted it to be intuitive for people used to square brackets. We used a sphere in the middle with a diamond-shaped ring around that.”

coding, visualization, data visualization, coding education, arrays, objects, javascript, function

Objects and arrays are represented as planet-like objects, and are recognizable by the shape of their rings.

By mousing over various parts of the code, one can see data values at that particular point. For instance, mousing over a function invocation will show what value is called.

“Every single thing that happens is captured,” says Coenen. “We also saw how huge programs are. You don’t really think about that until you start to deconstruct the code.”

As the project took shape, the group found numerous benefits to using Holograf.

“We essentially created a debugger,” notes Lee.

“If it starts going sideways, you can see what the value is there, and where in the code it happens,” Coenen explains.

In fact, while not initially designed as one, Holograf has certain advantages over a traditional debugger.

“When you run the Chrome debugger tools, you can’t go backwards,” says Davis. “The difference [between Holograf and the Chrome debugger] is the difference between someone being able to draw you a map, and just saying a set of directions. If you miss any point in those directions, you’re lost.”

Building Holograf forced the group to explore JavaScript at its most basic level.

“There’s so much that JavaScript does for us automatically,” says Lee. “JavaScript does a lot in the background and you don’t really know until you dive in.”

“It was really a process of deconstructing it down to an atomic level of code,” Coenen adds.

Drilling down to this level gave the team a deep understanding of the code that they work with every day.

“What Andy is talking about is exploiting the very basis of JavaScript itself. We knew when we started the project that we could push our ability as Software Engineers and Computer Scientists.”

Holograf was built with Three.js, Rafael.js, React, Flux, Node.js, MongoDB, Gulp and Jasmine.

Want to take a deep dive into code and your ability to use it? Apply to our immersive program, online or onsite, today.

Read more:

Student Animates Algorithm & Data Structure Key Concepts

Student Wows and Informs with 3-D Interactive Data Visualizations

What a Remote Student Learned Building a Popular React & Flux Framework