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.
Adding the temperature 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() will only take an
x and a
Instead, we want to use d3.areaRadial(), which is similar to
d3.area(), but has
.radius() methods. Since we want our area to span the minimum and maximum temperature for a day, we can use
.outerRadius() instead of one
.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
Perfect! Now our chart is starting to take shape.
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.