Drawing our data in React

[00:00 - 01:08] Next up we need to draw our data. So if we look at our timeline component, we 're already importing this line element. So we can go ahead and just pull that in and we'll render that inside of our chart. So we want to create a line. And if we look at our line component, it accepts a few different properties with a few defaults. So we can set the type to line or area. We want to pass in our data and our accessor functions and also set the interpolation, which has a default of this monotone X interpolation, which let 's just stick with for now. So for our line, we want to pass in that data. And also these two accessors. So X accessor. And we want to pass in this scaled accessor. And this is so we don't have to pass our scale down to our line. It's converting from a data point to an X position. So X is our scaled. We want to do the same thing for that Y accessor.

[01:09 - 02:03] All right, so now we need to go to our line component. And all it's doing right now is rendering a path. So we're going to have to go ahead and figure out how to create that D string attribute. So up here, before we render anything, let's figure out how to create that D string attribute. So usually we use d3.line or d3.area to create a line generator. So let's go ahead and create a line generator. And if you're drawing a line, we'll want to use d3. line if you're drawing an area when you use d3.area. So because these two types correlate with the method names, we can just go ahead and pass the type in here. And we need to actually pass a few things.

[02:04 - 02:20] We'll call it and then set those properties. So on d3.line, we want to set X and also Y. And we can also set that curve to the interpolation.

[02:21 - 02:42] So for X, we want to use our X accessor for Y when you use our Y accessor. And this is basically just telling our line or area generator how to go from a data point to an extra Y value. And then next, we basically just need to call it with that data set. So const.

[02:43 - 04:04] Um, line equals one generator with the data. So the other thing we want to do here is if our type is area, we don't want to set Y, we want to set Y0 and Y1 to set the lower and upper bounds of our line. So we can do if type equals area. And then we want to use our line generator and just update those two, um, those two methods. So Y0 and Y1. And so Y0 is going to be the Y0 accessor, which is one of our properties. And the Y1 is going to be our Y accessor. So this just helps us to have a component that's a little bit more generic. So, you could use it to create a line, but also a filled in area, which a lot of people who don't create data biz with D three, you will think they're the same things. You know, I just want a line and I want to fill in the area underneath. Alright, so all I need to do here is take this string and set it as that D, um, attribute for the path. So it's just D equals line.

[04:05 - 04:33] Alright, there we go. So now we have a line that updates every four seconds or so. So this looks pretty great. The other thing I wanted to talk about is for this interpolation, um, this is just another way to keep our component really flexible. So we're defaulting to this monotone X. So you get a little bit of swiggles, but it's going to go through each of the points.

[04:34 - 05:25] Um, there's a link to the docs where they go over the different types. Um, but basically when you're creating the line, you could change the interpolation to something like D three dot curve. And it's going to auto complete for all of these, um, curve step after is one that's going to look very different. So this is kind of more a stepped interpolation. There's curve linear, um, which is just going to be straight lines in between different points. So go ahead and play around with that. Um, and it's just nice to have that as an option, um, for your component, just so you can use the line in a few more places. And you don't have to make extra components just for that little bit of, uh, customization.