Drawing the line

[00:00 - 00:12] Alright, so now we're ready to start drawing our data elements. So let's go back to our code and down here we're going to want to create a path element.

[00:13 - 00:33] So const line equals bounds.append forgotten in here and then a path. So for any kind of complex shape in SAG you're going to want to use a path element.

[00:34 - 00:51] And for these path elements they are these shapes are defined by a D the letter attribute. So this is going to look like a TDR D. And then the D attribute takes a string.

[00:52 - 01:10] And if you've ever been a kid and been learning to code or maybe when you're first learning to code you might have had some kind of procedural game kind of like this. So this turtle is going straight for 80 pixels turns 90 degrees.

[01:11 - 01:24] And then 26 times it goes 10 pixels and then turns by 10 degrees. So this is kind of what the SVG path string is doing but it has these shortcuts .

[01:25 - 01:38] So it has these different letters that if you follow with numbers it'll do different things. So for the letter M it's going to stand for move to.

[01:39 - 01:47] So let's move to zero zero. So that's the coordinate zero zero X is zero and Y is zero.

[01:48 - 01:58] And another letter you'll see a lot is L. So that's line two. So let's draw a line to 100 and then zero and it's O is XY.

[01:59 - 02:15] And then let's draw another line down to 100 100. And another line let's go over to 50 150.

[02:16 - 02:24] And so this is kind of what a line D string looks like. As you can see they're not really fun to make.

[02:25 - 02:36] So instead let's use something that D three gives us that I call a line generator. So const line generator.

[02:37 - 02:53] So this is going to use D three dot line. And for line we want to use two methods X and also Y.

[02:54 - 03:14] So for X we want to pass a function that takes the data point and returns the X value of that data point and the same for Y. So hopefully there are bells ringing in your head saying accessor functions and you're very close.

[03:15 - 03:33] But remember that accessor functions are returning the raw value. So the Y accessor is returning the raw temperature maximum value and the X successor is returning this JavaScript date time object.

[03:34 - 03:57] So instead let's create a new accessor functions that will use our X scale and our X X successor times that data point. So we're going to want to do the same thing for Y but we're going to be using our Y accessor.

[03:58 - 04:03] I'm spelling this one already. There we go.

[04:04 - 04:30] And basically this generator is going to take our data array and go through each point and determine the X and the Y position for every point on our line. So to use this we'll replace this string with our line generator or we're going to pass our line generator our data.

[04:31 - 04:35] And we don't need to have a function here. We can just return line generator.

[04:36 - 04:39] So this is great. Something looks a little bit funky though.

[04:40 - 05:00] We can see this straight line all the way from our end point to our beginning point. And this is because by default most SVG elements have a black fill and no stroke which is the correlate for border for HTML elements.

[05:01 - 05:03] So let's update this. Let's take out that fill.

[05:04 - 05:13] I'm using keyword shortcuts I didn't even know I had. So let's make that fill none.

[05:14 - 05:21] You don't want to fill. And let's give it a stroke of this hex value over here that I like.

[05:22 - 05:30] But you could use any value. There's a few good HTML colors like gold is a good one.

[05:31 - 05:39] Maybe that's not a good one or gray. Another one I like is cornflower blue.

[05:40 - 05:47] It's a little bit verbose but it's a nice color. I'm just going to throw in this hex color and then this stroke is a little bit small.

[05:48 - 05:58] So let's also beef it up a little bit using stroke width and let's give it a stroke width of two. And there we go.

[05:59 - 06:05] We've drawn our data on our chart. Let's make that a little bit bigger and trigger a re-render.

[06:06 - 06:17] There we go. We can see that our maximum temperature, you know, this seems to be summer over here where we're probably up in the 80, 90 degree range.

[06:18 - 06:25] Remember this is New York City so we also have winters where the maximum temperature even is below that freezing point.