This video is available to students only

Adding gridlines

We're going to skip step 5 and use step 6 to get our feet wet with angular math. We'll draw angular grid lines for each month, circular grid lines for temperature, and label both axes.

To get our feet wet with this angular math, we'll draw our peripherals before we draw our data elements.

Let's switch those steps in our code.

If your first thought was "but the checklist!", here's a reminder that our chart drawing checklist is here as a friendly guide, and we can switch the order of steps if we need to.

Drawing the grid lines (peripheral) first is helpful in cases like this where we want our data elements to layer on top. If we wanted to keep our steps in order, we could also create a <g> element first to add our grid lines to after.

Creating a group to hold our grid elements is also a good idea to keep our elements organized -- let's do that now.

Draw month grid lines#

Next, let's create one "spoke" for each month in our dataset. First, we'll need to create an array of each month. We already know what our first and last dates are -- they are the .domain() of our angleScale. But how can we create a list of each month between those two dates?

The d3-time module has various intervals, which represent various units of time. For example, d3.timeMinute() represents every minute and d3.timeWeek() represents every week.

Each of these intervals has a few methods -- we can see those methods in the documentation, and also if we double-click into the source code in our dev tools console.

d3.timeMonth() source code

For example, we could use the .floor() method to get the first "time" in the current month:

d3.timeMonth.floor() example

d3 time intervals also have a .range() method that will return a list of datetime objects, spaced by the specified interval, between two dates, passed as parameters.

Let's try it out by creating our list of months!