Drawing SVGs With Data 2 Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

12:37:53 Hi! Everybody! Welcome back in this video we continue to learn how we can draw Svgs with data.
12:38:00 In particular, we're going to learn about rectangles and paths with D, 3 js, so rectangular based graphs like bar charts, histograms, box and whisker plots, heat maps and more can be drawn by appending a wrecked to the
12:38:17 to the Svg. So a quick reminder about how rectangle Svg elements work.
12:38:24 You set the X and the Y position of the upper left hand corner.
12:38:29 So X. Refers to the left-hand side of the rectangle, and Y refers to the top of the rectangle, and then you give the widths to the top of the rectangle, and then you give the width which draws from the left, to the right and the height
12:38:40 which draws from the top to the bottom. So we need to be mindful about how the rectangles are drawn when we use data to draw them, meaning that our Y position should be the desired height.
12:38:52 So, for instance, if we had a d dot y, that would be what we use, and then the height should be the height, the total height of the Svg.
12:39:03 Accounting for whatever padding you're using. The height of the rectangle.
12:39:08 Why is that? Because we want it to draw from here to the bottom and the bottom of our rectangle typically sits either on the height of the Svg.
12:39:16 Or the height, minus some padding. It's so. Why don't we go ahead and look at Bar Chart?
12:39:22 Dot HTML, for an example, and we'll see what we're talking about.
12:39:29 So here we've got our bar chart. We're putting it inside of this div.
12:39:35 So the first thing we have is our data, which is just going to be these various numbers.
12:39:41 And then here I'm just creating my Svg.
12:39:44 And if you can also notice, I'm setting some variables for my rectangle.
12:39:48 So the color of all my rectangles will be light blue, and the color of my border will be black.
12:39:54 So this we can also see we're appending the Svg.
12:39:58 And we're making the scales and notice that we do have padding on our Svg.
12:40:04 For the graphic. So to add the bars. And maybe this is another example where it would be nice to see me doing the coding by hand.
12:40:12 So after data, we have enter, then we're going to set our append rect.
12:40:19 Rect, and then I'm gonna do attributes.
12:40:23 And I'm gonna set the position of the left hand side.
12:40:26 So function. So here a keynote for our X scale is, we're not going from an X value right?
12:40:33 The only values we have or how tall we want our rectangles to be.
12:40:37 And so for us the X-scale is going to be given by the number of entries within our data set.
12:40:45 So if we have in this example, we have 1, 2, 3, 4, 5, 6, 7, 8, we're gonna set our X to go from 0 to 8 in the domain.
12:40:54 And then for the range. We're gonna go from padding to Svg.
12:40:57 Minus padding, so each of our exp positions are going to be set to be the grow that are the row of our entry.
12:41:08 So another quick point is, you can get the length of any array with the array.
12:41:12 Name, dot length. So in our function, then we want d comma.
12:41:19 I, and then return. X. Scale, so we don't need parse float, or parse int.
12:41:26 Because the eyes are going to be Numbers X scale. I so that's gonna give us our horizontal position of the left hand side of the rectangle.
12:41:37 Next we need the Y, so function d just d this time would turn y scale and then here we're gonna do.
12:41:46 D just d right, because our attributes our properties, aren't named.
12:41:52 Our data is just this simple array. So just D, and so we are we doing this?
12:41:56 Well, remember. The Y should be the heights of the rectangle from the bottom, right?
12:42:02 So that's what we want our Y to be now for our.
12:42:09 Not attributes y for our widths. Not? Why sorry about that width for our widths?
12:42:17 I'm just gonna set it to be, whatever the X skill is, for point 5.
12:42:23 For our height. I'm going to set this is a little bit more complicated, so remember, we wanna go from the bottom of the Svg.
12:42:34 Subtracted by the height of the rectangle, and so for us our bottom is going to be Svg.
12:42:42 Heights, padding. So let's first start our function function.
12:42:46 D. Return, and then Svg. Height, minus padding.
12:42:56 Copy paste, and then minus y scale, d.
12:43:07 And then the next thing we need to set are just the fill and.
12:43:13 Which is wrecked color, and then the stroke, which will be the rectangle border color.
12:43:27 So now that we've got that.
12:43:31 We can go through and check out what it's gonna look like.
12:43:36 Okay. So you can see here the base of all our rectangles sits a little bit, a padding amount of pixels away from the bottom, and the way we've set it up the maximum value of our rectangles, goes all the way up to a padding from the
12:43:50 top, so that's a bar chart historyograms and other charts can be made. Similarly.
12:43:56 But you're gonna have to do more. So remember, like in Matt plot lib the calculations for those statistics will be made for you.
12:44:05 You would have to use some other Javascript or D.
12:44:08 Threej. S functions to calculate their relevant statistics for your rectangles in those other chart types.
12:44:16 Okay. So now let's talk about, how do you draw lines with d 3 dot?
12:44:22 Js, the first way you can do it is to append a line.
12:44:26 So a line has the following attributes, x, one, y.
12:44:30 One, which is the position of the first point and x 2 y.
12:44:33 2, which is the position of the second point. So by appending a line you can just draw a single line from 1 point to another, you can just draw a single line from 1 point to another, you can also maybe before we dive into that maybe it makes sense to look at that example so visual
12:44:48 studio. Here we have the appending of the line, so I've set these points x one x 2 y.
12:44:57 One y. 2. So the points are 50 50 comma. 5 50 to sorry.
12:45:02 50 comma 50 is the first point, and the second point is 5 50 comma, 250.
12:45:07 Remember, these are being measured in pixels, and then, if we go through, we can see.
12:45:14 Here is the line that we've appended. The nesting. The next example is appending. A path.
12:45:22 So remember, we talked about paths in our Svg elements.
12:45:25 So there's a couple different. It's not as straightforward as appending a scatterplot, or like a circle or a rectangle.
12:45:32 Here we have to define a few things. So the first thing we have to define is a.
12:45:36 D 3 dot line. So a d 3 dot line has 2 calling functions. After that.
12:45:43 So X. Which will take in a function of what you want.
12:45:46 The X values to and y, which will take in a function of what you want the X values to be, and y, which will take in a function providing what you want.
12:45:51 The Y values to be. So let's go ahead and see that in the code.
12:45:55 So here's where I'm defining my d 3 dot line.
12:45:59 And then in the console I've logged what the line is, so we can see here that this is a function that's going to take in the X values from the data we provided.
12:46:11 And the Y values from the data we provided. Okay, the next thing we need to do is basically just do the D 3 append apart.
12:46:23 So you're gonna do. D 3. Select. Now, there's a big difference here that instead of data, use date time.
12:46:32 So it would be d 3 dot select Svg, dot datum, not data.
12:46:37 You input the data as a variable, just like you normally would.
12:46:43 You do not use, enter, and then you set the D attribute of the path.
12:46:46 Remember, that's like the M. A. Point L. A.
12:46:50 Point and a point, and so forth. So you set the D attribute of the path to be the line variable or function.
12:46:58 We've defined earlier. So let's see that.
12:47:03 So here I've selected the relevant Svg, I'm appending a path to it.
12:47:09 I'm putting a data, not notice. No, enter. Maybe I'll make a note in the code.
12:47:14 No need to call. Enter this time. Then I set the attribute of D equal to the line.
12:47:27 We defined this above, and then these are just the aesthetic appearances of the line itself.
12:47:34 And so this line that we're looking@iscomingfromthisdatasetmaybeitwouldbegoodtolookatthedataaswellconsole.log data.
12:47:47 So here's our data, we've got an axis.
12:47:50 Y, a, size and a color. Okay?
12:47:56 So here's what that path looks like. So each point was connected with a straight line.
12:48:05 And just like with Matt plot, lib, or whatever you can add, scatter points on top.
12:48:11 But in order to add markers on top, you have to manually place them.
12:48:15 So in addition to this path that we've appended.
12:48:20 So, in addition to this path, we'd also have to make append a series of circles like we were making a scatter plot.
12:48:29 So here's an example. In the last Svg.
12:48:31 Where I append that path. And then I add the markers, and here's what that looks like.
12:48:37 Okay. So now we've learned how to use d 3 dot.
12:48:41 Js. To make a scatter plot to make a bar chart, and then have LED you in the direction of how you can learn more, how you could make additional rectangle chart types, and then finally, how to make a line chart with or without markers so in the next video
12:48:58 we're gonna return to the idea of Svg groups and see how they're useful in D 3 dot.