Adding Finishing Touches to a Svelte Scatterplot

[00:00 - 00:10] Hey everyone, in this final lesson for our first module, we're going to add some little bit of polish to our chart to make it production ready. So you can finally publish this chart.

[00:11 - 00:26] Well, obviously not because this is a fake chart with fake data from an online course, but hopefully by the end of this lesson, you'll have learned a lot of the patterns within this module that are going to be helpful in future modules as well, right? We're about to get into some more complex charts.

[00:27 - 00:42] So understanding the fundamentals with a simple chart like this one is going to serve us well. And by the end of this lesson, we'll have added a little bit of polish, a chart title and some nice fade in transitions to finally bring our scatter plot ready for publication.

[00:43 - 00:52] So like I said, we're going to be doing two things. We're going to be adding a chart title above the chart up here, and we're going to be adding animations for each circle as they fade in.

[00:53 - 00:57] Let's go ahead and start with a chart title. Now here we're just going to be using a simple H1.

[00:58 - 01:02] This is not, you know, some specifics felt title. This is not anything special.

[01:03 - 01:10] This is an HTML H1 tag, which stands for heading one. You might remember there H2, three, four, five, and six.

[01:11 - 01:16] We're going to use one because this is the primary heading. So we're going to add a chart title here.

[01:17 - 01:28] You can use whatever title you want, but personally as someone who enjoys data visualization, I like really descriptive insight generating titles. Kind of they lead you to the key insight.

[01:29 - 01:41] And here because of this upward linear trend, I think the insight is that students who studied longer scored higher on their final exams. That is generally the insight I think this chart communicates.

[01:42 - 01:48] You could call it whatever you wanted. The most immediate problem with this title is that the styles aren't very nice, right?

[01:49 - 01:56] It kind of looks the same as the axis label directly below it. The chart title should stick out, especially if it is communicating this insight.

[01:57 - 02:03] Let's write some simple styles. Again, we're able to write this H1 directly because this is the only H1 on our page.

[02:04 - 02:08] And so we're only targeting this single title. I'm going to do three things.

[02:09 - 02:14] First, I'm going to increase the font size. I'm going to do 1.35 rem.

[02:15 - 02:19] Save that, see how it looks. Maybe I think it needs to be increased to 1.4 or 1.45.

[02:20 - 02:22] Change that however you see fit. Then I'm going to make it bold.

[02:23 - 02:29] And I could write font weight bold, which is basically a shorthand for these numbers. 600 or 500 or 700.

[02:30 - 02:34] I'm going to save it, see how that looks. See if it looks better at 600 or 500.

[02:35 - 02:39] I think I'm going to keep 600. Then I'm going to change the margin.

[02:40 - 02:46] And the reason I'm going to add a margin here is that this is really close to the chart below it, right? There is no vertical space whatsoever.

[02:47 - 02:52] And I think there should be a little bit. So I'm going to add a margin bottom of 0.5 rem.

[02:53 - 02:57] I'm going to save that, see how far it gets pushed down. Look at the distance between these.

[02:58 - 03:01] You might think it needs a little bit more, maybe 0.75. I'm going to keep 0.5.

[03:02 - 03:10] And already we have a chart title, which looks nice, communicates an insight, and sticks out from the chart below it. So I think we're good on a chart title.

[03:11 - 03:19] Let's finish our entire chart, our entire first scatter plot by adding some nice, and nice transitions to the circles whenever the chart loads. Now what do I mean by that?

[03:20 - 03:24] Whenever I refresh the page, every circle appears instantly. You might prefer this.

[03:25 - 03:33] In fact, it might be good from a visual communication perspective to just have the circles already there. But you might be extra like me and really like animations.

[03:34 - 03:45] And if that's you, it's really simple and spelt to add animations to each of these circles as they fade in. And what we're going to need to use is this spelt transition module that we already used for our tooltip.

[03:46 - 03:57] Remember, as we hover and leave, the tooltip appears and disappears with this nice animation, right? We're going to just mimic that import, that fly from spelt transition in our app.spelt.

[03:58 - 04:08] So within your script tag, go ahead and create a new line and write import fly from spelt transition. Now nothing's going to change yet because we're not using it.

[04:09 - 04:20] But within our circles, let's go ahead and write in colon fly. Again, this is saying whenever it first loads and fades in or transitions in, apply the fly transition.

[04:21 - 04:25] And you can give it whatever parameters you want. I wanted to come in from the left side of the screen.

[04:26 - 04:31] So I'm going to give it a negative 10 as an X. I also wanted to fade in, so I'm going to give it an opacity of zero.

[04:32 - 04:48] And now what's spelt is understanding is start at X of negative 10 and start at opacity of zero and fade into the default values, which are X of zero and opacity of one. Now if I save this and refresh my page, you'll see these circles do in fact fade in nicely.

[04:49 - 04:54] There are other parameters you can play around with here. For example, I'm going to add a duration of 500 milliseconds.

[04:55 - 04:59] And now we can see them fade in a little bit slower. You can make this whatever value you want.

[05:00 - 05:06] I wouldn't recommend doing 5,000, but you are empowered to do so if you would like. But I think 500 is a good amount here.

[05:07 - 05:16] So now we have these circles fade in nicely whenever the page first loads. So we have finished our first chart in this course.

[05:17 - 05:28] And let's review what we've done briefly by going over our script tag, our markup, and our styles, which you might remember are the three parts of any chart. Let's start off with our script tag.

[05:29 - 05:38] On a high level, we found data that we've already created in a file called data .js. We imported it and we consoled to make sure it existed.

[05:39 - 05:52] And then we rendered it within our markup, right? Specifically, we used in each block that iterated through the data that we imported after we applied some sorting and then rendered each element as D.

[05:53 - 06:02] We then accessed those D elements within circles that we applied a whole bunch of transitions to and attributes to. And these attributes were dynamic based on hover interactions, etc.

[06:03 - 06:24] But the key thing here is the data that we imported above was rendered within our each block and rendered a series of circles that each had their own attributes and their own event handlers. Now, these event handlers are how we reset hovered data to be equal to new data points, specifically one representing each student.

[06:25 - 06:39] Then we said, okay, we need to add a tooltip if hovered data exists. So based on the interactions within our each block, we rendered a tooltip, which you might remember was its own separate component.

[06:40 - 06:57] Tooltip.s felt had its own bit of logic. So we imported components like data, x scale, y scale, and width and had a bunch of other logic so that we could print and render this tooltip with its own nice fade in and out animations and its own information and its own styles.

[06:58 - 07:15] So this component logic was used in the tooltip because this code was character istically distinct. Now, while we're speaking of tooltips, we also used access x and access y dots felt as their own components that we needed to essentially place in their own files because they were characteristically distinct, right?

[07:16 - 07:25] They have SVG elements that would get in the way of the main logic of app dots felt. And so we just put them in their own component and we imported the necessary properties.

[07:26 - 07:35] And so in conclusion, we created a series of circles based on data. We then provided context to those circles with peripheral elements.

[07:36 - 07:49] In the third lesson, we made this chart responsive very, very easily by using spelt's built-in dimension bindings. And then last lesson, we made it interactive using these on mouse over events and this conditional rendering.

[07:50 - 08:03] So in conclusion, we built our first chart, which is chock full of the patterns that will need in future lessons and in future modules to create much, much more complicated charts. So thank you for sticking with me throughout the first module.

[08:04 - 08:10] Please reach out with any questions about this chart, about anything we've encountered. Do not hesitate to reach out.

[08:11 - 08:16] And I'm really excited to get into the more complex and more exciting charts in future modules with you. So I'll see you there.