d3.js Axes and Grids Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

11:14:50 Hi! Everybody! Welcome back in this video. We're going to continue to learn about making data.
11:14:55 Visualizations with d. 3 js. By talking about how we can add axes and grids to our plots.
11:15:03 So in order to add an axes, you need to make a.
11:15:05 D 3 dot access object, so this is just an access object.
11:15:12 There's a variety of options you could call just regular dot access, but it's most common to use access bottom for a horizontal axis and axis left for a vertical axis.
11:15:21 Your other options are axis. Top if you'd like to have your horizontal axis up on the top and access right if you'd like it to be on the right the vertical axis that is so input to these functions are the scale, that we've learned how to make in
11:15:37 our previous scale, lecture so for example, we could make an X-axis by putting in the X scale that we create into D 3 dot access bottom.
11:15:49 So this will go ahead and take in that X scale and create the appropriate access.
11:15:55 Accordingly, we can alter the appearance of tick marks, using either ticks, which takes in a number to set the desired number of ticks.
11:16:03 It will do its best to get as close as it can to that number.
11:16:05 You can increase the tick size by providing an argument to the tick size, positive numbers will go in the direction of the type of access.
11:16:14 So, for instance, for access bottom, a positive number of 10 would draw your tick marks down 10 pixels.
11:16:24 There's the tick format which will allow you to provide a function for setting how to display the tick labels.
11:16:29 So, for instance, maybe you want to round to 3 significant digits or something like that.
11:16:32 And then, instead of ticks, you could provide tick values which gives a specific number, a specific array of the tick values that you'd like drawn on so once you've created an access, you need to append it by a pending a G and then maybe I think what will look best is
11:16:52 if we actually just look at the code and I explain it in there.
11:16:56 So let's go ahead and open up axis, HTML, and let's go ahead and open up axis, dot HTML, and lecture 24.
11:17:01 I'm gonna open it in visual studio first.
11:17:04 So I'm gonna demonstrate 3 different axes.
11:17:08 The first will just be appending a default access without changing anything, and then we'll make some adjustments from there.
11:17:16 One thing to point out is when you add an access, it has to be on the same Svg.
11:17:21 As your rem as your points, so you might want to add some extra padding to allow room for the access to be drawn, so here we're just adding our Svgs.
11:17:32 And here we saw this in a previous video lecture, making some scales.
11:17:39 And so let's go ahead and dive in. So here we're making some defaults.
11:17:41 Axes. And let's also point out I define a tick size of 5 at the top of this code Chunk.
11:17:47 So when I make my X-axis, it's just like I said in the slides they call d 3 dot access bottom x scale, and then dot tick, size, tick size, and then for the y-axis, the only thing that changes are the axis left instead of access bottom and then y scale instead of x scale
11:18:07 the tick size will be the same. So then, once we have the access as variables or objects, we now need to append the axes onto the plot, so actually draw them on.
11:18:20 So in order to do that, you select your device desired. Svg.
11:18:23 For us. It's just going to be the first one in this example.
11:18:26 Then you append a group. So append G. Then you set the style.
11:18:33 So for us, this is gonna include styling the font of the tick markers.
11:18:38 So you can increase the font size using font size.
11:18:41 So this part is probably the most important. So the transform determines where your Svg.
11:18:48 Object is placed on the Sbg. So for us, we're going to take it so by default, even though it's Axis Bottom, it's actually drawn at the top because we're Sbg, the 0 is the top and the left of the Svg so we have to
11:19:07 translate it down, so we are still going to keep it at 0 on the X, as our starting point.
11:19:14 But for the Y, we're going to use it down to the height of the Spg.
11:19:18 Minus the padding, so this will draw it right where the Y would be equal to 0.
11:19:24 Thanks to our Y scale, and then, after you set all of these items of the group you call X-axis.
11:19:31 So calling x-axis is what allows you to put the x-axis inside of the G right here, and then it's exactly the same for the y-axis, except now, instead of changing the Y, you change the X okay, and you might be wondering why do I have to do it. Like this.
11:19:51 This is just the syntax for adding a transcri you have to add it as a string, and then the things that are numbers that you'd like to calculate, or input a variable as you'd do, a plus and then me know either calculate your number or input your variable okay, so let's go ahead
11:20:08 and open this, and just look at the first. So this is the first axis that we made.
11:20:15 Okay? So you can see, this is what the default looks like with the at tick.
11:20:20 The tick markers being 5 pixels long.
11:20:23 Now let's look at some examples of how we can use some of those arguments.
11:20:31 So here again, we're defining our X-axis with access bottom, our y-axis with access left.
11:20:38 And this example we're showing how we can set specific tick values so negative, 2, negative, 1, 0, 1, 2.
11:20:44 So it would be here, here, here, here, and here, and then I'm going to use this variable labels.
11:20:53 And actually I should involve, include a let. Here, I'm gonna use this variable labels and this function that will take in the vat the desired tick values and then change it to be the labels, A, B C D and E then for the Y-axis the only thing
11:21:14 I change is now I'm going to use the ticks argument and say, I would like to have 6 tick marks and then we'll see what it does.
11:21:22 So this is already done for us. We've already appended it. So why don't we go ahead and take a look?
11:21:29 So here we can see we've got those 6. So tried.
11:21:33 It's best to get to 6. And actually, I think there is a 6 one up here.
11:21:36 Maybe. But it looks like mainly just the 5 tick marks.
11:21:39 So that's as close as it would be like willing to let us get to 6, and then on the bottom you can see the specific tick mark labels with our ABC.
11:21:49 De. This would be where negative 2 was where negative, one was where 0 was, where one was and where 2 was.
11:21:57 Okay, so in d 3, dot js, in order to add a grid line in the background.
11:22:04 So remember things like Seaborne and Boca, and Plotley had nice grid lines in the background that would make comparisons of values a little bit easier.
11:22:13 And d. 3, that Js grid lines are just really long tick marks.
11:22:18 So we would need to set the tick size to the desired length of our grid lines.
11:22:23 So we can use the style to set the style options for our grid of giving the access.
11:22:29 G. A class or id. So we'll talk about that.
11:22:31 And when we see the actual code. So let's show an example where we add some grid lines.
11:22:38 Now remember what I said earlier, that 4 things like axis, bottom and axis left the positive numbers draw in the direction of the axis.
11:22:47 So for Axis Bottom, a positive tick length will draw downwards for access.
11:22:53 Left a positive tick length will draw to the left. So if we want to make a grid line in the back of our plots, we need to put in negative value. So for us, that's going to be negative, the height of the Svg.
11:23:06 Plus 2 times the padding because we have padding on the top and the bottom that we want to account for.
11:23:13 Then for the y-axis, we're going to have negative the width plus 2 times the padding again, because we have pattern on the left and the right that we want to account for, and then, when we append it, we provide an attribute so we set the class to be a grid, and this
11:23:33 allows us to set the style of the grid, and this allows us to set the style of the grid lines.
11:23:40 Here we set the color of the grid lines themselves to be light gray, and we set them to be light gray, and we set them to be slightly see-through, and so this is using our style arguments from Css.
11:23:50 So one, we have appended these. We can now scroll down to our third chart, where we have grid lines, and you can see that our chart now has grid lines.
11:23:59 If we wanted to, we could combine both the grid lines and these extra arguments of where the ticks are.
11:24:05 But for now we're just showing the grid lines, using the default tick values other than tick size.
11:24:11 And I guess, for the X scale. I said, only 8 ticks.
11:24:15 Okay. So now you know how to add axes to your d.
11:24:19 3, dot J. S. Plots. You also know how to add grid lines in the background of your D.
11:24:24 3 dot Js plots, and the next video, we're going to talk about additional annotations or additional non graphical elements by talking about titles, access labels and text annotations.