Step by Step: How to code a zoomable graph in 3 steps with 34 lines of javascript

One simply codes a graph in javascript after reading this article

Steps

The following are a summary of the steps on how we will draw the grid.

1. Create a HTML document and add a canvas element to it.
2. Define a function to draw the grid.
3. Make scrolling the mouse wheel zoom the grid in and out.

Creating a cavas

The html for the canvas

First we will write the html file and link all of the nessesary css and javascript files.

Then we will add a canvas element with an id of canvas to the body tag.

The css of the canvas

Then we will make the body and html tag to fill the entire screen in the css file and make the overflow of both elements to hidden to avoid the canvas from overflowing and causing unwanted scrolling. Then we will remove the margin and padding.

Afterwards we will make the canvas element to fill its the body/its parent element by giving it a width and height of 100%.

So far you will notice nothing on your page because you need JavaScript to draw on the canvas element.

Defining a function to draw the grid

In the javascript file we will define a few constants the canvas and pen or context of the canvas.

We can use document.getElementById() to select the canvas element from our HTML file, and getcontext() to get its context item. The context item is like a pen that we can use to draw on the canvas. It has properties and methods that we can use to render graphics inside the canvas and can either be 2d or webgl(3d).

Each canvas element can only have one context, and calling getcontext() multiple times will return a reference to the same context object.

After defining the pen of the canvas we will now tell the canvas that its width and height are the same size as the viewport’s or screen’s size by the using the windows innerWidth and innerheight property.

The function to draw the grid

Next, we define a function to draw the grid, which takes the magnification or zoom as an argument. We then use the context.clearRect() method to clear the canvas and make it transparent. This method takes the rectangle's starting x and y position, as well as the rectangle's width and height as arguments. We use the canvas's width and height to define its height and width so that it can make the entire canvas transparent.

context.clearRect(x, y, width, height)

To learn more about the context.clearRect() method click here.

Defining the cell size of one cell

We will then define a constant, cell size, which is the width or height of one of the grid’s cells. The cell size is equal to 100 divided by the magnification, this is to make the size of the cells decrease as the size of the magnification increases. For example, if the magnification is 1, then the cell size is 100; if the magnification is 2, then the cell size is 50.

This may seem counterintuitive, that as the magnification increases, the cell size decreases. We will later implement a way to reverse this behavior, so that scrolling up magnifies the image.

Drawing the vertical grid lines

Next we will draw the vertical grid lines. We will do this by telling our pen to begin drawing by using the context.beginPath() method. Then we will use a for loop to tell the pen which paths to move through.

The for loop draws a vertical lines from the top to the bottom of our canvas as long as our variable x is less than the width of the canvas.

After each loop, the cell size (100) is added to the pen’s x position. This ensures that each vertical line is spaced 100 pixels apart. The loop will continue until the pen’s x position is equal to the canvas’ size.

If the magnification is 2, the cell size will be 50. This means that the vertical lines will be less spaced, which will give the illusion of zooming out.

The code will not draw anything until we tell the pen to draw. We do this by using the context.stroke() method. This method tells the pen to draw the lines that we have specified with our loop.

We also need to call the function drawGrid() with a magnification of 1. This is because the function needs to know how big the cells should be. The magnification of 1 means that the cells will be 100 pixels wide.

This results in vertical lines like the one shown below.

The graph with vertical lines only

If call drawGrid() with a magnification of 2 , the spacing will be halved so twice as many lines will bedrawn.

A graph with a magnification of 2

You can stop here for a while and see if you can manage to draw the horizontal lines with the knowledge you have now without checking below.

The for loop that draw the horizontal and vertical grid lines

If you combine both for loops you get a grid.

A full set of grid lines

Adding an event listener to handle the mouse wheel events

Next, we will add event listeners to the canvas element to zoom in when the mouse wheel is scrolled up and zoom out when the mouse wheel is scrolled down.

Creating a magnify function

First, create a magnification variable and a magnify() function. Then, add an event listener to the canvas to trigger magnify() when the mouse wheel is moved.

The magnify function takes a mousewheel event as input and redraws the grid according to the change in the amount of scrolling. Then we define a constant delta to check whether the change in the mousewheel event is positive or negative.

We can use Math.sign() to check whether the change in the mouse wheel scroll is positive or negative. Math.sign() returns -1 if the number is negative and 1 if it is positive.

To learn more about Math.sign() function click here.

After checking the mouse wheel movement, we multiply the result by 0.1 and add it to the current magnification. Then, we call the drawGrid() function with the new magnification.

1. When we scroll up, the mouse wheel’s movement is negative, so Math.sign() returns -1.
2. We will then multiply -1 by 0.1 and add it to our mangification (1)
3. This gives us a new magnification of 0.9.
4. Call drawGrid() with our new magnification.
5. The result is bigger cells with a size of 111px which causes the illusion of zooming in.

If we scroll down, the change is positive, so Math.sign() returns 1. This sets the new magnification to 1.1, which results in a smaller cell size of 90, giving the illusion of zooming out.

Now scrolling up makes the grid zoom in and scrolling down makes the grid move out.

Conclusion

In this article, I have shown you how to draw an infinite zoomable grid in JavaScript. This is a useful technique for creating interactive visualizations that can be zoomed in and out to reveal more detail.

You can check out the full code here.

I hope you found this article helpful. If you have any questions, please feel free to leave a comment below, don’t forget to clap, and follow to get updates on future tutorials.