 If you're like me, as I came up through the education system, all I've ever learned is how to make figures that are static by static. What I mean is showing my audience exactly what I want them to see and how I want them to see it. Well, I've got news for you. We now have the ability to make dynamic figures using powerful HTML, CSS and JavaScript tooling. You don't know those? Don't worry. There are amazing packages like Plotly that we can use to interface between R and HTML to make these dynamic visualizations that allow our audience to interact with the data and to manipulate it to see the stories that's relevant to them. In this episode of Code Club, I'm going to take the Plotly package and we're going to use it to make our slope plot interactive. The slope plot that I've been building out over the past few episodes looks at people's intention to receive the COVID vaccine from 2020, so a year ago from August and October from 15 different countries. One of the challenges that we've been trying to wrestle with is how do you represent data from 15 countries in a meaningful way? 15 colors is a bit of a challenge, as is 15 lines. My vision is to have an interactive slope plot where I can roll my mouse over the different lines, those 15 lines, and have the country that I'm interested in turn color, have a bubble pop up so I can see what that country is and also make that line bold so that I know what it is. And again, as I kind of scroll over those 15 different lines, I see the 15 different countries. Again, we're going to do this in Plotly. To be totally honest, I've only ever made one Plotly figure in my life, and that was in a previous episode where I showed you how we could do this with an ordination diagram. Well, in today's episode, we're going to do it with a slope plot. This isn't so much of a tutorial as me kind of sharing my experience of what I've learned in the project repository here in GitHub. I'm going to go back to my commit history. So I'm going to switch branches to the highlight branch. And then I'm going to come back to the clean up axes commit, and I'm going to create a branch there. So we're going to create a branch off of our highlight branch. Again, I talked about this before and how a lot of data science is more of like a tree or like a bush type structure than a linear progression. So we're at this commit. So I'm going to go ahead and create a new branch from this commit. And I will call this plotly slope. And so we now have this plotly slope. So over in my get tab, I will go ahead and do a poll close that. And then I will also then get my branch the plotly slope branch to make that my local branch. And here we are with the R code that I used previously to build that colored slope plot. I'll go ahead and run this so we can see what the output looked like from the static gg plot figure that we created in that episode. Again, here is our slope plot from a couple episodes ago, where we colored each of the countries with a different color. And each line then represents one of these 15 different countries. What I want to do now is take this figure and make it interactive to do this we're going to have to add some packages, and we're also going to have to manipulate our code a little bit. So the first package I will add is library. Plotly, as well as library. HTML widgets. We want to go ahead and make sure those are installed and loaded. If you've never used them before them odds are good that they're not installed. I'll go ahead and remove this commented code where we're kind of looking at different ways of manipulating the axes. I'll also remove this gg save function call. This was saving a static version of the figure will replace it with something specific to building out an HTML based figure. So to make the figure interactive, we will use gg plotly. Gg plotly is a function that takes an already generated gg plot image and makes it interactive. So I don't need to give it an argument to indicate our plot it'll use the most recently generated figure. It's a lot like gg save in that way. I can then pipe this to save widget. And I will give it our file name of August, October, 2020 slope. HTML. So here's the plotly version of our figure. You'll notice that it's not exactly the way we had it in gg plot. And so like I said, we're going to have to make some manipulations to clean it up. But a couple things I want you to notice that is that if I put my cursor over the August or October point for each of the lines, it will pop up the month, the percent, the country that each of the lines represent. Also over here, I have this nice legend. And so if I click on Mexico and double click on it, it will show me the Mexico line, right? And if I double click again, I get everything back. So there's some interactivity already baked in. Again, my vision is that I want all of the lines to be gray, like we saw before in that storytelling with data episode. And that as I kind of hover over one of these lines, then I want that line to turn a blue color. And then I want to have a tool tip that one of those balloons open up saying the name of the country. I also want my fonts to be the fonts that I called before. You'll see that it's giving me a Sarah font instead of my Montserrat, and it's giving me a Sarah font for the title instead of my factual one. So we've got a little bit of work to do. And again, I'm excited to share with you what I learned about how we can manipulate these plotly images to make them look the way we want. If you've watched any of my previous episodes, you know that I'm not a big fan of using the plots panel in the lower right corner. I prefer to use like Gigi say where I can specify the exact dimensions of the figure I want. Well, for something like plotly, the output in our studio goes into the viewer tab in the lower right corner. Again, I'm not a big fan of using that I would far prefer to specify the actual dimensions that I want so that I can get the relative proportions of my fonts and line thicknesses and things like that the way I want them. So in plotly, the dimensions you give aren't in inches, they're in pixels. So I'm going to go ahead and say width equals 700 height equals 800. And so now we see that the figure is more constrained. Of course, we could always zoom in with our browser to see it bigger. But this is the size of the figure. And I think overall this canvas size, so to speak, is what I'm going to be happy with. Again, we're going to get rid of this legend at some point. So the figure will get a little bit wider. One of the other things that I'm not a big fan of right now, at least with this version of the plotly figure is that there's this toolbar up here in the upper right corner of my figure. So I'm going to go ahead and get rid of that. So the function I can add to my Gigi plotly pipeline is config. And I can then say display mode bar equals false and then pipe that. And so now when I put my mouse up in the upper right corner, I no longer see that toolbar. Again, I think that's useful for some visualizations where you want to zoom in and out a little bit more than I do with this figure. And so I'm happy to leave that out. The next thing in my figure that I want to improve is the appearance of the fonts. If you recall from many episodes ago, we used show text to package with font add Google to load the patch one and Montserrat fonts. It turns out that for whatever reason, plotly isn't recognizing these fonts. And instead I need to have patch one and Montserrat installed locally on my computer. And so if you want your figure to have those fonts, you're going to need to install them too. So so I don't get confused. I'm going to go ahead and comment those out. We're going to go back to Google fonts and I will search for patch one. There we are. And I will go ahead and download this family. So this is now on my desktop. I also want to get Montserrat right there. And we'll go ahead and download that family. And on my desktop, I can go ahead and decompress these two zip files. I'm going to go ahead and open the Montserrat regular TTF file and clicked install font. And so now this gives me the regular. I think I can actually highlight all of these except for that OFL TXT and see if I can't install them that way. Yeah. And so now I've got all of the Montserrat fonts installed. I now want to repeat this with patch one and we'll go ahead and bring that over in and install that. And so now we've got patch one installed, right? So good. We now have our Montserrat and our patch one fonts installed. And if I come back down into my theming here, I had family Montserrat. If I go ahead and make that capital M Montserrat and patch one. So it's patch one space one. I now see that I've got my patch one font for my title, which is good. And I also have my Montserrat font for all of the other text on the figure. Something I noticed, however, is that I'm getting a bunch of warning messages here in our studio. So if I do warnings, open close parentheses. If I look at these 50 warnings, it's complaining that it can't find Montserrat. I'm not sure totally what it's complaining about because it was actually able to put the font into the figure and isn't using the default Sans Serif font. I don't know. I think we'll just roll with that. And I think that's that'll probably be fine. In spite of all those warning messages, we clearly are getting the Montserrat font here in our figure. I'm not totally sure what's happening there, but I'm not going to worry about it too much at this point. I definitely want to change the size of my font here in the various text elements, because as I mentioned, the ggplot theme used points, whereas ggplotly is using pixels. And so pixels are smaller than points. And so it's making my text seem a bit smaller than it really should be. But before I start mucking around with the size of things, I want to make sure that the figure itself is the right size. And to do that, I'm going to go ahead and remove my legend by making all of my lines gray. And again, we'll also probably make the background white so it's easier to see what's going on. So again, I can get rid of all of the coloring in my lines by removing color, and we'll go ahead and remove color country. And I will make my color to be a gray color. And we've seen this before, I'll do 88888. And then down here in my theming section, I'll go ahead and do panel dot background equals element wracked. And I'll go ahead and get rid of those access tick marks as well with element blank. As I mentioned before, plotly is using pixels rather than points. So the numbers for the text size in ggplot were points, not pixels. So we need to go ahead and make all those larger, so that the text pops a little bit more. The other thing you'll notice is that my title runs off the side of the screen, the title for plotly is center justified. And so it seems that plotly is ignoring everything we said about our title. And again, is center justifying it with the CEO from COVID-19 running off the left side, and the bully running off the right side of the figure. And it's not using our element text box simple to automatically wrap our title. So we're going to need to go in and play with this a little bit to make it look the way we want. So let's come back up to our element text function for the text argument from theme, and we'll do size equals 20. And then my color, I'm going to pick to match the color of those gray lines. So that'll be those eights to make it gray. I'll also go ahead and make my title of the figure of 35 to make that a bit larger as well. So that's making my y axis title that gray color as well as my title, but the access labels are not gray. So for some reason, the access text argument doesn't inherit from the text argument. Access dot text, and we'll do element text, color equals and then our eights. And now our access text is that same gray as our access label. I'm not sure what's going on there. For some reason, it does recognize the size from that text argument, but not the color, whatever, that's cool. So now to turn to our title, which again is running off the side of the screen. And it's even worse now that I made the font a bit bigger. So to modify the appearance of the layout of my figure, specifically the title, we're going to add a function to the pipeline called layout. And layout again, allows us to manipulate the layout of our figure. So layout takes a bunch of arguments. It's a lot like the theme function from GG plot. What I found to be really useful is the our figure reference from the I've got a link here on the screen that I'll share with you and also put something down below in the description so that you can go and check this out as well. So if you look at the various types in this left hand margin, you'll see a link for Right. And so the first one is title. If you look at the title section of the our figure reference within that layout section, you'll see everything that you can manipulate about the title, which is basically everything about the title. And that's pretty nice. We can change the font, the color, the family, the size. So we could have put our patrol one in here for the family if we hadn't put it previously. The padding, which is kind of the margins around our title, the text, the actual label, we've already labeled that or done that up ahead in the labs function from GG plot, and various things with the x and y position so we're going to manipulate a fair number of these to get the title to look the way we want. We are going to make use of something called a list. And so a list in our is a special type of variable that allows you to combine different types of data. And so I've never talked about them on this channel before I don't think, but again, they're not that hard. And you'll see how we can manipulate the appearance of the title using this list function and then kind of get a good sense of what the list function actually does. So the first thing about the title that I want to manipulate is that x position. I don't want it to be center justified I want to be left justified on the left margin of the overall figure. And so if you look at the various x arguments here we've got x x anchor and x ref. And so I think all three of these are going to be useful to us. So x is the number between or equal to zero and one, the default is point five so it's going to be like the middle of the figure. So we're going to want that to be zero for left x anchor puts it sets the title horizontal alignment with respect to its x position. So I want to be left justified on x equals zero, and then x ref sets the container x sets the container x refers to container spans the entire width of the plot paper refers to the width of the plotting area. So let's go ahead and manipulate x to be zero and x anchor to be left so again we can do x equals zero x anchor to be left so we see that our title is now left justified we see the coven 19 but we don't see everything to the right. That's okay. But what I'm noticing is that it seems to be left justified on where the y axis would be rather than on the left side of the figure. And so we need to change that x ref value. And again x ref says the default is container, which I think what it should be so maybe if I say x ref equals container it'll do the right thing so let's go ahead and try that x ref equals container. Very good. And how did it so I guess x ref equals container wasn't the default I think the default was the plot. So x ref equals container puts that C in coven right up against the left side of the screen. I would like to have a little bit of padding to the to the left and top of the C, and we can modify that as well with pad and pad then will take a list as an argument. So we can then say list so we have a list within a list within a list right. And so then it's trbl trouble right like we saw before with setting the margins in ggplot. And so my T I'm going to do 10 and my L I'm going to be doing 10 and again that is 10 pixels. So I see I do have a bit of a pad to the left of the C in coven, but I don't see any padding above that C and the top of my, my browser window. So I think there I need to manipulate the margin. So if we come down to the margin section in the layout section right, we see that we've got trbl for top right bottom left, and we can see the default values. 808080 and 100 for the top again in pixels. So I'm going to set that T in the margin to be just a bit bigger. So maybe 110. And again that's going to be another argument that I can give layout where I can say margin equals list and again it's in the list and although it only has one element in it I'll say T equals 110. And now I see I have a bit of a space between the top of the lettering and the top of my browser window and I think that all looks pretty good. The next thing I need to do is I need to add some line break so between is and decreasing. And again I can do that way back up here and I can put in here a br tag to indicate a line break in the HTML. So we now see that we have that line break. But I'm noticing that the bottom of decreasing is basically right on that 100. What I'd like to do is fiddle with the margins a bit as well as that padding to move the title up a little bit and move the rest of the figure down. So one of the things I was noticing as I was looking back through the pad documentation in that layout section is that each padding value only applies when the corresponding x anchor y anchor value is set. So we set the x position and the x anchor but we haven't done anything for y. So I'm going to go ahead and do y equals one so it's at the top. And then we'll also do y anchor equals top. And now let's run this and see what we get to see if we can't start to fiddle with those paddings and positions. And so now we see we have the title going up over the top of the figure which is fine. And we do have a spacing here between the title and the number. So again we want to adjust the top margin as well as the padding. And so I'm going to go ahead and try top margin of 150 and the top padding of 50. Amazingly, that actually worked. We now have the title in a pretty good placement relative to the position of our y axis labels. Now our figure looks more or less the way I want it where we again have our grade out figure. And as we talked about in the last episode, now we want to add back information we want to add back color. So as I put my crosshairs here over France, I want this line to light up and to say this is France right right now. If I come to the August or the October points at the end of the lines, I get this tool tip that comes up and says month August percent 59 country France. All I wanted to say is France. I wanted it to also be lit up. And I want to be able to put my crosshairs anywhere here on the line. So this is going to take a few steps. Let's start with that tool tip and getting it to look the way we want. So to get that tool tip to say the country we want up here in G.G. Plotley, we can put tool tip equals text. And what that means is that the value that is in that tool tip is going to come from the text column up ahead in our G.G. Plot figure. And so way back up here in my AES statement, the mapping, I'm going to go ahead and do text equals country. Now I see that when I put my crosshairs at the end of these lines, I get the country. It's again the font small and it's in a grey window. But I see the country that each line corresponds to and the same is true over at the right side of the figure. Again, we're going to use the layout function to manipulate the appearance of this tool tip, so that in this case India is larger. And I'm going to make it a blue background with a white font. So that corresponds well to our line when that lights up as well. So the argument in layout that we want is hover label, which again, you can see that we can manipulate the BG color, the background color, the border color, the font, the color, the family, the size, things like that. So we're going to change the BG color, as well as the size and the color of our font. Again, we're going to want the hover label argument, and that's going to take a list. And I'll go ahead and open that up so that we can then put in the BG color. And I'm going to make that blue. And I'll put in the hexadecimal red, green, blue, and we'll also do font, which will also take a list. And we'll then do color equals white. So our hexadecimal for that, as well as our size. And let's start with 20 for that. So now you can see that my tool tip is blue with the text in white. One thing I'm noticing though, is that it's not using my Montserrat font. The Japan with Montserrat has a little hat on it. So again, we can come back in here and do family equals and then in quotes Montserrat. And so now when I look at Japan, I see that Japan has that hat and I know that I've got the Montserrat font. It's those little details that just make me so happy. Now what I want to turn our attention to is making this line light up when I'm highlighting on one of the points in the line, we're going to come way back up into our figure. What we need to do is we need to tell Plotly that the two points correspond to the same data. The way we can do that is by adding a function called highlight key from Plotly into our pipeline where we are building out the static version of the image between the data and GG plots. So it has to come before we make the static version of the image. And what we're going to do is we're going to take the data that's coming through so we can indicate that with a period comma, and then tilde, and then the column name that we want to link our data on so we're going to do it by country right. Once we've loaded the GG plot pipeline, we can then come back down to GG plotly pipeline, and we can add a function called highlight. And we can let's say on equals Plotly hover. And so our figure looks a lot like it did before right. But if I hover over say France, I noticed that all the other lines go pale. And France becomes dark. And so if I then kind of go over all these, I see that I can affect the change so that the line corresponding to like USA in this case, now is dark, and everything else is pale. Again, I don't want everything to go pale. I want everything to stay that's gray color, but I want like this USA line to become dark. So if I come back up to that highlight function, I'm going to add an argument called opacity dim equals one. And so opacity dim is the amount to dim the opacity of the line. I think it does it to about half point five by default. And so if I set one, then it's not going to dim the other lines, I'll also add in color equals blue. And so now all my lines stay gray. But the line itself that I'm hovering over turns blue, right? So that's pretty slick. I would though like the line to get thicker when I highlight it because that's, it's just a bit too pale of a blue and too thin of a line for to stick out. Of course, I could make all the lines thicker. But I really want to get that emphasis that when I have India highlighted here that India gets thicker. So to get that I'm going to go ahead and do selected equals s. So I now need to define the s. And so s is going to be the output of the ATTRs selected function. And the ATTRs selected function allows us to change the attributes of whatever it is we're selecting. So we'll say line equals and again, that's going to be another list will do color equals blue. And I'll write this in hexadecimal. And then we want width, and I'll say five. So width is going to be the width of the line. And we'll go ahead and load s there. And so now, what happens down here in the plotly pipeline, that when we hover over the data for any of the countries, it's going to run s to populate the value of selected which will turn the line to be wider and blue. At the same time, then it will keep all the other lines are gray color. I'm going to go ahead and remove this color line from highlight because I've already got that expressed in s. So now, when I take my cursor and I cover over any of these lines, the lines get thicker. Isn't that pretty slick. And so that really pops out, we can maybe make it a little bit wider, but I'm pretty happy with the way that looks. Now the final challenge here is that if I put my crosshairs on the middle of the line between August and October, it doesn't recognize China, right China isn't popping up here. And so I'm going to do a little trick, which is I'm going to fill in values between August and October that are on that line. This is going to bring us right back up to our data data frame way back here at the very beginning. And if we look at data, what you'll notice is that we have our countries, our months and the percent, right. And so I could think of month instead of being August and October as my exposition of say zero and one. And then my percent being the Y position right. So if I made values of say point one point two point three all the way to one, then I can interpolate right between 87 and 87 or 97 and 85. So up here by the pipeline that creates data, I'm going to go ahead and do a little bit of experimenting. And so I'll take data and then pipe that into a group by country, and then we'll do a summarize. And so for each country, I want X values that go from zero to one by zero point one. And so now I see that Australia has X zero type one. It's leaving out that because there's 155 more rows, right. And then what I can do, I can add to my summarize function, a new column called percent. So to calculate the new percent column, I'm going to do a linear interpolation between the existing percent values, right. And so you can think of this as new percent, equaling percent bracket one. So that's going to be the first row of the percent column for each country. That's like my Y intercept. Plus the slope times the X position. So we're going to take X and multiply that by the slope. So what's the slope? Well, the slope is the difference between percent two and percent one, right. And that's the same thing as saying diff on percent. And so now what you see is that we have Australia going zero to one, and that we then have our new percent going from 88 down to, I'm going to guess 78 or 79, whatever it was. So I'm going to go ahead and add the dot groups equals drop so that our output is no longer grouped. And I'm going to take this pipeline that I made for testing and can caten it to the end of my overall pipeline. And so when I run my overall GG plot pipeline, it's complaining that object month is not found, of course. And so let's come back up and we're putting X mapping month to X before, but we no longer have that month column. So I'll go ahead and put that as X. And down here we have scale X discrete. I'm going to make this scale X continuous. And my breaks are going to be zero and one. And my labels are going to be August and October. And this should work. But of course it doesn't, because it says object percent not found, I'm going to make this new percent percent. So the moment of truth now is that if I come up into the middle of the line, do I get France lit up? And sure enough, I do. And I see that if I kind of scroll to the right or to the left, I get France to light up. I get the USA to light up. I get these other countries to light up as well. No matter where I click or hover, I'm not clicking, I'm hovering on those different lines. I don't have to be at the end or the beginning that I've got these points interpolated in between. I have 11 points right between zero and one. I think you could probably make it a more fine scale mesh if you want, but this seems to work really well. Overall, I'm really pleased with the way this looks. One thing that I know I'm missing is the annotation at the bottom of this figure. I'll go ahead and add that to the code later. This video is already quite long, but it's basically the same idea as what we saw when we're formatting the title. I don't want you to have to struggle in watching me kind of poke and prod code in different places. I think you get the general idea. So I think this added level of interactivity is really a great asset to engaging your audience and getting them to manipulate the data and manipulate the visual so that they can then look at the story they want to be told. I know we kind of get tunnel vision and think, well, if it's not a figure, I can put in a paper that I don't care. But the reality is very few of the figures you'll ever generate over your career will go into a figure. You'll present far more figures in presentations or perhaps on websites or on posters. And so I think you really kind of owe it to yourself to think about other ways of representing data. And I'm really intrigued about the possibilities of making interactive visuals. And so if you'd like to learn more about making interactive visuals, would you please let me know down below in the comments and I'll think about adding some more videos. I'm really happy with the way this turned out. I hope you agree. Let me know any suggestions you have and we'll see if we can't incorporate those into another episode down the road.