Setting up our line chart

[00:00 - 00:08] In this lesson, we're going to be making a timeline with the maximum temperature per day over time. And this is going to have two axes.

[00:09 - 00:18] The first axis is the y-axis, which is vertical, and that's going to show the maximum temperature per day. So a hotter temperature will be further up the page.

[00:19 - 00:26] And the other dimension is the x-axis, which is horizontal. And that's going to be showing the day of each data point.

[00:27 - 00:45] So a day in October is going to be further to the right than a day in April. So before we dig in to drawing anything to the screen, I want to introduce to you a concept that I didn't use at the beginning when I was first learning D3, but I use pretty much all the time now.

[00:46 - 00:52] And we'll talk about why it's so important to me at the end of this video. And that concept is accessor functions.

[00:53 - 01:06] So an accessor function is a function that takes a data point. So in this case, it would be a day's worth of data, and it returns the value for a specific dimension.

[01:07 - 01:17] So the x-accessor function will take in a data point and it will return the number of pixels to the right. So let's dive in.

[01:18 - 01:28] So we can see here we're logging out our data set over here. So first we're going to create the y-accessor function.

[01:29 - 01:48] So let's just do const y-accessor equals, and another convention you'll see a lot in D3 code is just using the letter D to stand for a data point. There's a lot of times where you'll have pretty short functions that take a data point and need to return something.

[01:49 - 02:01] So this is something that kind of helps keep your code concise. So once we have this D data point, let's look at one of our days of data.

[02:02 - 02:08] And we want to plot the maximum temperature. So here we go.

[02:09 - 02:18] So this temperature max key is what we want to return. So we're grabbing that data point and returning temperature max.

[02:19 - 02:27] So let's just log that out real quick. So we're going to do y-accessor, and this is going to take one data point.

[02:28 - 02:40] So we're going to grab the first data point from our data array. And it's coming out undefined because term-putcher is not what we're looking for.

[02:41 - 02:44] We're looking for temperature. That's how you spell that.

[02:45 - 02:54] And here we can see the temperature maximum for our first day is around 18.4 degrees. Awesome.

[02:55 - 02:56] Pretty easy. Let's move on.

[02:57 - 03:05] Let's make an accessor for our x-dimension. This is going to be x-accessor.

[03:06 - 03:17] And then we want to grab the date because our x-axis is going to show the date. So let's open up one of these objects again.

[03:18 - 03:24] And we can see all the way down here, we're looking at a date. So date is going to be the string for that.

[03:25 - 03:34] And let's just grab this console log statement and turn this into our x-access or. And we can see it's returning our date.

[03:35 - 03:55] But here's one thing we're going to run into is our date is a string. And if we're a computer, it's not going to be clear to us, you know, how far apart is 2018 1 1 from 2018 to 1 or 2018 10 10.

[03:56 - 04:10] Especially since, you know, dates can be encoded with month before day or day before month. We're just going to want to turn that into something called a JavaScript date time object.

[04:11 - 04:22] So luckily, d3 has a method for this. So we're going to make, let's just call it a parse date function.

[04:23 - 04:31] And then we're going to use d3.time parse. This is a method that will return a function.

[04:32 - 04:44] And then all we need to do is specify the format of this string that we want to parse into a JavaScript date time. So we're looking at it here and the first component in this string is the year.

[04:45 - 05:02] So every component in this format string is going to be preceded by a percentage sign. So it's year, hyphen, and then we want percentage sign and the month and then percentage sign and the day.

[05:03 - 05:15] And so this parse date function is going to return a function that will parse any date of this format into a JavaScript date time. So let's look at what that might do.

[05:16 - 05:24] So let's wrap our date string with that. So when a Ruby's X successor, it'll parse that date string.

[05:25 - 06:00] And we can see here that instead of that string, we're seeing this JavaScript date time, which when you log it out, it'll have some kind of informative string instead of, you know, if we do type of, we can see that it's an object here. But it'll log out in a more informative way telling us, you know, this is a date time that correlates to January 1st, 2018 at midnight.

[06:01 - 06:09] So this is great. And I also wanted to talk a little bit about why these successor functions are so useful.

[06:10 - 06:19] So there's a few reasons. The first reason is that it's really easy to go back and change your code.

[06:20 - 06:40] I'm sure we've all been in situations where we write code and then either the business requirements change or the design changes or maybe the data structure changes and opening up an old code file can be a little bit daunting. But if you're always creating these successor functions at the top, you know exactly where to go.

[06:41 - 06:52] If say you need to change how you're parsing the data set. I find it very helpful to just have those always in the same place, always at the top.

[06:53 - 07:07] And also if you're not using the successor functions, you might have hard coded this string, Tumpture Max, in a few different places in your code file. And to change that you would have to go in and change every single instance.

[07:08 - 07:20] And it sounds pretty easy, but sometimes these successor functions can be a little bit more work like we saw for the X dimension. The second reason is for documentation.

[07:21 - 07:43] So again, if you're opening up an old code file, right at the top, you get a reminder of, oh, for our X dimension, we're looking at the date or for a Y dimension, we're looking at the maximum temperature and also a little bit of a reminder of how the data is structured. And the third reason is for framing.

[07:44 - 08:16] So I don't know about you, but when I'm about to visualize some data, I get really excited and I want to jump in and start drawing things right away. And this kind of makes me take a step back and really look at the data that I'm working with and think through, okay, we want date on the X axis or we want Tumpture as a color and like sit down, look at the data, think about the different physical dimensions that we're going to be turning it into.

[08:17 - 08:30] And this can prevent like, you know, you spend an hour on a chart and then you realize that that's not really going to work with this data set or the design isn't going to work. So, um, accessor functions, highly recommend them.

[08:31 - 08:34] You don't have to use them, but I find them really useful.