Applying Scales to Visualizations

It is time to apply our knowledge of scales to the scatter plot we have been building. There are four properties we can change on the circle. They are the x coordinate, y coordinate, color, and size. We are going to focus on the coordinates. The x position of a circle will represent humidity, and the y position will represent the temperature.

What to transform?

We are going to transform the x and y coordinates. The question is, what are we going to transform them to? The coordinates for any circle should stay within the bounds of the container we drew in our image. We must draw them in the container. The purpose of the container was to prevent a shape from appearing on the edge of the image. If that happened, the shape would be cut off.

We want to transform the x coordinate of a shape between 0 and the width of the container. The y coordinate of a shape should be between 0 and the height of the container. Now that we know what we will transform our data to let’s create scales that will transform our values.

Creating the scales

We are going to create the scales before drawing the circles. In the draw() function, we will add the following: