Drawing our chart

[00:00 - 00:13] So whenever we're visualizing data on the web, there are two containers whose dimensions we need to know. So the first one is called the wrapper and the second one is called the bounds.

[00:14 - 00:27] So the wrapper is this outside container that contains your entire chart. So that's any of the data elements, the axes, the legends, that's what the wrapper contains.

[00:28 - 00:42] And then within the wrapper we have the bounds which only contain the data elements. So you can see for this x-axis, the width of the bounds is the same as the width of the x-axis.

[00:43 - 00:57] And this is really important when you're creating charts on the web because you 'll often know how much space you want to allocate for the chart. So you can see it's the entire width of the web page and then a certain height.

[00:58 - 01:13] And then you also need to know the size of the bounds just to know how to draw these elements. But you also want to make space for the axes and the legends and anything else that you'll need within your chart.

[01:14 - 01:21] So let's look at what this looks like in practice. So we go back to our code over here, let's take out this console log statement.

[01:22 - 01:30] And let's create a dimensions object. So let dimensions equals and then create a new object.

[01:31 - 01:44] I like to call it dimensions, sometimes I'll shorten it to DMS because dimensions is a very long word. And as you can see, referring to items within dimensions can get a little verb ose.

[01:45 - 01:53] So first we'll define the width of our wrapper. So the width, let's make this 90% of the width of our window.

[01:54 - 02:07] So window.innerwidth.innerwidth times 0.9. And then we'll also want to know the height of our wrapper element.

[02:08 - 02:23] So height, let's just hard code it to 400 pixels because it's a timeline. The Aztec ratio isn't so important, but it's nice for it to have enough height for you to see the variations in the line.

[02:24 - 02:33] And the other thing we'll want in here are the margins. So I'll just throw another object in here and define the top, right, bottom, and left margins.

[02:34 - 02:50] So for the top margin, if we go back to our diagram, we're probably not going to have an axis on top or to the right. So, but as you can see here, our data might overflow the bounds a little bit.

[02:51 - 03:05] So let's add a little bit, maybe 15 pixels, just in case the data overflows, but not too much that we're making our chart too small. And then also for the right side, but for the bottom, we'll have an axis down there.

[03:06 - 03:28] So let's make it a little bit larger, let's say 40 pixels, and then for the left side, often you'll want a little bit more space for your left hand margin because we write words from left to right. So they'll often be horizontally longer than they are vertically tall, and we don't want them budding into our bounds.

[03:29 - 03:38] So let's give that a healthy 60 pixels. And you can always go back and change this after you've drawn the chart and maybe you've run out of space on the left.

[03:39 - 04:02] And the other thing we need to do here is specify the dimensions of our bounds. So let's just call this bounded width, and then the width of the bounds, if we look back at our diagram, it's going to be the same as the width of the wrapper, minus the horizontal margins.

[04:03 - 04:26] So we're going to subtract minus dimensions dot margins dot left, and also minus the dimensions dot margins dot rate. And then we'll also want to do this for the height of our bounds.

[04:27 - 04:36] This will help with defining the height of our y-axis. So we're going to grab the height and subtract the vertical margins to the top and the bottom.

[04:37 - 04:59] And if we log this out and pull up our console, we'll see that for our dimensions object we have the width and the height. The width is 90% of the width of this, so it's probably around 520 pixels wide.

[05:00 - 05:14] Static height, we have all of our margins here, and then the width and the height of the bounds. And as we can see, the width of the bounds is a little bit smaller, and the height of the bounds is also a little bit smaller.