Graph Maker

Generate customizable graphs (as in graph theory) and download them as an image. Implemented as a Progressive Web App (PWA).

overview of the site
Site overview

Table of contents

Finding the idea

In 10th-grade math classes, every student could work on projects/topics they wanted to work on. Another student and I teamed up and we chose graph theory because that would be useful for pathfinding algorithms which I found interesting at the time (and still).

At the end of the project, I implemented the greedy algorithm in a Java application (available on GitHub) to explain it to the class. This was the inspiration for my animated graph codepen project. I also came across this background generator so I thought it would be nice to have this for graphs.

One year after finishing the website, I wrote a paper on PWAs and found it would be perfect to turn this web app into a PWA.

Building the site

I already had the logic figured out in the pen which wasn’t very complex anyway. The biggest challenge was to make the site responsive (looking good on every screen size).

The two-column settings should turn into one column at a width that is too small and at an even smaller width the settings should move to the bottom. The canvas also had to fit the screen width regardless of the size of the canvas which wasn’t that easy to implement because it can have any size you want and it has to remain its ratio after resizing the window. You can have a look at the function that calculates the canvas size and of course all other code on GitHub.

mobile site design
Mobile site design

Turning the site into a PWA was a no-brainer as I was already dealing with the topic for a long time to write my paper.

Download image

At first, I used data URLs to download the canvas as an image but as Chrome dropped support for top-frame navigation, I needed to tell the user he/she has to right click and select ‘Save image as…’ to download the canvas as an image.

Main functionality

The site is loaded with default settings that the user can obviously change. He/she is able to control the canvas size, the vertex (point) size, how many vertices there are, at which distance two vertices are considered a neighbor and thus connected, how thick the connecting edges are and colors.

What I learned

My favorite thing about this project is

that the design is as responsive to the screen size as it is.

Conclusion

It was fun to build and I learned something like in every other project, but what really was a please was coming back to the code after one year and finding it easy to turn everything into a PWA.