Graphene

The Problem

I am a high school student who is interested in computer science and competitive programming. In competitive programming, many problems are solved by representing the input data as a graph, a data structure consisting of a series node objects connected by edges. Typically, the input data will be formatted like this:

n m a b w a b w ...

Where "n" is the number of nodes, "m" is the number of edges, and each line "a b w" represents an edge from node A to node B with weight W. In competitive programming, it is important to test your solution for correctness against data other than the provided sample input. This often involved drawing out a graph by hand, typing the corresponding input format, and finally testing it against my program.

The Solution

For my HTNE entry, I developed Graphene, a web application which allows the user to create a graph visually and then instantly copy the input data representation. As this app was designed with the competitive programming scene in mind, the focus was on simplicity and efficiency. I built Graphene using the p5.js, a Javascript library which allowed me to quickly create the interactive graphical experience I needed. However, before HTNE I had never even written a line of Javascript, which represented a challenge early on in development. Along the way, I learned a ton about web development, as it was an area of computer science which I had not thoroughly explored before.

Expanding Ideas

Graphene is a simple application with a specific use case, but the core idea has much broader applications. The fields of computer science, data science, and machine learning are filled with concepts and structures that are best understood visually (vectors, artificial neural networks, word embeddings, etc). However, programs take in this data as text. The core ideas behind Graphene could be expanded into a larger website which allows developers to visualize various forms of data and export them in a "code-ready" format. I believe this would improve the accessibility of the aforementioned fields by allowing developers to "see what their program sees."

Built With

• css
• html
• javascript