Add a Legend and Reference Line to a Svelte Globe Visualization

[00:00 - 16:03] Hey everyone, let's finish up this this glow and all we really have to do now is add a legend before adding like a title and a subtitle just so that it's apparent to the user you know what data is actually being represented by the individual countries and their proportional fill. So what do we want to do in this lesson? We want to construct a legend that leverages our existing color scale and as a bonus we'll show where in that color scale the selected country lies if and when the user clicks on a certain country. So with that in mind we know we need basically three things right we need a new component to render our legend and for this we're going to use you know a div or an HTML element not an SVG element and then second we'll need to pass our color scale into that so we can actually show the range and third we'll need the tool tip data if and when it exists to show that little reference line. So let's go ahead and get started by creating a new component which we'll call legend.s In your components folder you create a new file called legend.s felt in order to accept it in app.s felt or pass it into your main markup we'll need to import legend from and then the relative path components slash legend.s felt so now that we have our legend we can go ahead and render it where do we want to render that we can do it under or above our SVG element I'm gonna do it under. So here I'll put legend and for now it will accept no properties nothing new will appear because it's a blank element but as I said we need to pass two props into our legend first the color scale so we can kind of visualize the entire range of potential values and second the tooltip data so that if and when the user hovers over a certain country or clicks on one rather that will show a reference line for where that falls within the range. First let's pass our color scale and remember because color scale has the same name as its property value we can go ahead and just pass color scale in the curly braces and that will be sufficient then we'll pass data and set data equal to tooltip data so we'll save this now recall that color scale and data are the two props we want to accept. You can open and close a script tag and within that script tag accept those props export let color scale export let data now we have both color scale and data in our legend but it's complaining right now because we're not using them. Let's describe what we want in our legend obviously a legend showing a color scale you know of numeric ranges of any possible values should probably be a gradient bar visualizing the entire range from the lowest point the most muted color to the highest point the the brightest color so the first thing that we'll want is a bar that shows the color scale from its min to its max. Second we'll want a line and a label that show the value of the selected data if I select India for example and third we'll want labels on the left and right that show the min and max values so the first thing that we'll create is that bar is the bar that shows the gradient between the min and the max and again you might be noticing this lesson is almost exclusively HTML so a lot of what you're learning in this lesson and in the course more broadly is learning spelt learning data viz with d3 and spelt is just as much learning to tools of the web natively as it is learning any specific language right you are learning an entire toolkit which includes HTML CSS JavaScript etc and this lesson is a good example of that as all we're doing is HTML and CSS with a little bit of JavaScript's wrinkled with it anyway back to our bar we're gonna create a bar which is going to be a div we're gonna give it a class of bar and then we're just going to open close for now and we're going to give it a style down in the style tag of our application and we'll say bar should be targeted with the following properties height of 15 pixels and width of 100% now I'm going to open up my inspector and kind of show you what this is looking like right now while moving myself over and so if I now open the inspector and look within my SVG not there under we see the tooltip and then under that we see the legend and right now you'll notice the legend is this you know 15 pixels tall bar with no background so I could go in here and maybe we drop that so it looks better and I could add a background of white just to show you that this bar does in fact exist but the question is what do we want our bar to actually represent and the answer is the gradient between our color scales min and max range okay so as a refresher our color scale looks like this if I save and go into the console you'll see it's a scale with clamp copy domain interpolate in vert length nice prototype range range a whole bunch of methods and these are usually functions that you can then use on color scale so you might remember the domain and range of our color scale because we declared them on our own on lines 39 and 40 where the domain is zero to the max population and the range is from here to here so we could grab these values the min and max range and place these in our bars color scale in the actual gradient that's rendered but we can be a little bit more creative and use the methods that already exist to make this more repeatable chunk of code because within color scale one of the methods that exists is range so if I console dot log color scale range and look you'll see those exact two colors render which means that we want to use these two colors to render the bar gradient so you could do this one of two ways you could either create new variables and say min color and that is going to be equal to color scale range of zero and max which is basically the exact same thing or you could just hardcode these values into your div directly but I'm gonna do this and so that's you know more representative of what values I'm using and why I'm using them within my markup I want to handle the logic for that in the script tag right so I'm gonna apply an inline style of background which is going to be the following it's going to be a linear gradient that goes from left to right so I'll write to right and then we'll do a color scale or because we already made these variables min color at the zero position and max color at the 100 position I'll then close the linear gradient and hit save and you'll see this bar does in fact appear and it's looking quite nice the bottom of our chart you might for the sake of line breaks put this all on one line this is up to you this is technically proper but as you can see now we have these background colors this linear gradient is present in our bar so we have a linear gradient things are looking great but let's add labels to either side of the bar so in order to do this we don't want the bar to be the only thing rendered in our in our legend we also want surrounding labels which means we need to wrap the bar in a larger container we'll call this container legend because that's actually what it is and then a bar is just within the legend and the other elements that live within a legend are text elements what make these spans so that they're in line and we'll call them both labeled so I 'll do span with the class of label which is equal to well let's get what it's equal to later but for now we see span class of label and I'll do value and then I'll just copy this directly to below the bar now my default this creates this ugly layout with the value on top and below the bar and the easiest way to fix this is to apply styles to the parent specifically a display of flex so we'll do a legend has a display of flex which by default is going to be row but you can write it to be explicit if you'd like and then any other values you want for your flex you can add one thing I know I want is a gap so there's space between of six pixels so I'm gonna hit save and now you'll see value to value they straddle either side of the legend which is much more much closer to what we want it now let's do some basic styling for each label so that we can actually read them and the most apparent is obviously a color of white so I'll add color white now we can see the values and then a few other things I wanted were font size of 0.85 rem I like that size and a user select of none so that I can't do this to the text just personal preference but now the text element exists but I can 't select it which is what I prefer let's go back to our values themselves so what do we want value one and zero to be well we already have our color scale so why don't we just use the color scales internals yet again so that this is a robust reusable component no matter what color scale we end up passing it so what I'll do is I'll create a new variable called min value which is actually going to access the domain rather than the range and then the max value which is the same thing and so here we haven't replaced it yet but if we replace min value online 13 and max value online 18 let's see what happens max values save 0 to 1.4 12 that long long number what do we need to replace this 1.14111 what do we need to use for that we need that same suffix format that we've used elsewhere so technically you know a reusable bit of code like that could live in its own file and then you could import it directly but I'm gonna be pretty hacky just because that's not the main focus of this lesson and I'm just going to use the suffix format copied and pasted directly over now let's use the suffix format technically you could pass it to min value but we know that zero is just going to stay zero so I'm just gonna add it to our max value hit save now we see 1.4 billion so our legend is looking really good it's actually pretty much feature complete the only thing that I'd like to add as kind of a little bit of bonus would be a reference line so if I select a certain country like China or India it will show me where within the range that country is okay so here for example us would be somewhere like that the way that we're going to do this is by using our data property which remember is equal to the tooltip data and basically find that data points population relative to the max value relative to the entire range of values that will give us a percent and then we can absolutely position a line on our div proportional to that percentage so what do I mean well first let's go ahead and create this new value I'm calling percent of max so this is the percent of max values percent of the 1.4 billion within the range that you see below this is going to be equal to data dot population just in case population doesn't exist I'm going to do question mark divided by max value times 100 so now let's go ahead and see what happens if I console log percent of max after clicking on a country going to my console we see the United States is 23.49% Canada is 2.7% Mexico is 9.22% so that would mean this would be about 23% right maybe around here within the overall range of our legend so from here because we have this value it's quite easy to place it within our code basically under the bar we want another reference line and we only want to render it if percent of max exists so we'll say if percent of max then reference the following will reference or will create a new line that has this important style property of left remember because it's going to be absolute and it's going to be equal to percent of max percentage so I'll enter that and I'll make the self- closing so overall our span looks like that I'll end the if block and right now you'll notice that you can't see the reference line even though it does exist right it's right here and that's because it has a width of 0 and a height of 15 but most importantly that width of 0 so let's apply a few styles to this line in particular we wanted to have a position of absolute that's very important a top of 0 so that the top of the bar a height of 15 pixels just like the other bar and a width of two pixels let's make it white and hit safe okay so what's happening here the line is there but it's the very top of our screen and the reason for that is because its parent container legend needs to have a position of relative so I'll add position relative and hit save now you notice that it does in fact hug the proper container so let's see what happens as I click more and more countries we see that it corresponds to the proper value on the range there was one issue which you may have noticed which was for very very very small countries right here for example Guiana it goes all the way to the left and it overlaps the label and what this tells me is that we actually want the line to be position absolutely according to the bar not the legend itself so a bit of a bug on my end what I'll instead do is open and close the bar div and place the span inside so I'll close this div and hit save and then I'll make sure that the bar itself is what has a position of relative so if I save this and now if I click around you'll notice even for these very small countries like Guiana it's only at the zero position it never exceeds that so the final thing that we want to do to this line is transition it smoothly between points and in and out of view so in and out of view is probably the easiest you may remember that we have these nifty transition colon fade and if you want to use that you're gonna have to import it so I'll do import fade from spell transition and hit save now notice how the line fades in and out but then between states also right jumping from Brazil to the US to Colombia you know it's very abrupt and so here we're just going to use native HTML or CSS transitions I mean just like we have prior so what do we want to transition well the only value that's changing is our left most is the left position so let's do left and let's do it over 800 milliseconds and give it the following ease you know you could just write ease or you can specify some of the values so you could play around with what these values are I just thought something like this looked pretty fun notice how it kind of lags and then flies into place once the transition finishes maybe after seeing this I actually want to reduce that to maybe 500 so it actually finishes as the movement finishes has this kind of fluid feel to it so something like that I'm like a metal so in this lesson we basically built a legend which provides context for the entire globe but then more importantly shows whenever you select a certain country where that country falls within the overall range so I hope this was fun I hope you learned a bit about HTML CSS a little bit of spelled and we're about to finish up our chart with just adding a title and subtitle in the next lesson and then we'll be done with module 3 so thank you so much for watching and I'll I'll see you in our final lesson.