 There have been many things that we've learned during COVID about ourselves and about the world around us, but one of the things that I think has become pretty clear is that popular news media, especially print or web-based, has become really progressive in how they're displaying data and other information. So many sites have interactivity built into them, whether it's 538.com and The New York Times, or our local newspaper, the Ann Arbor News.com, all of their stories about COVID and so many other things have interactivity built into them. Here I am, a scientist who's supposed to be at the cutting edge of data and analysis and whatnot. I'm stuck with a PDF or a static web page. Why can't we have interactivity in our science when we're telling stories about things that are far more exciting than the day-to-day variation in COVID or rates by county? Why can't I have that type of interactivity in my displays of data? Well, we can. And thankfully today, I have someone from my lab, Sarah Lucas, to show us how we can build interactivity into our visuals. So today I have with me Dr. Sarah Lucas, who's a postdoc in my lab at the University of Michigan a few weeks ago at our lab meeting. Sarah gave us a presentation on using a package called Plotly for building interactivity into data visuals. And I thought this would be really cool for presenting in here on YouTube with Code Club. Thank you, Sarah, for your willingness to come on to this. I've never had a gust before. So this is a bit of an experiment, but I'm sure we'll, I'm sure we'll figure things out. So thanks. Thanks for having me. Plotly, as I understand it, allows us to build a HTML based visual that we can interact with. And perhaps you've seen these types of visuals. I know I've seen these like on the, you know, various interactives for COVID data over the past year that I can kind of hover my mouse over a specific day. And then that will kind of make that bar or that point on a line kind of a little bit more bold and more prominent. So I can see it, right? So you can begin to think, perhaps we could do that with the ordination we've been looking at. So I have the code that I shared with Sarah saying, Hey, Sarah, we've got this ordination that we've built as a TIF, but we'd like to incorporate the interactivity. And so if you would also like to get a copy of this code, please be sure to check down below in the description. I've got a link for a blog post for today's episode and all the episodes where you can find the code we're starting with. Also, this is ultimately hopefully going to produce a HTML based visual, and I'll do my best to make sure that that visual in all its interactive glory winds up in the blog post as well, just so we are all on the same page with what the current code generates. Let me go ahead and run this. And it's a little bit different than some of the other ones we've been working with. We have our legend. We don't have a title on this, but no worries. It's a pretty generic ordination plot. And one of the things that I saw that Sarah was able to accomplish with plotly was that if you could imagine my cursor here lighting up or sitting over this blue point, and then it opens up a dialogue window or it's called a tool tip, I think, which then tells you more information about that point. And one of the things that I know is really exciting to people about visualization is where they can look at kind of more personalized data. You know, we don't this is patient health information protected data. So I wouldn't want this to pop up and be like, Oh, that's, you know, Samantha Jones. We don't want that type of information. But is this a point from a man or a woman? What's the disease status of this person? You know, what strain of C difficile did we see in them? All sorts of different information that we could layer on top of other information than, like, say disease status. So I think that's all that that's one of the things that I see as potential value with plotly. So enough of me talking about what I want to see or what hope for, let's see if Sarah can't help me figure out how to do this. So Sarah, what should we do first to get going and generating a plot leaf diagram here? Well, Pat, one of the best things I think plotly can offer to someone just beginning to use this package is their function, plotly function called ggplotly. And that enables us to take any of our ggplot objects or most of our ggplot objects and immediately add interactivity just by taking the plot object from ggplot and using it as an argument in the ggplotly function. So let's go to the bottom of the plot or bottom of the ggplot code. Well, sorry, first we want to assign our ggplot object to a variable and we're going to call that variable P. Cool. Awesome. And next we want to use P in the ggplotly function. So down below the ggplot code, we're going to call our new plot P1 and use the assignment arrow. Yep. And then, oh, I forgot, did we load in the plotly package? I don't think so, but that wouldn't be the first time I forgot to load a package here. It's something I forget to do all the time, too. So is it it's plotly? Yep. It's library plotly. And so people might need to install plotly if they don't already have it installed. But again, if you can install tidyverse, you can get plotly. OK. OK. So down below type ggplotly. Right. And it's one word or is there an underscore anywhere? Is that it is one word? OK. And then we will use our ggplot as the first argument in ggplotly, followed by a comma. And let's see. Right away, I think we we can just leave it at that and see what happens. And then do I call P1? Yep. And just type P1. I'm excited to see this. So it looks a little different. Yeah. One of the best things I think is that we can take work that we've already done. So so a lot of the work we do in the Schloss lab, we use ggplot for. And if we want to add interactivity to that, we can do it very quickly with ggplotly. So let's look at a couple of the components of this plot. Cool. So I noticed like if I hover over the points, it's showing me access one, access two, information about the disease status. That's very slick. And so I can imagine we can customize what's presented in the tool tip. That's what we call hover info, the info that pops up. And the ggplotly function is taking that information directly from the layers in our ggplot object. Cool. And one of the things I noticed when I come over to my legend is that I don't get a pop up, but I get like a pointer when I hover over the elements in my legend. What happens if I click? Well, that's because the legend is also interactive. And so one of, I think the best functions for really highly dimensional data that we work with in the microbiome research world is that you can click on each component of that legend and toggle on or off the data in the plot. So if you click on that, it will toggle on and off the non-diaryl control. So it allows you to look at different parts of your data together. Very slick. Yeah. And then I imagine these tools across the top. So it looks like I can download this plot as a PNG. I could zoom. Not sure, do you know how to zoom if I have that zoom? You can either click the plus or minus button, but you can also, if you ever want to reset your plot, you can just click the home button at the top of the plot. And another way that you can explore really highly dimensional data is just by grabbing the plot and drawing a box around the part of the plot that you want to look at. So all of this interactivity is customizable in the ggplotly function or plotly plots. So say you wanted to zoom in on some points of interest. That would be how you do it. That's really cool. Can you maybe show us how we could customize what's coming up in the hover? Absolutely. Because right now it's not that informative. But we can definitely add more information and there are a couple of ways to do this using ggplotly or creating a plotly plot. But one way I like to do it is to designate what I want in my hover info using a tool tip in the ggplotly function. And we are basically telling ggplotly where to grab the information from in our original plot to show in the hover info. And so first we need to designate in our ggplot object that information. And we can do that using the text variable in our mapping, in our list of mapping variables. And I like to do this in the ggplot layer that I'm most interested in having that information show up on. So that would be our points. So if we go to our geom point part of our ggplot and we begin with typing our aesthetics or mapping aesthetics, we can type text equals and then we're gonna use a function called paste. And that's just so we can really customize the text information that we see in our hover info. So I thought maybe we would look at sample ID, disease state and maybe add some patient information like subject age. So I guess we need it to be one long string then. So we could do like sample ID. I always forget, I don't know about you but I always forget my column names especially when it's not like my data. So age is lowercase. So if we do sample ID, age, what was the other one that you thought would be good? Oh, disease stat. Disease stat. And so we probably want, do we want maybe like line breaks in between them? I think that might be good for readability. And then maybe we could do like age colon like that. And then, yeah, that'd be cool. And so people that are interested in learning more about paste, another tool we've been learning at our lab meetings is a cool function called glue. And I think the next episode, I'll actually be doing a demo of glue. So remember what this looks like and kind of how difficult it is to keep track of your quotes and commas and delimiters and everything because glue is gonna make things nice but let's not add too many things all at once. So it's giving me a warning. I know people always get worried about warnings. Is that something we need to worry about? No, ggplot is just telling you that it's ignoring this aesthetics piece of information because it's not gonna make use of it but the ggplotly function is. And then down below in our ggplotly function we need to tell it to use the text aesthetic as our hover info. So if you follow the P with a comma, we can add something called a tool tip and we want to have that equal to text in quotations. Text and quotes, okay. Yep, let's see what it looks like. So it looks the same but let's see what the hover looks like. Ooh, slick. That's really cool. It's very customizable. Yeah, I like that. And so something that I notice, so we're not gonna do everything for people. I think there's a number of things that hopefully this gets people's imagination going. A couple of things we can maybe think about changing is like here, like diaryl control is all one word. Perhaps you could think about, people at home could think about making a mutate line to better format the disease status for something that might come up in a tool tip like this. Also perhaps there might be other information you wanna put in here. So perhaps someone, I think I would be interested in the sample ID because maybe I wanna know what are the samples up here versus down here that are kind of at the furthest extremes because I wanna know what's different between those samples. And so I would wanna know what is the subject ID so I can go back to that sample but maybe you, whoever's doing this analysis doesn't care but you might think about other information you might wanna put in here like the person's sex or have they been on antibiotics lately or things like that. So that's really cool, that's really cool. So one thing that I see that it just annoys me these little things always bug me is that if you look at right below the A in the age there's a space, right? And so this is kind of my obsessive compulsive problems but that is a problem with paste function because the delimiter in paste when it, you paste all this together it puts in spaces and so we don't see those spaces but I often will use like paste zero because paste zero then doesn't use a delimiter but again, sorry, this is really nothing about plotly it's more about Pat and his OCD issues but now if we look at this, yeah, that aligns up. Oh, much better, I would do the same thing. So this is really cool and I would love to be able to someday put this into a paper but until then I might just have to settle for a really cool blog post or maybe you could figure out how to post HTML as a supplemental file but how would we save this as an HTML? So, the people watching this video or anyone else could interact with it like we've been able to interact with it. Yeah, so one of the ways that we can save our new plot with its interactivity intact is by using a package called HTML widgets. So let's load that up above. Widgets? Widgets, yeah. All right. Okay, and HTML widgets has a function called save widget. And widget is capitalized, yep. And if we use our new plot, our interactive plot as the first argument, we can follow it up with what we wanna name our plot. All right, so we want the HTML file extension there. Correct, yep. And then finally, we have two other arguments to place there, self-contained equals false and libdir equals lib in quotation, yep. Give this a run. So I see I now have a Schubert interactive.html file. Let's fire that up. Nice. And of course, there's so many ways that we could probably style this by learning more about plotly to make points bigger or smaller or colors or manipulating the axes, right? Correct, yeah, there's so much you can do. What's one of your favorite things or what's something easy that you think we could add to this to make the plot look a little bit better? Maybe we should add a title. That'd be awesome. So what we would do is we would use the chaining command. So that's one of the great things about the ggplotly function is you can use the chaining command from the tidyverse package to add arguments to your plot. So if you add that to the end of our ggplotly function. So pipe. Oh, pipe. Okay. And follow that up with a new line. Yep, and add layout. Yep, followed by parentheses. And then inside layout, all we do is we designate title equals and the name that we want to name our plot. Cool. So we could say, I can never think of good titles. Check out my awesome interactive plot. You can go back to other episodes to figure out what I think we should probably actually name these things. This will work for a placeholder. So I guess I'll run that and then save widget. Awesome. So we've got a title. And now we have a title. Yeah, so it just depends on what you're comfortable with. Many people might want to change the title in ggplot and then just use the ggplotly function to add interactivity or you can add it down here. So lots of options. So this is awesome, Sarah. So this is taking a ggplot figure that we've already made and we've perhaps spent a lot of time generating. Is there more power perhaps in building a plot directly within ggplotly? I think definitely there is a lot of ability to customize what your plot looks like when you're building a plot using plotly from scratch. However, if you're very comfortable coding using ggplot then the ggplotly function really allows you to jump right in. But let's try and build a plot from scratch using the plotly library of functions. That'd be awesome. Yeah, let's give that a shot. So we can kind of compare and contrast what the syntax looks like. Yeah, so let's call it plotly plot. And the function that plotly uses to build your base plot is plotly. So plot underscore Ly and then let's open parentheses and designate our data. And we do that with just writing data or you can just say what it is, data equals. And then in the plotly function, the way you designate the different variables is a little bit different. So comma and then x equals. And then we want to have the tilde followed by the variable of interest for x. It's like x is one. And we can do the same thing for the y variable. Okay, so axis two, okay. And then say we want to match kind of the plot that we previously made. We can also designate color to a variable using the same, yep, also with the tilde. And then we can write in the plotly function, we can say what we want those colors to be. And we would do that instead of saying color, which is used to designate the variable, we would use colors, yep. And then I think we chose blue, red, and gray. And you'll notice I had to change up the order a little bit from our ggplot, but this will work. All right, and then finally, we can also designate what we want our hover text to say right in this initial function. And we do that also using the paste function, but we can use paste zero, I think, if you would like. But we'll start with the same variable, text, or the same option text. And then a tilde, just like we use for the other options. And then paste. And if we open up some parentheses, we can dictate exactly how we want it to look. And the way that we would assign a line break here is by using... Is it like HTML? So we've seen that in other episodes, people might remember because I'll use ggtext to when I was putting HTML and CSS for colors in the title before, to make line breaks within the HTML we use that break. So would that be like, so we do like sample ID, let me see if I can br and then, I guess br and age, and then age and disease stat. I guess we need another break, right? Another break, yeah. And then disease stat. Okay. That's it. Great, so give this a run. And so then I run plotly plot. And yeah, see what it looks like. Cool. So the plot looks similar, but a bit different. And I'm sure there's all sorts of things we can do to stylize the plotly visual here. Like we saw with kind of changing the title, we can probably change the axis labels, no doubt the placement of the axes. So instead of going through the middle, kind of being on the edges. We see with the tool tip pop up that we've got the X and Y coordinate as well as the disease status across the top, along with the information we wanted in there. This is not meant to be a tutorial to tell people exactly everything they need to know about running plotly, but to get you excited about visualizing your data in an interactive way. One thing that always bugs me, and I know it always bugs, learners are seeing these red messages like we have in the console. So Sarah, do you have ideas on, it seems like plotly is pretty smart and that it's figuring out that this is a scatter plot. Do you know what we can do to perhaps clean these up so we don't see these scary red messages? Yeah, it's nice that plotly gives us messages telling us what it's doing with our data. And right here, it's talking about two different things that we can customize or designate in our function. One is the plot type and it's chosen a scatter plot. And then one is the mode of the plot and it has set that to markers. Well, we can write that right in the plotly function just to be really clear about what we want our plot to look like. And that is using type and mode. So let's set our plot type to scatter and our plot mode to markers. Okay, so we'll give that a run, plotly plot. Cool, so we don't get any warning messages. It's not angry at us. And again, we get this nice visual. So it's really cool that we can build a plotly plot from scratch. I suspect, or in my experience, when there are packages that allow you to take an existing visual and perhaps kind of re-render it within their environment, you lose a little bit of power. And, but at the same time, you can kind of, people can see I think the syntax here is quite a bit different than what we've seen with ggplot. So I think that power is being able to generate a plot in ggplot using all those great plotting skills we develop and then bringing it straight into plotly. But I think it would be pretty cool also to learn more about plotly, to build visuals directly. One thing I wanna point out to people that I notice is this tilde notation might be a little bit new to people in a lot of what's called base R functions. You'll see that tilde used in place of the words explained by axis one. So we're plotting the data explained by axis one or why explained by axis two, color explained by disease stat. It's, I think it's called formula notation, but it's a slight different way that you might see in other R packages. So very cool. Thanks Sarah for sharing this with us. And it certainly got me interested in learning more about interactivity and other things we can do with plotly. I think I've seen enough of plotly out there in the wild on the web to know that it's a really powerful tool that has all the built in or standard tools for building plots, but probably other things that people would be interested in like dendrograms and working with maps and all sorts of really cool things. So thanks for sharing this with us. Are there resources that you would recommend that you've found most useful as you've been learning about plotly? Yeah, so the creators of plotly or this R graphics library have produced really, really helpful documentation with examples and we'll leave a link to that down below. But that would be my first stop to learn more about customizing my plotly plot. And I suspect that if everything is based on HTML and JavaScript and CSS and plotly then everything's probably able to be manipulated. So that's pretty slick. Cool. Well, I will be sure to put this visual or the one that we built before into the blog notes as well. So people can interact with it and play with the data themselves. So thanks a lot Sarah for your willingness to come on and share your expertise with plotly with people watching today. So thanks. Thanks for having me. Well, I really hope that you found that tutorial from Sarah helpful and thinking about how we can add interactivity to our visuals. I really think we need to get beyond the PDF beyond the printed page and get into 2021 where we have HTML, web pages, interactivity. I mean, if the local newspaper can do it that's barely hanging on, why can't we do it with our research labs and describing our research with data that's far more complex and interesting than what the local news is looking at? Anyway, enough of the branding. But again, I think this is also useful in our kind of ongoing discussion of how can we put more information into our visuals while at the same time not overdoing it and detracting from the overall story. Something that Sarah and I were talking about earlier was that just because you make a plot interactive that doesn't make the plot good. You can have interactive plots that still look horrible and that don't communicate a useful story. So above all, make sure your plot is telling something important. Then add the interactivity on top of that to kind of add extra flavor to it. You know, no amount of interactivity is gonna take a bad plot and make it good. Like I said earlier, it'd be great if you played around with those tooltips, play around with your own data, you know, for the tooltips for this ordination. Could you put in the patient's sex or whether or not they've been on antibiotics recently? See what other type of information you can add to the plot. See about doing this with your own data. Go ahead and explore the plotly package and see how you might go about making a line plot or other types of visuals that might work well with your data. Perhaps if we get enough people doing this, who knows, we could change science. Who knows, I doubt it, but we can try. Keep practicing with this material. Let me know if you like this format. I've never had a guest on before, so kudos for Sarah for taking the plunge with me and seeing how this would work out. I think it was fun. I think I learned something new and hopefully you did as well. Please share this with your friend, share this with your PI, and keep practicing with the materials and we'll see you next time for another episode of Code Club.