3.4 Area Charts

Hi, and welcome back to Learn Data Visualization with D3.js. In this lesson, we are going to talk about area charts. Before we talk about specifics, let's see what an area chart is typically used for. It is based of a line chart since the upper boundary is usually defined by the line one would normally draw in a line chart. Usually area charts aren't used to show just a single value. Although it could be when you want to use the massiveness of an area to be visible in your chart. But typically it is used to compare values either by having two separate areas or by having a stacked graph. The stacked area chart is very well-suited to visualize the relations between two values. Typically having relative values like the distribution of web browsers, or a count that tallies up to a total. So let's have a look at an example. I've collected some server response data that is divided into time to first byte, which is the time the browser has to wait until it starts receiving data and total response time. I've prepared some boilerplate code already that loads the data. This time from an adjacent file and plots the axis. You've seen that countless times already. So here's the interesting part. We're going to need a stack object, and we're also going to need an area. The area will need the x value from the x axis, module will receive a stack object here, so the value is in the data key. Then we have a y0, which is the lower boundary. The stack data stores it as position zero. It gets passed into the y scale function. The upper boundary, y1, will be similar, but since my data doesn't have relative values, I have to subtract the lower boundary again. Otherwise the timings will be off by the time to first by its value. To find the thing we need are the keys that reference the data. They're going to be TTFB and Total. Both the stack and the c_scale, which is responsible for coloring the area Needed it for the domains. Now we can draw something. We're going to select all elements with the area class, and pass in the data by the stack. Each value will get a path, with the class of area, and the fill color determined by the c scale. Finally, we have to set the drop amounts. I'm going to pass in the area variable which is a function actually and responsible for drawing the chart. So, let's see what the graph looks like. Total time it took to finish the request is graphed in green. And the initial wait time is blue. What you now can read from the chart is that the time to first byte is very low, but it takes quite some time to load all the data. It's time for the recap. Area charts are mainly used to compare values, typically in a stacked way. You can use the stack and area functions to create them in D3. But stack can be used independently and produces a lower and upper boundary. In the next lesson, we are going to have a look at another very popular chart, the pie and donut chart. See you there.