Line and Area Charts with D3

[00:00] For this lesson, we're going to use some JSON data. I have a file here that just has a bunch of objects with date and count properties. You can see the date is just in a string format where we've got the year, the month, and the day, and then we've got three different collections here. I've just named them "math," "reading," and "science," as if they were subjects.

[00:21] Our JSON structure is just an object with those three collections on it. If we look at our HTML here, you can see we've got a couple of simple styles, the first one being for path nodes. We're going to have no fill, a three-pixel blue stroke, and then we've got our chart object here or our chart ID that just has dimensions and a border around it so we can see where that is.

[00:49] Going down to actually look at the markup, we can see that we've got our chart div there, that our style corresponds to, and then we've got a few scripts included here. We've got jQuery, D3, and Lodash, and then we've got the actual meat of our example here, in this script tag.

[01:08] We've got our dimensions, but then we load in. All we're really using jQuery for is to load in this JSON. We're going to get that back. We're going to assign it to that subjects variable. Once we get the subjects variable set, we're going to loop over the keys of it. Those are our different subjects.

[01:31] Then we're going to loop over the objects in each of those subject collections. What we're then going to do is we're going to pass that string-based date through D3's time formatter to get back an actual date object. Once this runs, the date property will be actual instances of dates.

[01:53] From there, we go ahead and create the path, which is just...We're going to create the SVG container and then a graphic object and then a path object, and then we're going to call this updateChart function and pass in the subject of math.

[02:09] If we start to fill in this function, we're just going to use that subject to create a data variable. That's the day that we're going to be concerned with in this particular rendering, and then we're going to pull out the date properties and the count properties into their own collections. You'll see why, here, in a second.

[02:30] First, we'll create our x scale. We're going to pass into the domain method d3.extent(dates). What that is going to do is it's going to examine all of the dates in that array and return a two-element array where the minimum date is in the first position and the maximum date is in the second position.

[02:54] We'll do the same thing for our x scale. In this case, it's going to be a linear scale instead of a time scale. We're again going to use d3.extent to get the extent of our counts, and then, again, our range is just the size of our chart.

[03:13] From there, we're going to create a line object using the d3.svg.line function. This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points, and then we're going to set the x property by passing the date property through our x scale. We're going to set the y property by passing the count property through our y scale.

[03:40] Fairly straightforward. Pretty similar to all the D3 exercises we've done in the past. From here, we're going to do something slightly new. We're going to take the path object that we created above.

[03:52] We're going to call datum on it rather than data. What datum does is it doesn't create a selection like we do when we're creating multiple shapes. Based on the data, we're creating a selection. In this case, we just want to apply this entire collection to this one object that we already have.

[04:11] That's essentially what this is saying, is use this data for this object itself, for the path object. We are going to define a transition with a duration of 450 milliseconds, just so we get some nice animation when we start changing things.

[04:27] Then the last thing we'll do is we will actually assign that line that we created to the d attribute of our path. Essentially, the data for the path will be that line object that we created. Now we can see, if we go and refresh the chart here, we have our nice, smooth, curved line chart. We're plotting that math data as a line chart.

[04:50] If we go up here and add a few buttons...We'll just assign these buttons click handlers to call that updateChart function again and pass in a different subject. Any time we call that function, it's just going to run through here again and use the proper collection for the data attribute.

[05:08] It's going to recalculate the x and y scales. It's going to recalculate the line object, and then it's going to again reapply that line object as the data for our path. If we refresh, we see we've got our buttons here. We can click these. We get these nice, animated transitions between the different sets of data.

[05:28] As it turns out, it's really, really simple to convert a line chart to an area chart. The first thing we're going to do is we're going to update this style and tell it that we want our paths to actually be filled with a purple color. We'll give it a little bit of opacity.

[05:46] If we go refresh this and just see, we can see that we get this funky shape since the line is crossing back over itself, but we're going to fix that now. We're going to change our d3.svg.line to an area.

[06:02] Really, the only difference between a line and an area shape is that whereas the line has a y property, the area shape actually has two y properties. It has the top and the bottom. Those are named as "y0" and "y1."

[06:19] We're going to tell it to actually just plot the value of zero for y0 and still use our count for y1. You can see that we then get a nice, filled area shape. We can still use our transitions here. We get these nice, animated transitions between the different subjects.