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 the temperature area"
description: "We create a radial area shape, bounded by the min and max temperatures for each day. Then we create a gradient and use it to color our area."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/pxciycu272
codeFolder: course/module_06/lesson_06.04/protected/code/11-radar-weather-chart/end
---

# Adding the temperature area

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

Our finished chart has a shape that covers the minimum and maximum temperatures for each day. Our first instinct to draw an area is to use `d3.area()`, but `d3.area()` will only take an `x` and a `y` position.

Instead, we want to use [d3.areaRadial()](https://github.com/d3/d3-shape#areaRadial), which is similar to `d3.area()`, but has `.angle()` and `.radius()` methods. Since we want our area to span the minimum and maximum temperature for a day, we can use `.innerRadius()` and `.outerRadius()` instead of one `.radius()`.

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=5346 endLine=180 startChar=5132 startLine=177 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.04/protected/code/11-radar-weather-chart/completed/chart.js#L177 }
const areaGenerator = d3.areaRadial()
    .angle(d => angleScale(dateAccessor(d)))
    .innerRadius(d => radiusScale(temperatureMinAccessor(d)))
    .outerRadius(d => radiusScale(temperatureMaxAccessor(d)))
```

Like `.line()` and `.area()` generators, our `areaGenerator()` will return the `d` attribute string for a `<path>` element, given a dataset. Let's create a `<path>` element and set its `d` attribute.

```javascript
const area = bounds.append("path")
   .attr("class", "area")
   .attr("d", areaGenerator(dataset))
```

Perfect! Now our chart is starting to take shape.

![Chart with temperature area](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.04/public/images/11-radar-weather-chart/temperature.png)

Sometimes displaying a metric in multiple ways can help focus the viewer on it and also give them two ways to encode it. Let's also visualize the temperature with a gradient.

We create a radial area shape, bounded by the min and max temperatures for each day. Then we create a gradient and use it to color our area.