Drawing the Image

The next step to drawing a chart is configuring the dimensions of the element.

The next step in our journey to drawing a scatter plot is drawing a container. Throughout this course, we will follow a specific series of steps for drawing a chart.

Reviewing the steps

Here are the first three steps. First, we will retrieve the data from an external source. Second, we will set the chart’s dimensions. Third, we will draw the image.

Regardless of what visualization you will be making, the steps for drawing a chart are mostly the same. We have taken care of the first step. We performed a request for the data. Grabbing the data is the most important step. We can not draw a chart without the data.

The next step is to draw the chart’s dimensions. The dimensions of a chart will affect the size and position of our shapes. We want to make sure our shapes do not appear outside the bounds of the image. After calculating the dimensions, we can draw the image.

Configuring the dimensions

Let’s start with the dimensions. We will create an object called dimensions in the draw() function.

Get hands-on with 1400+ tech skills courses.