The ‘scaleLog()’ Scale

Let’s look at a real example as to why we would want to use the log scale. Here is the starter project we will be working with.

Let’s review the contents of each section. We will start with the HTML section. It contains a basic HTML setup. We have a <div> element with the ID of chart. Afterward, we’re loading D3.

Let’s check out the CSS section. It contains some basic styles to center the chart in the document. Not much else is going on.

Let’s move onto the data we will be working with.

This file contains the data we will be using to draw the chart. It is an array of things in the universe. At the top, we have the milky way galaxy. It is the largest thing in our universe. If we scroll to the bottom, the smallest thing would be a proton. This data comes from the University of Colorado.

Each object in this array contains the name and size of an object. The size is measured in kilometers. One thing you will notice about the size is the format of the value. The letter e is being used in the number. This is a valid JavaScript value.

The e is a shorthand way of writing exponential numbers. For example, let’s say we had the number 3e5. This value is the equivalent of saying 3 * 10 ^ 5. If you were to calculate this, it would come out to 300,000.

It is just a different way of writing very large numbers. D3 will be able to understand this data when we provide our scales the data. Let’s move onto the JavaScript file.

The script file contains some code. We have a function called draw. It is an asynchronous function because we are requesting the data inside the function. It is the very first thing we are doing. After grabbing the data, we are defining some accessor functions for retrieving specific values in each object of the array.

Next, we are setting the dimensions of the chart. The dimensions object holds the width, height, and margins of the chart. The last thing happening in this script is the image is being drawn with the dimensions.

Here is the objective for this lesson. We are going to draw a chart that displays the size of each object in the array. The order of the objects should go from smallest to largest. We will be reading the chart from top to bottom. This will make sense when we draw the chart. Let’s get started.

Drawing the shapes

The first few steps are taken care of. Normally, we would create a scale after drawing the image. However, we are going to draw the shapes first. We will introduce the scale once the ...