Adding a Title to a Svelte Rotating Globe Visualization

[00:00 - 00:16] Hey everyone, let's finish up this globe by adding a title and subtitle. A really easy lesson, just kind of wanted to add some final polish to the globe and then maybe review what we did so we can kind of remember the patterns that we carried out in module 3.

[00:17 - 00:34] So we're going to add a title and a subtitle which are going to live in our app .sfelt component, the largest component in our codebase. And these are just going to be regular H1 and H2 elements and they're going to be within our chart container.

[00:35 - 00:52] So we're going to add an H1 here and give it a class of title optionally but because it's the only H1 we can just target that directly. So we'll say some nice title like the world at a glance, whatever else you want and an H2 for your subtitle which actually describes what we're rendering.

[00:53 - 01:07] So what we're rendering is population by country as of 2021. Maybe if you were to be fully accurate with your data preparation and presentation, you might add the source but this is not an exercise in data preparation and presentation.

[01:08 - 01:18] It is a data visualization course. So of course you would probably want a note with the actual source before just rendering this random globe but we're just going to render the random globe.

[01:19 - 01:26] And H1 and H2, by default they're going to look ugly, they're going to be this dark color you can't see on the background. So let's add some styles.

[01:27 - 01:41] Down at the very bottom of our styles tag, we'll add an H1 and an H2 class in the same rule set. We'll go ahead and say color of white and a text align of center, meaning it'll be centered and white obviously.

[01:42 - 01:51] We need a bit of visual distinction between the H1 and the H2. So what I'll do is I'll add rule set for H1 which is a font size of 1.75 rem so it's bigger.

[01:52 - 01:59] See how big that is. Font weight of 500, 200, play around with whatever value you like.

[02:00 - 02:07] I like this bold color. And then an H2, we'll give that H2 a font size of 1.25 rem.

[02:08 - 02:11] Font weight of 200. Let's see how that looks.

[02:12 - 02:23] The only thing we need now is a margin bottom so you can actually it breathes and we'll do a margin bottom of 1 rem. And then I think maybe we want them to be visually separated from one another as well.

[02:24 - 02:28] So let's add a margin bottom to our H1. We'll just make this slight something like 0.35 rem.

[02:29 - 02:32] See how that looks. Whatever you feel looks best here.

[02:33 - 02:42] I like this value. And with that, our chart has a title which is effectively the last thing we needed for our globe to be mostly complete.

[02:43 - 02:49] So let's go over what we did lesson by lesson. In the first lesson, we plotted countries.

[02:50 - 03:12] You'll recall that we started off with the shape file that had geographic coordinates for all the countries in the world in gibberish that we didn't understand. And so we used D3GO, this really helpful library from the D3 team that basically takes those coordinates and that raw data that's confusing to us and maps it on to positions on a canvas.

[03:13 - 03:27] And it does so using what they call projections, D3 geographic projections. And by passing those projections into a path generator, we're able to render each and every country as its own element within the markup.

[03:28 - 03:35] That's what we're doing right here. And so after we plotted our countries, we then made the chart responsive.

[03:36 - 03:50] This was very simple because we're using Svelte and Svelte makes things simple. But basically we said the width should always be equal to the height and the width should be equal to the page width up until we hit 468 and then it should basically be bound there.

[03:51 - 03:59] That should be the max possible width. So if we go below that, it does get smaller properly, but our globe was then made responsive.

[04:00 - 04:02] Then we styled our globe. So we used a better color palette.

[04:03 - 04:10] We created a globe background color. We made it dark mode, just making the overall chart look a bit nicer.

[04:11 - 04:19] And then once we had the style down, we were able to add data. So we brought in data from a different source and we had population and country name.

[04:20 - 04:33] We merged those data sets together and created a color scale so that we could actually fill each country proportional to its population. And then that was a cool globe that only showed one hemisphere.

[04:34 - 04:52] So we decided to add globe rotation, both automatic rotation between every millisecond, every frame where it would rotate on its own and user directed rotation, like so. So I can move it with inertia with spring momentum between states.

[04:53 - 04:55] Then we wanted to add a tooltip. So we did that.

[04:56 - 05:20] As you click on a country now, you'll notice it moves to that country, it freezes, it highlights that country, and there's a tooltip that visualizes and describes its population. And then finally, you know, to add the final bit of context, we added a legend, which you see down here, and a reference line, which corresponds to the selected country 's position in the overall color scale and the overall value range.

[05:21 - 05:35] This lesson, we added a title. So all in all, we learned a lot of patterns, we learned some things that we did in the first two modules, you know, D3 scales and responsiveness and spell, and we did a lot of new things, like a lot of D3 internals around geographic projections.

[05:36 - 05:41] We learned about those. We also learned how to select elements using D3.

[05:42 - 05:49] So in our case, we could use this drag handler. So overall, it was a good, complete lesson that introduced us to new patterns.

[05:50 - 05:59] We needed to adopt some unique edge cases, but overall relied on the same key steps as our previous modules. So I hope you enjoyed this module.

[06:00 - 06:08] If you run into any problems, feel free to write a comment or reach out to me. In our fourth and final module that you'll be encountering next, we'll be creating a scroll-y telling story.

[06:09 - 06:19] And what that means is as the user scrolls down your web page, things will change. So there's a lot to look forward to, you know, this is a really cool feature of data visualization that a lot of newsrooms use.

[06:20 - 06:27] So I hope that you have fun with that too. And I hope you rest before starting module four, and I will see you in that module.

[06:28 - 06:28] Thanks.