Flower Visualization & HTML: Adding the Width & Height

[00:00:00]
>> And now, We have the news and links, That we did before in our observable netbooks. And so, Let us, Go ahead and create and go ahead and select our SVG. And now, what we can do is go ahead and use SVG, we selected the d3 selection of SVG.

[00:00:37]
And we're gonna kinda replace, All of the previous selections we did, look at that we're already getting our flowers being rendered, and we'll go and do that and, We're very close, we have everything rendered. And so there seems to be a few more things that we need to do just to get the simulation part working.

[00:01:05]
So let's figure out what is going on here. Let's see if there's any errors now. Yes, [LAUGH] our width is not defined. And so let's go ahead and, I'm gonna scroll back up to the top. And I'm going to define our width, let's say, as the width of our window.

[00:01:31]
So I'm gonna say window.innerWidth. And, yeah, is now drawing everything and you can see that our SVG doesn't have the width and height yet. So we can go ahead and set the width and height of SVG. And then after that we should be able to see everything rendering as it was in observable notebooks.

[00:01:57]
So let's go ahead and update our width and height and the place we're gonna do that is in here. Let's say select svg, d3 select svg and set the width to the width at variable. And actually, in this case, let's set our height to the window height also.

[00:02:25]
So what I'm gonna do is I'm gonna go ahead and update that. The only other part that we reference the width and height is in our first simulation. Where we center around the center of our container, so let's go ahead and do width divided by 2 and height divided by 2.

[00:02:47]
And of course, we don't have the height variable yet. So let's go ahead and come back here to define our height. And now we should be able to, awesome. So there we go, we have everything translated over into our index HTML. And it was a little bit more copying pasting them before but, it was mostly just tracking down the variables that we were missing.

[00:03:14]
And in general I like to organize everything as an all of our constant variables first, some functions where the functions aren't reliant on the data. And then everything else being within this callback function after the data is loaded in. And I guess a little bit of a note about responsiveness because I know we had a question about that earlier.

[00:03:50]
And so if we wanted to make this, If we wanted to make this our SVG container, resize on window resize and then have all of these positions update. What we will want to do is listen to a window resize event, and maybe somewhere outside of this movie, loading block.

[00:04:23]
And so maybe we will have something here that says window resize. And we will probably have a another function that's actually, and let me take that back, we probably would want to do the window resize within the movies callback. Because the window resize would be trying update a lot of things in the blog/ So we'll probably have the window resize and probably somewhere in here.

[00:05:00]
And then window resize we can say go ahead and recalculate the width and height and update the SVG attributes for that. And then we will want to go down to the fourth simulation call. And we will probably say, go ahead and do simulation, take the simulation that we've already initialized here.

[00:05:33]
And then let's go ahead and update this force center where we're setting the width and the center of the container and reset that. And then we can go ahead and restart the force simulation so that everything will update its position. So that's how we would do it in this particular case.

[00:05:57]
And really depending on the chart or visualization you're trying to make everything, it will all change around a little bit. But that's in general how you would think about making sure that your visualization is responsive. Yeah, that is how we translate everything into our index HTML.