Build a Responsive Globe Visualization With Svelte Dimension Bindings

[00:00 - 00:11] And this lesson we're going to make our globe responsive. And it's even easier than some of the other times that we've been working with responsiveness and spelt, which is saying a lot because those are incredibly easy.

[00:12 - 00:20] The first thing that we'll do is pretty standard for our charts. As you may now remember, we're going to create a new wrapper div around the SVG , call it chart container.

[00:21 - 00:33] Then we're going to bind the client width of this chart container to our existing width variable. We're going to open that, write the entire SVG inside, and then close it directly under the SVG.

[00:34 - 00:45] So now if I save, what you're going to see is that this kind of exceeds the entire boundary. And the reason for that is because our width is now 478, while our height is 400.

[00:46 - 00:57] So the problem here is that height is still hard coded to be 400. But in reality, we actually want the height of our visualization, the height of our globe to always be equal to our width.

[00:58 - 01:05] So we can go ahead and write height equals width. Make sure we use this dollar label so it updates if and when the globe is res ized.

[01:06 - 01:21] Now the issue is that if we go on a very large screen, this probably isn't the behavior that we wanted. One thing that we could do is create some listener that basically says do the greater of the two values, the width or height, so that it never exceeds one dimension.

[01:22 - 01:44] But actually the simplest way to solve our problem is just going to be to add a CSS rule to our chart container that basically bounds the width of this globe. So I'm going to open our style tag and within it, I'm going to add a new class or a new rule set for chart container, which is simply a max, a max width of 460 pixels.

[01:45 - 01:49] I'm going to save and then show you what happens as I resize. It stays the same width.

[01:50 - 02:16] If I get smaller, however, for example, a little bit smaller than 468, you would see that it does in fact shrink, meaning it's going to be responsive up until a point and then it will simply stay the same size. Now if we wanted this to be centered on the screen, for example, here you see how it's still just on the left side, we need to add margin of zero auto, where zero is its top bottom margin, its vertical margin, and auto is its horizontal margin.

[02:17 - 02:28] So essentially, this will force the space on its right and left sides to be equal to one another. Let's save that and see how it repositions itself in the center of our screen.

[02:29 - 02:43] So what we've just completed might be a very helpful kind of starter kit for a simple and responsive globe based visualization that could encode any number of data points within this globe itself. So hopefully this was pretty easy.

[02:44 - 02:48] It was like a two minute lesson, I'm sure you could use the relief. So here you are.

[02:49 - 02:57] And in our next lesson, we're going to add a little bit of additional styling to our globe. So it looks a bit nicer and it's ready to introduce data to.

[02:58 - 02:58] I'll see you there.