Step 2: Create chart dimensions

[00:00 - 00:07] Alright, so our next step is to create our chart dimensions. Now this is going to look a little bit different than during our last lesson.

[00:08 - 00:19] So when we were making the timeline, we had it stretch all the way across the size of the window and it had it stuck at 400 pixels tall. And for the scatter plot, the most important thing is to keep it square.

[00:20 - 00:41] And if we look at our diagram, we can see that our x-axis is the same width as our y-axis is tall and this is really important. So we're not skewing it one way or the other and we're treating both of these metrics with an equal amount of space so that we can get a clear picture of the relationship between the two of them.

[00:42 - 01:07] So for creating the chart dimensions, first we'll want to create a width. And so we want the width of the chart to be either 90% of the width of the window or 90% of the height of the window, whichever is smaller so that it can fit within the window, whether it's landscape or portrait, without going outside.

[01:08 - 01:22] So to do this, we can use the d3.min method and that's going to take an array as the first parameter. Let's get the window in our width and multiply it by 0.9 because we don't want it to stretch all the way across the window.

[01:23 - 01:30] We want a little bit of space. And we're going to do the same thing but this time with that inner height.

[01:31 - 01:51] So this is going to figure out, let's just log that out, which of those is the smallest one and then spit out whichever one is smaller. So if this window looks like a landscape window, so it's going to return the inner height because the height is shorter than the width.

[01:52 - 01:59] Now you might be wondering, isn't there a native browser method that does the same thing? So there's also, also meth.min.

[02:00 - 02:15] And let's take a minute to look at the differences between these two methods because they are very similar. Let's just grab a sample array and then log out.

[02:16 - 02:32] Alright, so for this first one, let's just name it D3 and for this next one, let's name it math and add some commas. Let's throw this array in here.

[02:33 - 02:44] So the first thing we'll notice is that our meth.min native method is returning not a number. And the reason for this is that it's a little bit different than D3.min.

[02:45 - 02:52] We don't pass it an array, but instead each of the values should be its own parameter. So it would be something like this.

[02:53 - 03:05] But if we want to use the array we have, we can just use the three dot spread syntax to spread it into the individual parameters. So off of that, we can see that they're very similar.

[03:06 - 03:32] Right, if given this simple array of 123, they're both returning that smallest value of one. And if we change the round and now this most values to now, one of the main differences is if we had a null value in our array, then that D3 is still going to return to as the lowest number, whereas the native method is going to convert null into a number , which would be zero.

[03:33 - 03:49] So any array that has a nonnet, the min will be zero or if you have negative numbers, whatever those are, which isn't necessarily what you want when you're creating a chart. You often just want to ignore values that aren't there.

[03:50 - 03:56] So another value that gets treated differently is undefined. D3 again ignores it.

[03:57 - 04:07] Math says it's not a number. So any array that has an undefined value or a string or anything that can't be converted into a number.

[04:08 - 04:31] It's going to return not a number, which might be a little bit confusing or frustrating if you have a few empty rows, you just want to ignore them. The other big difference is that if it's an empty array, which you might never run into maybe this isn't a big deal, but D3 will return undefined.

[04:32 - 04:49] Math.min will return infinity, which I guess is the smallest number if there are no numbers. And the other big difference I want to go over is that D3.min also takes an accessor function.

[04:50 - 05:00] So we could do D times two. If you had one, two, three, it should be two because the smallest one is one times two is two.

[05:01 - 05:12] But this is also really nice for, say, we wanted the smallest x value in our data set. We could use data and then pass it x accessor.

[05:13 - 05:21] And then we'd get that smallest x value without having to make a new array of only x values. So those are the differences.

[05:22 - 05:31] I prefer to use D3.min when creating charts. I think some of the design decisions they made with the API just make a little bit more sense for that use case.

[05:32 - 05:34] All right. So next we want to create our dimensions.

[05:35 - 05:47] It's going to be pretty straightforward. We went with to be the width, which we can then shorten to this ES6 syntax.

[05:48 - 06:04] It's going to pass the width key as the value of the variable width, which is going to be I think it was about 390. So for height, we also want the value of this width parameter width variable.

[06:05 - 06:34] And then for our margins, kind of similar to the timeline, we want a really small top and right margin just to help with not cutting off the data if it goes all the way to the edges and then a little bit bigger, bottom and left margins. So the top, let's give it 10 pixels, the right, let's give it 10 pixels, bottom , let's give it 50 pixels and for the left, let's also give it 50 pixels.

[06:35 - 06:44] And then the last thing here is to figure out the width and height of the bounds. So this width and height correlate to the width and height of the wrapper.

[06:45 - 06:50] So the entire chart. But let's figure out what it is for those data elements.

[06:51 - 07:03] So dimensions and up bounded width. And that's going to be dimensions that width minus the marginal margin.

[07:04 - 07:15] So the right margin minus the left margin. And then it's going to be very similar for the height.

[07:16 - 07:21] And we're going to grab the height and subtract those horizontal margins. So the top and the bottom margins.

[07:22 - 07:25] [OLD TO DRILLING THEME]