This video is available to students only

Adding the temperature area

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.

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(), 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().

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.

Perfect! Now our chart is starting to take shape.

Chart with temperature area

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.

Drawing a gradient#

Let's create a gradient at the end of our Draw canvas step.


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.