A Beginner's Guide to Shiny for Python || Winston Chang || Posit
Shiny makes it easy to build interactive web applications with the power of Python’s data and scientific stack. Learn more about Shiny for Python: https://shiny.rstudio.com/py/ Check out our interactive Shiny for Python examples: https://shinylive.io/py/examples/ Content: Winston Chang (@winston_chang) Producer: Jesse Mostipak (@kierisi) Editing and Motion Design: Tony Pelleriti (@TonyPelleriti)
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
All right, so I'm going to show you how to get started working on Shiny for Python apps. So this is our website, at least the website in its current state, it will be changing in the future. You don't have to install Python and install Shiny and, you know, set up a virtual end and all that sort of stuff that you normally do for developing Python code.
You can just go to our website and click on examples, there's an examples button here or it's in the bar up here. So I just click on that. And this takes you right into this online Shiny for Python app editor. So we've got this app code here, and it's running the application over here. And I can make changes to this and say, everyone. And I click this button, rerun it, and the app is running right here.
The really cool thing is that this is all running in the web browser. So this isn't running on a server. And you don't have to worry that if you change this code here, it's going to change something on our server. This is all running on your computer in your web browser. So you can feel free to experiment with things as much as you want.
The really cool thing is that this is all running in the web browser. So this isn't running on a server. This is all running on your computer in your web browser. So you can feel free to experiment with things as much as you want.
Exploring the examples
Now over here, there's a whole bunch of different examples that you can look at. So it just starts off in this really basic one that has a slider and a text output. All right, I can move the slider and some of the stuff here changes. But if you want to see how to do other things, you can explore the features of Shiny. You can look at the examples from the side. So another basic example is an app with a plot.
And it's asking me here, like, hey, do you want to discard all the changes to the files? Because I edited this app a little bit. But since I'm switching to another example, I'm just going to throw that away. And again, that won't hurt anything anywhere. It's just in case you wanted to keep the changes on your computer, that's why it's asking you.
So here is an app with a plot, and I move a slider, and this histogram changes the number of bins. And just so you know, you can make this a little wider. The layout changes when it's really narrow. So this is a sidebar layout. And normally, when the window is wide enough, it'll show the sidebar content on the side. But if you make it narrow, then it reflows it, so it'll be on top. And that's so it'll be usable on mobile devices.
We can look at other, there's other examples here. I'm just going to fly through some of these. So just so you get some idea of the things that you can do. So you can have an app that lets you upload files. And this shows the code for how to do an upload, downloads. I'll skip down to some of the inputs.
So there's a lot of input and output components for Shiny. So this is a text input, and if I type some text here. So there, this input text gets used by the server code here, and it constructs the string and returns that. And then that gets rendered over here.
So there's other, again, there's other types of inputs, like numeric inputs, similar to text input, sliders, checkboxes, if I check it, this value becomes true or false. Checkbox groups. So I can select multiple items and it'll give me a tuple with all the selected items. Text input. So like the dropdown box, radio buttons, text areas. So this is for multi-line text input. And there's date inputs and date ranges and password. That's where it will hide it in the browser, but that value gets sent to the server.
So that's some of the inputs. So for the outputs, oh, this is actually the same app as the input, because you type in something and then it sends it back to the, it sends the output back to the web browser. So there's actually two varieties of this. There's the text output, and this is sort of normal HTML text. The verbatim text output, where it returns it as code, or sorry, code formatted text. There's UI outputs, which let you display any sort of user interface components as HTML. This component here, this text input, is actually output generated dynamically in the server and then sent to the browser.
And plot outputs. So if you need to display tables, currently you can use a UI output and if you've got a pandas data frame, you can have it generate a table with a two HTML method on those data frames. But hopefully by the, you know, in near future, we'll have a proper render table output. You know, there's other fun little things here, like different, there's a couple different layout examples and some examples of how to use various reactive components. And then there's some more advanced applications that put various things together.
So here is a Wordle application that's written for Shiny. This is one that can use, if you load this on your phone, you can use your phone camera for input and it can do image processing, something that lets you explore different types of visual illusions and play with the parameters. This is using a Python package called Pyllusion and so on. So there's all these different types of examples over here.
Building a Palmer Penguins app
Now let's try to build an application. So let's say we want to explore a dataset and we can use the Palmer Penguins dataset. That's a really, it's a fun and interesting dataset to explore. So there is a Python package for this and we can just try this out from here, from this interface. So I'll just go to this app with plot, just so that I have an app that looks or that's structured somewhat like what I want, what I want to do with this Palmer Penguins dataset.
I'm just going to type some code in here just to see if, to try it out, to see if it works. So it's in a package on PyPI called Palmer Penguins. And the first thing that I want to do is see, can I install that package here? In this particular setting where we have Shiny running on Python in the browser, we can use a lot of Python packages, but not all of them. So if you want to find out if your particular Python package can work here, we have to use something called MicroPip that's specific to PyDive, which is Python in the browser.
So what I'd say is import MicroPip and micro pip dot install Palmer Penguins. Now I've typed it up here. This is the code editor and I can run it. I can take this, I can use this editor and run it line by line down here, or I can select the text and just run it all as blocks. If I select text, I can hit command to enter and it runs it down here. This is our Python, this is the Python console and it looks like it installed it.
So let's say import Palmer Penguins. Okay. Yeah. So it installed it. And then now I imported it and I can, I could do stuff with it. So that's the first thing I need to do to see if it will install. What I can do now is I can say, click on this button so I can, this will open the project files that are currently open in a new window.
Okay. So this is a, there's only one file. It's just this app.py and it's open in a new window here and I can edit this here, but still go back to this, this window, this tab and browse the examples. Let's take a look at this Palmer Penguins dataset first. So I'm just copying and pasting some code from the Palmer Penguins website on GitHub.
So if I just load all this stuff like this, so again, I'm running it in the console here so that I can explore with the, I can explore the data a little bit before I go back to the app and actually try to put this code in the app. So Penguins is, let's load Penguins and then take a look at that. Okay. So this is a data frame with a bunch of columns and 344 rows. You know what? Why don't we just try putting a plot in here?
So we have this histogram from this other thing that, you know, from the example, and let's just try replacing it with some, with a plot from Palmer Penguins data. Okay. So this is all, let me move this import stuff all the way to the top here and I will load it, this stuff. Okay. And here, I'm going to replace that plotting code. And let's see here. So let's try putting in a histogram, so return G.
So I've edited my app and I can just hit the play button there and rerun it. Okay. Error. The palette list has the wrong number of colors. Let's see if that is, cause I played with that a little bit before I pasted it in there. Let's try this again. Okay. So here we have a histogram of these different Penguins, of the three different species of Penguins and their body masses.
So we can see that there's a lot of Adelie Penguins and they tend to be smaller than the Gentoo Penguins. And there's also Chinstrap Penguins, which look like they're roughly the same distribution of body mass as the Adelie ones. So that's kind of interesting. The reason the colors are funny is because they're semi-transparent here and this is, they're overlaid on top of each other.
Adding interactivity with species filtering
But let's say we want to explore the histogram for each species individually. Let's try filtering out by species and creating an input that lets you choose which species you'd want to see the histogram for. So in order to do that, let's take this. We don't need the slider anymore. We don't need this text output. So instead of the slider, we want to add a UI.inputSelect. I'm going to call it species. This is our label here, choose species.
I'm going to refer back to the examples just to see how this works because, you know, I might have trouble remembering it off the top of my head how to use the select input. So yeah, we don't need that. So actually, you know what I should do is I'll just copy and paste this. So I'll take this input select. Instead of typing in there, I'll just paste that there and I can modify how I see fit. So again, we're going to call it species.
And so on the left here of each of these key value pairs, this is the key. This is what we'll use. It'll show up in the code down here. And this is the text that will be displayed in the browser. But I'm actually going to use a shortcut. So I know that you don't actually have to do it that way. If you want the label and the value to be the same, you can just say Videli, you can give it a list instead of a dict there, Gentoo, Chinstrap.
And now if I want to filter out, use this input to filter out the data, I can do something like this. I can say let's call this my filter data. I'll call it P equals penguins and equals input.species. And then I have to put parentheses there because I'm invoking this as a function. So this input.species, that corresponds to this species up here. That's how I fetch the value.
So then I'll take, I'm storing this in P, so I want to plot P. And if I hit, if I rerun this app, I'll get the error. The palette list has the wrong number of colors because there's three colors here, but there's only one species now that it's being filtered. So I think I'm just going to try commenting that out and see if this works. So that was, I used a key press for that, a keyboard shortcut, that was command slash, but you can just put a pound sign in the front. And here we go. So this is the histogram for the deli penguins. Let's see if this actually works. Gen two, nice. And chinstrap. Okay, cool.
So one thing that's not so great about this particular app is that the X axis keeps shifting and the Y axis as well. So it's hard to compare them across species here, but I won't bother trying to fix that right now. But you can see here that, you know, this is a really nice way of being able to explore your data interactively. And we did that by just starting with the examples over here and just copying and pasting code that we needed.
Handling dependencies and saving your work
I used the Palmer penguins data set, but I actually installed it manually using micro pip earlier. It's continuing to work because it's still running the same Python session where Palmer penguins was installed. But if I were to take this and open this in a new window, let's see what it does. This is a new Python session that doesn't have Palmer penguins installed. And it says there's an error starting app, no module named Palmer penguins. There's a way to fix that.
And that's by adding requirements.txt. So it's the same format as what you'd normally use in Python. So I'd call it requirements.txt. And I clicked on this plus to create a new file, and then I renamed it up here. It starts by default with some Python content in it, but let's delete that. And I'll just say Palmer penguins here. That should be all that I need. And now I'll try opening it again in a new window. And because it's in the requirements.txt, when this app loads, it'll go and it'll install that package from PyPI. So and here we are. It has the data set and we can explore it.
And after I've been working on it, you know, I might want to save the work that I've done. So I can do that by clicking on this button, save all project files to disk. Now, this is currently only supported in Chrome and in Microsoft Edge browsers. It doesn't work in Safari or Firefox right now. But I'll show you what you can do if you're using those browsers. So I can save this, save all project files to disk. It'll ask me if I'm sure I want to do this. And then I select a directory on disk. I'll just create a new directory for this. I'll call this penguins, create that. And I'm selecting the whole directory, so not individual files. So I'm in the directory that I want, which is called penguins, hit select, and it saved the files there.
So in the future, if I come back to this editor or the examples page, let me just open up another editor here. And this, it starts with the default basic app. But if I want to use, if I want to load my previous work, I can just click on this one, this button here to load a project. And it'll ask me if I'm sure I want to do this, close all the current files. And I've selected the penguins directory. And there it loaded the files. It would have been in a different order up here, but they're all still here and it's running the app.
Now, if you are using Firefox or Safari, another thing you can do is just click on this download button and this will download the file to your download directory. And if you have, if there's multiple files, it'll put them into a zip file and then it just, it just saved it there.
Sharing your app
So after you've been working on this app and, you know, you've got something cool you want to share with somebody, you can click on this share button here. This is, this creates a share link. And with this URL here, I click on copy and then I can send this to somebody. Now it's 937 bytes long, so it's a reasonable size. It's not too big. And if I, if I paste it up here, somebody else can visit this URL and they get this same interface where they can edit the code and, and see the app running over here.
Or you can just copy this application URL, which is just the app by itself, running by itself without the editor and the terminal down there, and I'll paste it here. And here it is. Here's my app just running by itself. Again, that whole thing is just encoded directly in the URL.
Again, that whole thing is just encoded directly in the URL.
So for this particular case, you know, we're using some packages like Seaborn and Pandas. And these ones are included with our distribution, which includes Shiny and it's built on top of PyDyed, but with Palm, because we had to add Palmer penguins to the requirements.txt, it actually goes and it fetches that from the PyPI repository. Every time somebody visits this website, this, this URL, it has to go out and fetch that package. So just, just bear that in mind.
So let's say I've shared this application with somebody and you know, they want to experiment with it, right? In this tab, I've loaded this app from that URL and let's say, let's just say I'm another person who's now playing with this code. So, you know, and I'm looking at this and I'm like, this stuff isn't necessary here. Let's, let's clean that up. Let's change the text a little bit. Like say, which penguins are your favorite? All right, let's delete that. Oh, and let's clean up this palette thing because we don't need that anymore. We can actually, there's also a button here to reformat the code. So let's just do that to make it look a little cleaner and nicer and hit play.
Okay. So which penguins are your favorite? Somebody else can play with it, make some changes and they can click on the share link and it again, encodes this app code into the URL and then they can share pass it on to somebody else. So let's do that. Let's load that here. So all that extra code at the top is gone and that commented out part is gone. And it says, which penguins are your favorite?
So you can explore shiny this way again, you know, you can edit it, you can go back to the example browser to see if you want to try something different. Like, you know, instead of select input, I want to do radio buttons, you know, functionally it's they're very similar, but the interface is, is different. The user interface is different, but let's, you know, let's just put that here and put radio buttons. I think this would just work. Yeah. So you can just choose Adelie, Gentoo, Chinstrap does the same sort of thing. And you can look at other examples to see, you know, to try different things.
Like if you want people to be able to upload data, they can, you can look at this example. If you want to fetch data from a remote API, there's another example here that shows how to do that. So you know, you can, yeah, you can fetch data and put it in your app and you can go back and forth between these examples here and the code that you're editing, which is over here now.
All right. And after you're all done with that, you can, you can save your work and work in a, in a normal Python development environment where you have Python installed in your computer and shiny. And then you run it, you run shiny from the command line and that will, that will actually, that allows a greater range of things that you can do than when you run it in the browser. Running it in the browser is a really nice way to just get started and try it out without having to go through the trouble of installing a whole bunch of packages.
