A Program to Visualize Code

In the last few weeks we have transitioned from vanilla JavaScript to JSX and React. In doing so, the most drastic change in thinking and coding is the flow of information between the areas of our programs. Most often, people will allude to a tree format when talking about how data flows between areas in React and JSX.

While this is a useful paradigm for imagining the population of data, I think most people are familiar with the format of “tree data” with regards to a family tree, at least that is how it is for me. As a result, the idea of data going both ways (both down and up the tree) was foreign and is a little bulky to grasp conceptually.

What really made React click for me was changing the image. There may be a linguistic component to why this is (Insert reference here). While has been proven that the language you speak does not in fact drastically alter the way that you see the world as is often stated, there are some bits of information that are effected by the language that we speak. For example, the flow of time is one component of the world that language does change. In speaking with one of our instructors, I discovered that it was incredibly helpful for me to flatten the image of the tree so that it was horizontal.

Imagine, instead of a tree, that you are creating different spheres along the surface of the earth. You start with a single large sphere, which is then given branches and connects to other spheres on the same axis. These connections represent the flow of information between parent and child, a critical component to React.

This activity, which in reality took place over maybe two seconds in my head, made me think about building a program, which is the real barb of this post. I would like to build a program that renders visually what programmers are doing on the page. Organization in code is critical to the efficacy of the code. As a novice, I find that it is often difficult to track exactly where I am sending each bit of code that I create. While there are different ways to support my clarity, none of them I have found up until now completely cross the barrier from syntax to image.

The way that I imagine it would be a program that creates structures in a visualizer as the programmer inputs their code into the file. So as a parent component is created, a sphere will appear under construction. Once it is done, a single sphere will be created to represent it. As the programmer works down the chain of deliverables, children, and components, the visualizer will continue to populate the world with their creations.

Deeper Features: I’d like to just introduce a few features that I think would help this right off the bat.

1. The ability to choose the visual. As I relayed above, changing my code view from vertical to horizontal helped me to understand the flow of data much more easily. It will be a feature of this program that the use can choose what visual state they wish their code to appear in, the tree and the horizontal spheres only being two possibilities.
2. The ability to zoom in and out. Imagine you are looking over your code and you want to look inside of your original parent component. Just by double clicking (or the scroll wheel), you can look inside that component at the lines of code that make up that actual component.
3. Damaged code and connections. There will be a feature that can show damage to the body of the visual where there are bits of code that are not running correctly. If that takes place in the body of a component, that component sphere will be damaged by itself. From it, every component that is damaged by being connected to that code will also show damage, although in a different way so a user will always know where the original problem is.

This is just my start of fleshing out this idea. I am not even sure it is possible, although I think it does have practical applications, in particular in learning environments where newcomers to code might have trouble (like I do) with interpreting the flow and structure of their own code.