Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Adding gridlines"
description: "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."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/5xazhyra09
codeFolder: course/module_06/lesson_06.02/protected/code/11-radar-weather-chart/end
---

# Adding gridlines

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

<CodeSandboxEmbed
  src="//codesandbox.io/s/6tzd9?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

Let's switch those steps in our code.

```javascript
  // 6. Draw peripherals


  // 5. Draw data
```

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.

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=3536 endLine=120 startChar=3496 startLine=120 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.02/protected/code/11-radar-weather-chart/completed/chart.js#L120 }
const peripherals = bounds.append("g")
```

### 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**](https://github.com/d3/d3-time#intervals) 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](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.02/public/images/11-radar-weather-chart/timeMonth.png)

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

```javascript
d3.timeMonth.floor(new Date())
```

![d3.timeMonth.floor() example](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.02/public/images/11-radar-weather-chart/timeMonth-example.png)

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!

```javascript
const months = d3.timeMonth.range(...angleScale.domain())
console.log(months)
```

Great! Now we have an array of datetime objects corresponding to the beginning of each month in our dataset.

![months array](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.02/public/images/11-radar-weather-chart/timeMonth-array.png)

**d3-time** gives us shortcut aliases that can make our code even more concise -- we can use [`d3.timeMonth()`](https://github.com/d3/d3-time#timeMonths) instead of `d3.timeMonth.range()`.

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=3592 endLine=122 startChar=3538 startLine=122 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.02/protected/code/11-radar-weather-chart/completed/chart.js#L122 }
const months = d3.timeMonths(...angleScale.domain())
```

Let's use our array of months and draw one `<line>` per month.

```javascript
const gridLines = months.forEach(month => {
  return peripherals.append("line")
})
```

We'll need to find the angle for each month -- let's use our `angleScale` to convert the date into an angle.

```javascript
const gridLines = months.forEach(month => {
  const angle = angleScale(month)

  return peripherals.append("line")
})
```

Each _spoke_ will start in the middle of our chart -- we could start those lines at `[dimensions.boundedRadius, dimensions.boundedRadius]`, but most of our element will need to be shifted in respect to the center of our chart.

Remember how we use our **bounds** to shift our chart according to our `top` and `left` margins?

![wrapper & bounds](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.02/public/images/11-radar-weather-chart/bounds-1.png)

To make our math simpler, let's instead shift our **bounds** to _start_ in the center of our chart.

![wrapper & bounds, shifted](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.02/public/images/11-radar-weather-chart/bounds-2.png)

This will help us when we decide where to place our data and peripheral elements -- we'll only need to know where they lie _in respect to the center of our circle_.

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=1678 endLine=58 startChar=1460 startLine=53 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.02/protected/code/11-radar-weather-chart/completed/chart.js#L53 }
const bounds = wrapper.append("g")
    .style("transform", `translate(${
      dimensions.margin.left + dimensions.boundedRadius
    }px, ${
      dimensions.margin.top + dimensions.boundedRadius
    }px)`)
```

We'll need to convert from _angle_ to `[x, y]` coordinate many times in this chart. Let's create a function that makes that conversion for us. Our function will take two parameters:

1.  the **angle**
2.  the **offset**

and return the `[x,y]` coordinates of a point rotated `angle` radians around the center, and `offset` time our circle's radius (`dimensions.boundedRadius`). This will give us the ability to draw elements at different **radii** (for example, to draw our precipitation bubbles slightly outside of our temperature chart, we'll offset them by `1.14` times our normal radius length).

```javascript
const getCoordinatesForAngle = (angle, offset=1) => []
```

To convert an angle into a coordinate, we'll dig into our knowledge of [trigonometry](https://www.mathsisfun.com/algebra/trigonometry.html). Let's look at the right-angle triangle (a triangle with a 90-degree angle) created by connecting our _origin point_ (`[0,0]`) and our _destination point_ (`[x,y]`).

![trigonometry triangle parts](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.02/public/images/11-radar-weather-chart/sohcahtoa-triangle.png)

The numbers we already know are **theta (θ)** and the **hypotenuse** (`dimensions.boundedRadius * offset`). We can use these numbers to calculate the lengths of the `adjacent` and `opposite` sides of our triangle, which will correspond to the `x` and `y` position of our _destination point_.

Because our triangle has a _right angle_, we can multiply the `sine` and `cosine` of our `angle` by the length of our **hypotenuse** to calculate our `x` and `y` values (remember the [**soh cah toa** mnenomic](http://mathworld.wolfram.com/SOHCAHTOA.html)?).

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.