This course has been updated! We now recommend you take the Introduction to D3.js course.

Check out a free preview of the full Introduction to Data Visualization with d3.js v4 course:
The "Challenge 2: Line Graph & Solution" Lesson is part of the full, Introduction to Data Visualization with d3.js v4 course featured in this preview video. Here's what you'd learn in this lesson:

Shirley walks through the solution to Challenge 2 of creating a line graph and answers questions from students.

Get Unlimited Access Now

Transcript from the "Challenge 2: Line Graph & Solution" Lesson

>> Shirley Wu: All this exercise is, is that same data set with our cities and temperatures and dates. Yeah, just get your previous exercise up, and then we will figure out how to turn this bar chart into that line chart in only a few magical steps. Okay, let's figure this out together exactly what we need.

[00:00:19] So we still need our scales,
>> Shirley Wu: But we actually, I think don't need our height scale anymore, so we can delete that. Then we actually fork this, okay. So we don't need that height scale anymore. And let's actually delete our rectangles, because we don't need the rectangles anymore.

>> Shirley Wu: So does anyone wanna tell me what I should be doing to create that one line? Any brave souls?
>> Speaker 2: You'll have to create a path to append to the SVG.
>> Shirley Wu: Yeah, do I need to enter append?
>> Speaker 2: I don't know because I don't know how paths work in SVG.

>> Shirley Wu: Okay, so paths work exactly like how recs have been working. And it's basically just another SBG element and we do want to append. But the reason why we won't need to append anymore or for this particular exercises is because we only need one path. And so, I mean like you cut up like and to append one path, you know exactly how many paths you need.

[00:01:28] You only want to use enter append when you have data sets, and you don't know how many paths you need, or rectangles you needs? If you only need one, you can just append. So that's what we'll do. We'll append a path, and you'll see nothing shows up.
>> Shirley Wu: And we need that d attribute.

>> Shirley Wu: And right now, we don't know what to do with that d attribute. So let's create our,
>> Shirley Wu: d3.line and then help me. How do I specify how to get the x for the line? Did I phrase that correctly? Okay, d 3 dot line and then how do I tell a d 3 dot line to get an x value out of the data.

>> Speaker 2: That's gonna be the date.
>> Shirley Wu: Okay, so I want to do the exact function is .x, and then I just say return, but wrap the date in the xScale, right?
>> Speaker 2: Yes.
>> Shirley Wu: I return xScale, and then for our y,
>> Shirley Wu: We use the yScale, and then it was dcity.

[00:03:18] So, this looks pretty much that function, pretty much the accessor looks pretty much exactly like the one we used for the bar chart. And the only thing is that we with d3 line, you tell it .x and .y instead of .otter, cuz it's a completely different thing. But this is how you tell a d3 line how to get the x and y out of our data.

[00:03:45] And now, all we got to do is theoretically that, and it's not working because I totally forgot to bind data. Wait, no, that's not it, hold on. It's not working because line is a function, and we need to pass in our data.
>> Shirley Wu: Ta da.
>> Shirley Wu: Are you guys like, this is not what I was expecting, [LAUGH] what?

>> Speaker 3: Why is it closed?
>> Shirley Wu: Yeah, so, I think, I actually don't know off the top of my head, if d3 closes the path automatically for us. So how you close the path is with z, but I actually don't know if d3 line gives you back something with z.

[00:04:37] I think it actually, yeah?
>> Speaker 2: I think it does close, but I think the reason why it did is because the default on chrome is to fill it right?
>> Shirley Wu: I think the default on most browsers is to fill it with black, so for pads usually whether its closed or not, most browsers will try to fill it with the default color which is black.

[00:05:03] So what you want to do is actually tell it I want no fill, and then the default from those browsers is, I speak like I know most browsers. I only use Chrome usually. Is a stroke none so then you have to specify a color for your stroke, and then that's what we were expecting.

[00:05:28] And then if you wanna go crazy with it, you can I don't know this off the top of my head. So I actually, I have to look at the documentation. But does everybody have this? Like I'm going to switch to a different tab really quickly. Let's see the tab is d3.shape, that's d3.scale.

[00:05:56] This is axis I know d3.shape. Okay, so that curve thing I mentioned earlier,
>> Shirley Wu: Just kind of really fun. So all I have to do is say .curve like for example, this one is giving me like curveCatmullRom. Which is like something down here curveCatmullRom, yeah, so this is the curve that we will be using for fun.

[00:06:29] So .curved3.curveCatmullRom we can take out alpha for now. So let's just press in this curve. And then this case we are either like slide change where there is because we have so many data points, it's kind of hard to see. But do you guys see how it went from a straight line between points, so a slight curve.

[00:06:51] Can you see the slight curve? I promise you it's there, [LAUGH]
>> Shirley Wu: Actually, maybe if I just be like slice .data, if I do .slice I should be able to get 0. Like if I just slice 0 to 10, maybe not 10.
>> Shirley Wu: That's not what I mean.

[00:07:25] That's definitely not what I mean, I'm really bad with JavaScript, I use a lot of bow dash. How do I like? If I want the first like ten values, how do I do that?
>> Shirley Wu: data.
>> Shirley Wu: .slice, right?
>> Speaker 4: Yeah 0, 10.
>> Shirley Wu: Right? And that's what's returning to me right now.

>> Speaker 4: But it returns the-
>> Shirley Wu: And then I have to do data.4h. Wait, that's not ten though.
>> Speaker 5: You have to define a new variable that is-
>> Speaker 2: Yeah, why not just make it twice-
>> Speaker 4: Without the-
>> Shirley Wu: I'm just going to be a really bad person. Yay, a hundred.

[00:08:11] Yeah, [LAUGH] Yeah, do you guys see the curves now?
>> Shirley Wu: There's one time for one of my projects I spent way too long just looking at all of the curves, and how that [LAUGH] looks like for, I think there's one. My current favorite curve is not a curve at all, and it's actually a block.

[00:08:36] Wait, hold on, curve step, yeah. Yeah, look at that, makes me feel like I'm in a weird Lego set or something. Yeah, life is fun with d3, and that's super simple, right? That's just that one extra line additional where as like if you look underneath the hud the path d attributes vastly different underneath the hud to render all of these different curves and steps and, yeah.

[00:09:14] So there it is D3 shape. Do you guys want to take a quick break? And because the next thing we're going to get into is this thing called Update & Exit. So it's the update and exit of the enter update exit. It's gonna be a big one, so ten minute break?