Creating Line Charts

[00:00:00]
>> Speaker 1: Okay, so line chart, so this is one of the ones that you were looking at earlier with the exercise, being like, my God, these paths and these D commands, like these commands are. So,
>> Speaker 1: I want to introduce you to D3.Line(), which is one of those magical functions that translates your data into the really complex looking commands that draw this line.

[00:00:29]
And how we do that is how D3.Line works is we have, let's say, our data. And for this data, again, we just have date, and we have value.
>> Speaker 1: And all we need to do is to find d3.line(), and we tau d3.line, our accessor for the x position and the accessor for the y position.

[00:01:05]
>> Speaker 1: And then we pass in our data array.
>> Speaker 1: And it goes and outputs the path string we need to draw that line. And it's really just those few lines, and you get back that string. And let me kind of explain to you what's going on. So essentially what d3.line is doing is given this array of data points, it's basically mapping those data points onto the screen.

[00:01:44]
It's mapping it first to these x, y positions, and that's why we need to give it accessors telling it where each of these points should be drawn on the screen. And so it's basically saying, okay, so given this array of data, I am going to draw all of these x positions around the screen.

[00:02:03]
And then I'm going to connect them with a bunch of lines, and that's all that's happening. So that's why, I just realized something. I may or may not have just copy and pasted the dates, and it all says March 24th, but they're supposed to be increasing by days.

[00:02:22]
So they're supposed to be 24, 25, 26, 27, 28, 29. Please imagine with me that that's what it's doing. And so, if you can imagine the bar chart we just drew, where it was a point here, a point here, a point here, etc. D3.Line is doing something very similar where it's mapping the x, y points.

[00:02:47]
But instead of drawing any bars, it's creating the command where it draws the lines between each of these points. That's all I gotta say about D3.Line, because it's just that easy. It might actually be even easier to do than the previous example, maybe.