How to Update Axes Based On Scroll Position With Scrollytelling

[00:00 - 03:42] Hey everyone, welcome back to the course. In this lesson we're going to take our already functional pretty scatter plot and we're going to add transitions to axes so they only appear when they're relevant. Now what do I mean by that? Well at the very first position for example step zero there's really no reason to have the final grade and the hour studied rendered on the x and y axis right? Everything is centered at the midpoint anyway. We want to wait to render those axes until they're relevant. For example as we scroll into step one and these circles you know assume their final grade position we then want to render the axis. And there's a few visualization theory reasons behind this right? First and foremost is there's literally no data being encoded in the first step so we don't want to render axes but secondarily it kind of adds more powerful visual communication if as we scroll and as the circles assume their positions we then render the axes right and it does less to overwhelm the user with all of these elements you know this cognitive overload all at once rather we should show it on scroll one step at a time. So how are we going to do that? The first thing we're going to do is render new axes using if blocks so you've already seen these very simple. The second thing we'll do is transition those in nicely by using spelt built-in transitions directives. So we have you know some simple work ahead of us some familiar work and let's get started by rendering our axes based on steps. So you'll recall that we already have a variable that we call current step right and we're referencing current step throughout our application. It essentially is the current step starting at zero that our text represents right so right now it's zero then one then two. We want to use this current step to tell spelt to render axis x and axis y only if they're relevant to the current step. So let's start off with axis x and as I described at step zero nothing should be visible but as we scroll step one into view we then want axis x to render. So this is quite simple we simply add an if block and say if current step is greater than zero then render axis x and that if block and hit save. What do we notice by default nothing is visible on the x axis but as we scroll to step one it becomes visible and that's because one is greater than zero. The other way you could do this would be if current step is greater than or equal to step one this is functionally equivalent I prefer this syntax. Let's do the exact same thing for axis y. This one we want to appear at one step later so we'll write the same code but instead of greater than zero we'll stay greater than one. Let's end this if block and hit save and see what happens as we scroll. By default no axes are visible we scroll into step one axis x appears we scroll into step two axis y appears. Already we've rendered our axes dynamically we've illustrated kind of the beauty of spelt and it's built in if blocks just making it easy to render only when certain conditions are met and in the scrolling telling application you can really see the power of these if blocks but the problem right now is everything's abrupt right they transition in and out instantly and it doesn't look very pretty. So let's transition the axes using spelt's built in transition directives. You know we've already done this a lot so you probably get ahead of me if you wanted to do this on your own but basically we want to open up axis x so I'm going to hit command click to open up this component somehow there maybe I will find the file axis x up at the top of my screen or you could open up your command bar on the left find axis x and open it.

[03:43 - 08:21] Now that we have this open let's describe what we want. We want to transition the entire axis element into view so we currently have this g tag which remember is a grouping element that has all of our axes contained within it. So let's just add the transition directive here by writing transition colon fade. By default this isn't going to work because fade is imported so let's go ahead and bring it in. We'll import fade from spelt slash transition hit save. Let's go ahead and see what happens now as I fade in we notice that as the circles go to their actual positions the axis nicely fades in and has this very nice visual effect. If you wanted this is optional but if you wanted to kind of make the transition more granular on an element by element basis we can move this transition to the actual ticks themselves and delay them according to their index. So let's start a new line to kind of give this to space it needs and we'll say transition colon fade and then we want to add a delay that's equal to index times you could say 100 something to that effect. We'll hit save and see what happens as I scroll in and out. You notice that the elements appear and disappear one by one. Obviously the final grade element if you are very keen on this bottom right corner you might notice that is still instant so we could definitely say within the text for that title we could say transition fade to make that also smooth. Notice now how everything fades in nicely and maybe on this title element I want it to be the final thing so I'm just going to do you know you could get very scientific with this and say delay of x ticks dot length times 100 and what would that do it would make sure that this is the final thing to appear and reappear this delay basically applies to every other element and then final grade fades out because we're getting the length of x ticks which in this case is five and we're multiplying it by 100 so basically after all these are completed so to will the transition on the axis element so that's a bit of fun this makes it the final thing the transitions and if you wanted this more granular transition this is how you would do it great so the x-axis that was easy let's go ahead and do the exact same thing for the y-axis and I'm going to hopefully open this file correctly just to be safe I'm going to go into my components folder and find it I know my head's covering it but I'm going to find the axis y dot spelled file click on it and open it up now remember we could do either of these treatments we could either import transition and do it on the entire axis or we could target individual ticks so let's go ahead and start off by importing transition sorry fade from spelt transition and then let's apply it on the individual tick once again and say this has a transition property of fade with a delay of index times 100 so let's save that and we're going to see now as we scroll into step two everything appears all at once looks very nice everything here is great the hours study this title up here you might notice we don't have to do the same thing we had to do last time it does fade in nicely and that's because it's a part of our axis each block so in axis x dot spelt this title text element was stand alone but here the title quote unquote is actually just a dynamically rendered string after an existing text element which is wrapped in the g tag that we're calling tick which has the transition of fade so our axis y is already handled so pretty easy lesson and we haven't learned anything new we're basically applying the lessons we already knew about spelt and it's built in if blocks transitions to build this nice scrolly telling article that now fades in and out axes if and when they're relevant so with that we're now ready to move this scrolly telling visualization into a larger chart and that's what we're going to do or into a larger article and that's what we're going to do in the next lesson we'll basically take this self-contained bit of scrolly telling code moving into a larger code base with some pros as you would see in a real world article so I'm really excited to wrap this chart in the entire course up and I 'll I'll see you in the next lesson.