Skip to playerSkip to main content
Alex The Analyst
  • 2 months ago
Shiny for Python becomes much easier to customize once you understand components and layouts, and this lesson shows how to turn a basic app into something interactive and polished. Using global YouTube statistics data, the app starts with a histogram, a searchable data grid, and simple inputs that control what the user sees.

The walkthrough explains how to connect an input slider to the output, add a text search for filtering YouTuber names, and make the visualization update dynamically. It also covers common layout tools like a top navbar, a sidebar, tabs, and cards so the app looks cleaner and feels more like a real dashboard. Along the way, the code is adjusted for deployment issues by fixing the file path with pathlib.

If you are learning Python web apps, data dashboards, or Shiny for Python UI design, this is a practical guide to building interactive components, responsive layouts, and searchable data apps.

Great for viewers searching Shiny for Python tutorial, Python dashboard layout, interactive data app, navbar and sidebar examples, data grid, histogram, and web app customization with real data.
Transcript
00:00What's going on, everybody?
00:01Welcome back to another video.
00:02Today, we're gonna be taking a look
00:03at components and layouts in Shiny.
00:11Components and layouts are basically used
00:13to control everything within your web app.
00:15If you wanna create a visualization
00:17and put that in your web app,
00:18you have to specify that some way.
00:20You can't just run your code and it magically appears.
00:23You have to say, here's where I want it,
00:24here's how I want it to look.
00:25And that visualization may be some type of time series data.
00:28And so you want the user who's using your web app
00:30to be able to specify their timeframes
00:32that they're looking at.
00:33And you can do that by specifying the component
00:35that you're using.
00:36And so everything within your web app is very customizable.
00:39And we're gonna look at a ton of different examples.
00:41I'm gonna show you how to actually use them
00:43and implement them.
00:44So without further ado,
00:45let's jump on my screen and take a look.
00:47So as I just said,
00:48we're gonna be focusing on components and then layout.
00:50Now components are kind of the meat and potatoes
00:53of building your app.
00:55They allow you to create inputs and outputs
00:57and visualizations and all sorts of different things.
01:00And then we'll be taking a look at layouts.
01:03And let's come right up here to the layouts.
01:05Layouts help make your app look better.
01:08So you're gonna add some functionality.
01:09You're gonna be able to add nav bars and sidebars
01:12and different tabs.
01:13And so there's a lot of different things
01:15that you can add within these layouts
01:17that really help it feel better, look better,
01:20and just give it a better feel overall.
01:22And so we're gonna start with components.
01:24We're gonna build out all the core functionality
01:26of our app that we're building today with real data.
01:29And then we're gonna be making it look a lot better
01:31and more functional with the layouts.
01:33And so we'll kind of do a little mini project
01:36in this lesson with some YouTuber data.
01:39And then in the next video in this series,
01:41we're doing a full project with real data,
01:44building what I would consider as a really great project
01:47to add to your portfolio.
01:48Now, before we start building out everything,
01:50first thing we need to do is look at our data.
01:53So this is our data right here,
01:54is the global YouTube statistics.
01:57It has YouTuber data, how many subscribers they have,
02:00video count, or how many views they have,
02:03the type of category, maybe the title of their channel,
02:06how many uploads they have, their country,
02:08and some other things.
02:09Now, we're gonna be building out what I would consider
02:12as a fairly simple web app,
02:14but it's gonna look really good.
02:15But you can build on this after we're done with this.
02:19You can keep adding things and try out new stuff,
02:21because there's a lot of data in here that you can do.
02:24So this is our data.
02:25Let's come over and we're gonna go down to our VS code.
02:28Now, if you don't know matplotlib and pandas, that's okay.
02:34You don't need to know all of it,
02:35although it is very, very, very helpful.
02:37And I have a bunch of tutorials on how to do this,
02:40but I'm not gonna be going through the code on, you know,
02:43how this works and what it does.
02:44In essence, we're reading in the file.
02:46We are cleaning it up just a little bit,
02:48and we're only taking the YouTube channels
02:51where there are 50 million subscribers or less,
02:54and then we're creating a visualization.
02:55That's what we're doing.
02:57And what we're gonna do is we're going to be building,
03:00basically, I would actually consider this
03:02kind of a small project right over here,
03:04but we need to be able to display this,
03:08add different inputs, add different outputs.
03:10And so let's go back to our components.
03:13And the first thing that I wanna add
03:15is I wanna add a visualization.
03:17Now, we're using matplotlib,
03:19but if you're using Plotly or Seaborn,
03:21they have different options for that.
03:23Let's go to matplotlib.
03:25And right down here,
03:27we are going to basically be copying this.
03:29We've already defined our visualization.
03:32We just need to do something called a render.
03:34And render is how we create these outputs to be visualized.
03:38And so we also want this ui.input slider.
03:42Now, that's an input.
03:43So this is an input, and this is an output.
03:45And what we wanna do is we wanna make it to where
03:48we are connecting these two so it is dynamic.
03:51As you change the input, the output gets changed as well.
03:57So let's copy these two things,
03:59and we'll get into it,
04:00and I'll explain it once we get in there.
04:02So we're gonna put this right above our visualization,
04:05just like this.
04:07And we actually don't need this part.
04:10But here's what we do need.
04:12If we try to just save those,
04:13let's go ahead and save this and run this
04:15and see what happens.
04:16We do have our input slider,
04:18and we do have our visualization,
04:19but let's go ahead and try to change this.
04:22So there's something there that's not being connected
04:25from our input to our output.
04:26And that's this piece right here.
04:28This is actually named n.
04:30This input slider is n.
04:32And what we can do is let's actually change this.
04:34We'll call this bins.
04:35And what we can do is we're gonna come right down here
04:37into this histogram.
04:39We're gonna add a comma.
04:40And we're just gonna say input.bins and open parentheses.
04:46And what that's gonna do is that's gonna say,
04:48when we change this,
04:50it's going to change this input bins down here.
04:54So now let's go ahead and save this.
04:59It's gonna recreate our visualization,
05:01but now it is gonna be dynamic.
05:04So now we've connected our input and our output.
05:07That's a very important thing to remember
05:09when you're building these kind of interactive applications
05:12is that you need to connect these two.
05:14And so it's always something you need to remember.
05:15If you have an input,
05:16you usually need to make sure you connect it to your output.
05:19Now, right after I say that,
05:21I'm actually gonna show you one
05:23that doesn't actually need an output.
05:26So if we come down here, we have something like dark mode switch.
05:30If we come down here, this input needs nothing.
05:34We can actually just copy this.
05:36And we can bring it, whoops, right over here.
05:39We can just put this right in here and we can save this.
05:42And it's gonna give it a dark mode and a light mode.
05:45Now, this is not connected to an output at all.
05:49If we just click this, all it's doing is adding an option
05:52or an input for someone to click on
05:54to change it from light to dark mode.
05:56So it's not interacting with an output.
05:58So there are some that don't interact,
05:59but if you do have something that you wanna connect,
06:02that is very important.
06:04Now, let's go down to our next piece.
06:07And the next piece is something that I personally really like,
06:10which is when I have a visualization,
06:12I like to show the data as well.
06:14And I actually really like seeing that on web apps
06:17or just websites in general.
06:19So if we come down here,
06:21there's something called a data grid.
06:24And data grids are great
06:25because it's just going to display your data.
06:28And so we can just copy this.
06:31And by the time we see it, we can see our data up here.
06:34So this is what it's gonna look like.
06:36And they'll be right under our visualization.
06:38So we're gonna have this data frame.
06:40We just have to render dot data frame.
06:42And so let's come back.
06:44Let's put it right down here.
06:46Instead of rendering this data frame,
06:49we need to take our real data frame.
06:50So our real data frame is this DF filtered.
06:53That's the data that we're using for this visualization.
06:56And we'll rename this.
06:58We'll call this a YouTuber data frame.
07:01So let's go ahead and save this.
07:03And as you can see right over here,
07:07we have our data right underneath it.
07:09Now I'm actually going to do the light mode.
07:12I think it's gonna look a little bit better.
07:13We may actually comment this out going forward.
07:16For what we're actually building may not be the best option.
07:19So I'm just gonna comment that out.
07:20But you can leave that in there.
07:21But now we can see right down here,
07:24we have hundreds and hundreds and hundreds,
07:26maybe even thousands.
07:27I don't know how many is actually in here.
07:29But we have a lot of YouTubers in here that we can see.
07:33And this is connected to this data up here.
07:36Now, what if I want to change the visualization
07:38and I want to come down here and be able to filter
07:41based off of a YouTuber?
07:43Maybe I want to search for Alex the Analyst.
07:45Maybe he's somewhere in here.
07:46I hit it big in a few years and this web app picks me up one day.
07:50And I want to be able to search in here.
07:51Well, we can do that.
07:53We can make it to where you can search for a YouTuber
07:55and it's going to change the actual output
07:59that you're seeing down here.
08:00So let's go ahead and see what we would need to do to do that.
08:04Let's go back to our components.
08:07And let's come down and look for something that we can type in.
08:11Here we go.
08:11We have a text box.
08:12Let's come and grab this text box.
08:15And we're going to take this UI.input.text.
08:20So I'm going to put it right down here.
08:22We'll put it right above this part right here.
08:26We're going to need to change our code a little bit down here.
08:30But if we just save this and run this,
08:34we're going to have our text input and it'll be right down here.
08:37Now, if we actually type in, let's say we're looking for Billie Eilish.
08:41If we're typing in Billie, it's not connected, right?
08:45We haven't connected these two things yet.
08:47So it's not going to do anything.
08:49But before we change anything, let's get rid of this enter text
08:52because we don't want to auto populate this box.
08:56And we'll call this a YouTuber search.
08:58So we'll call this a YouTuber search.
09:03There we go.
09:04Now, what we actually need to do is we're going to need to change our code down here
09:08to say if somebody is typing in, let's say Billie Eilish or something,
09:13we have to filter this YouTuber column based off of what they're searching for.
09:19And so this isn't the easiest thing in the world.
09:21Let's actually pull this over.
09:22This isn't the easiest thing.
09:24If you, you know, check this out and you try it out a little bit,
09:27you're going to run into some errors and mistakes.
09:29But I'm going to show you what the real, the kind of the good code looks like.
09:32What we'd want to do is anything they type in there, we'll make it lowercase.
09:36So we'll come right in here.
09:38We'll call this a search text.
09:41We'll just use this a little bit.
09:42We'll call this search text.
09:43And let's say we're going to take the input dot text.
09:47And that's this right here, this text right here.
09:48We're going to say input dot text.
09:51We're going to do dot strip.
09:53And then we'll do dot lower.
09:55So that's going to strip anything that shouldn't be there.
09:57And it's going to lowercase everything so we can more easily find things.
10:01And if somebody types in Billie perfectly, it'll search.
10:05But if they do Billie lowercase, it wouldn't get it
10:08because there's a capital B and a lower B.
10:09So we don't want that to be the case.
10:11So what we're going to do is we're going to say
10:14their input is made to be lowercase.
10:16So now we need to search for it.
10:17We'll make a conditional statement.
10:19We'll say if it needs to be lowercase.
10:22If the search text, if it's populated,
10:24if somebody is typing something into our search text,
10:26then what do we want to do?
10:28We want to filter this YouTuber column to be whatever they're searching for.
10:34So we're going to say data frame filtered.
10:37We'll do it just like this data frame filtered.
10:39And then we're going to search for just that column.
10:42So that's data frame filtered and then YouTuber.
10:45So we'll do a YouTuber just like that.
10:49So we're saying for this column and then we need to also make it dot string dot lower
10:54because we want it to match this search text.
10:58Then we're going to do dot string dot contains.
11:02And what does it need to contain?
11:04Search text.
11:05So we're going to say search text.
11:08And then we'll also do NA is equal to false.
11:13And so if somebody is typing something in to our input text,
11:16which is this right here, if somebody is typing something in,
11:19we're going to filter to exactly what they're inputting.
11:22If they're not, we'll say else.
11:24If they're not, then we're just going to return the data frame filtered.
11:29Now, we actually need to assign this to be in our output.
11:33So we can't just leave it like this.
11:35Let's actually rename both of these pretty easily.
11:38We'll just say final output.
11:41You can put whatever you want.
11:42So we'll do final underscore output is equal to.
11:47And we'll put our final output as what's going to be rendered or returned in our data grid.
11:53Let's go ahead and save this.
11:54And let's run it and see if it works.
11:57Should be able to bring this over right here.
11:59All right.
12:00So now we've connected this YouTube research to down here.
12:03So let's type in Billie Eilish.
12:04We'll type in Bill.
12:06And there you go.
12:07So now we have this search.
12:08And so now D billions, Billie Eilish.
12:11Let's type in Alex.
12:12Let's see what happens.
12:13See if Alex the analyst is in there.
12:14Yeah, we're not big enough, unfortunately.
12:16Very sad.
12:17But maybe one day, maybe one day.
12:20So this is our YouTube research.
12:21So we can come in here and we can say Mr.
12:24Mr. Beast should show.
12:25Actually, Mr. Beast isn't in our filter because he has over 50 million.
12:28But we have Mr. Beast Gaming, Mr. Beast stuff.
12:32So a bunch of Mr. Beast stuff.
12:33So you can come in here and you can search this.
12:35Now, the only downside to this is that it's only connected to our data grid.
12:40What if we also want to connect it to this up here?
12:43Well, we can do that.
12:45So let's come up here and let's actually take this.
12:47And we're going to put it right next to it.
12:50And the order matters because if we hit Ctrl S, we've moved it up in the order of things.
12:56But again, it's still only connected down below.
13:00But we're going to connect it to our distribution of subscribers as well.
13:04What we need to do is essentially the same thing.
13:06We can just copy this whole thing for the search text.
13:10We can place it right up here.
13:12That looks really good.
13:14Except our final output, that's what's going to be put right here.
13:18So we just need to replace that final output as the data that we're hitting off of.
13:22So now, if we save this, it should actually be connected to both.
13:28So now let's type in Bill.
13:30There we go.
13:31So you have Billie Eilish with almost 50 million, which is right here.
13:36And then D Billions, which is 260, what is that, 26 million.
13:41So there we go.
13:42So now this is completely dynamic.
13:45And we can, oops, I need to at least have one.
13:48I may want to add that as part of the code.
13:51But now you can change the bins and you can search at the same time.
13:57So now it's becoming a lot more dynamic.
13:59And so this is looking really, really good.
14:02Now, I'm not going to go through all of the inputs and all of the components in general,
14:07because there's a ton of them.
14:09And you can already see how they're starting to work.
14:11They're very, very useful.
14:13But now we're going to start going into our layouts.
14:16So let's come up here.
14:17We're going to go down to layouts.
14:19Let's start up here with a nav bar, because nav bars are pretty common in websites.
14:25If you come up here to our shinyapps.io, we have a nav bar up here, right?
14:30So you can click different things.
14:31There's different options.
14:33So nav bars are pretty popular.
14:34So let's click into this nav bar at top.
14:37Now, what you need to do is you do this UI page ops.
14:42And you may actually need to bring this in.
14:45So we may want to bring in some of these other things.
14:47So let's go ahead and add these real quick.
14:51And we'll just import all of them.
14:54Actually, I can get rid of this one, because we already have this one.
14:56But import shiny UI page nav bar that may be needed.
15:01Next thing we're going to bring is all of this.
15:04Now, here's what it's actually doing is we're creating this title app with nav bar.
15:08And we have these different options, A, B, C.
15:11And then under each one, we have our content, which is tabbed over.
15:14So this is, you know, very simple Python.
15:17And so what we're going to do is we're going to copy this entire thing.
15:21We're going to come back to our code.
15:23There we go.
15:25And let's come right down here.
15:29And let's paste this in.
15:30So this is going to be our YouTuber app.
15:34And now what we're going to do is under this with UI nav panel, we're going to put our visualization.
15:40So actually, let's just copy all of this.
15:43We'll get rid of all this.
15:44So we have our inputs and we have our visualization.
15:47And then down here, we'll put our next one.
15:51And so we're going to call this, or we're going to have in here our data frame.
15:55And so we're going to tab this whole thing over.
15:57We're going to call this data.
16:00And then we're going to take this whole thing, which should be right here.
16:04I'm going to tab this over.
16:06And we're going to call this the visualization.
16:12There we go.
16:13And so what we can do now is when we save this, it should create a top nav bar for
16:18us.
16:19So let's go ahead and save this.
16:22And now let's bring this all the way over.
16:25And you can see we have our YouTuber app.
16:28We have our visualization.
16:29And then over here, we have our data.
16:31Now, if we go ahead and we search for Bill, it's still going to work.
16:36And it's still connected to our data over here.
16:39So it's still dynamic.
16:40We're just kind of separating and changing the layout.
16:43And that's what layouts is all about.
16:45And so we're changing the layout of this.
16:47Now, this already looks a lot better.
16:49But let's go to layouts again.
16:52And come right here.
16:54Another really popular thing is sidebars.
16:57So instead of just having this bins and YouTuber search above our visualization,
17:03what if we want it on a sidebar?
17:05I think that would look a lot better.
17:07So let's do a sidebar on the left.
17:10And so we're going to do this right here.
17:12So we're going to say with UI sidebar.
17:14We're going to come back.
17:16Let's bring this over.
17:19There we go.
17:21And what do we actually want in that sidebar?
17:24We want this number of bins in the YouTuber search.
17:28So we're going to get rid of this.
17:30And we're going to tab this over.
17:33And there we go.
17:34So this should be in a sidebar now.
17:36So let's go ahead and save this.
17:38And we'll come back.
17:40It looks like our sidebar right here is very small.
17:44I don't think it's working, at least within this.
17:48But it should have a little sidebar right here.
17:51All right, that's not working.
17:52So let's go back and look at our documentation.
17:54This is add UI layout sidebar inside any shiny UI page.
18:00Pass the sidebar as the first argument of UI layout sidebar.
18:06And then we should be able to pass that through.
18:08So I think we need to go back here.
18:12Let's copy this UI layout sidebar.
18:17So we're going to do that right here.
18:18We'll say with UI layout sidebar.
18:21And then we'll tab over everything underneath it.
18:25Because that's all going to go right here.
18:29And then we're going to do that.
18:31And then we'll render this as part of the layout.
18:35So let's try this.
18:37And there we go.
18:38So now we have this sidebar.
18:41In fact, let's pull it up right over here.
18:43This is just like a local host of it.
18:45So now we have this, the bins.
18:49There we go.
18:50And we have the search.
18:53And it's all working.
18:54So we can make this look better, of course.
18:56But just right off the bat, I mean, this is looking pretty good.
19:00So let's get out of this.
19:01Let's go back to our visualization.
19:07And let's pull this all the way back over.
19:10So now we have our sidebar working.
19:11We have our top nav or our nav panel working.
19:15We have our visualizations that are all looking good.
19:17One last thing that I find super helpful are these content divided by cards.
19:24Now, the cards are just super intuitive,
19:27really nice at making things look a lot better.
19:30And so I just want to show you how to use it.
19:34And we'll actually publish our dashboard.
19:37And we'll be rocking and rolling.
19:38Now, this is a card.
19:40They automatically will kind of encapsulate what you put into it.
19:44And if you have multiple cards,
19:46if you have a layout columns with a card here and a card here,
19:49they'll separate them.
19:50And it'll make it look really nice and tidy.
19:52Now, what we're going to do is we're just going to copy this part right here.
19:56We're going to come back to our code.
19:57And we're just going to come down.
19:59And on this second, on this data piece, we're going to put this all in a card.
20:05So let's come right in here.
20:06It's just kind of squarish.
20:08But let's put this in a card and just see how it looks.
20:12So we'll come right here.
20:14So within this nav panel, we'll say with a card, we're going to put this.
20:19Let's do that.
20:22Actually, we need one more.
20:24There we go.
20:26And let's just see how this looks.
20:28So we have this right here.
20:30Then we're going to control S.
20:31So we're going to recreate this.
20:35Back to our data.
20:36And now you can see it's all encapsulated within this card.
20:40And it just looks a little bit neater.
20:42And when you add multiple cards, it looks a lot better.
20:45And so we're going to stop here because we've covered a lot.
20:49But if you come in here, there is so many different components and layouts
20:53that you can use.
20:56And it's pretty fantastic.
20:58I mean, they just have so many options that you can customize.
21:01You can nest them within one another.
21:03And they're awesome.
21:04One other thing, just real quick while we're here,
21:06is if you go into learn Shiny and the references for Shiny Express,
21:10so many different things that you can use.
21:12And they go into the rendering.
21:14So you can go in here and look at all the different ways to render things,
21:17all the different types of panels that you can do.
21:21Because we, you know, we looked at some of them,
21:24but there are a bunch of other ones as well.
21:26So you can come in here and take a look at these.
21:30So what we're going to do is we're going to take this
21:32and we're going to deploy this as our app.
21:35And the reason I want to do that is because I want to show you something
21:38that may be causing an issue.
21:39Let's go back here, right here.
21:43We're going to do rs connect.
21:46We're going to do Shiny deploy, or sorry, deploy Shiny.
21:51Deploy Shiny dash N, and then it's Alex the Analyst Shiny app.
21:57And we'll do a dot.
21:58Let's go ahead and deploy this and see what it looks like.
22:01And just like that, an error has occurred.
22:03And this is not fun when you see this.
22:05So let's come back over here.
22:06Let's go to our logs.
22:08Let's go all the way down to the bottom.
22:09It says, no such file or directory found.
22:13Now, I'm storing this locally.
22:16But it's just not reading it in for some reason.
22:18And I found a way that works.
22:21And so I just wanted to show it to you.
22:22We're going to comment this out.
22:24We're going to get rid of that.
22:26We're going to bring this one in.
22:28Now, you need to use something called path lib, import path.
22:31And we're going to use this path right here.
22:33We're basically declaring this as kind of the parent file.
22:36And then here's our CSV that we're using.
22:39And so it knows the correct path to look for.
22:42So let's go ahead and save this.
22:44And it should pull up over.
22:46Actually, let's go back here.
22:48We're going to save this.
22:49And it should pull up the exact same.
22:51So it should still work.
22:52Reading in the same file should still all work.
22:54But now let's go back to our PowerShell.
22:57We're just going to let's copy this back here.
23:00I don't want to write out the whole thing.
23:02Let's copy this whole thing.
23:03And now that we have that saved, now let's deploy it one more time.
23:07And just like that, no more issues.
23:11And as you can see, we have our data.
23:13We have our visualization.
23:15This should all be working.
23:18There we go.
23:19It's all working great.
23:21Now, this is a very simple app.
23:22This is really just to demonstrate different components and layouts.
23:26And you can go really in-depth and make this an amazing web app.
23:31Now, in the next lesson, that's exactly what we're going to be doing.
23:34We're going to be really deep diving and using some new components, new layouts,
23:40and customizing it and making an amazing Shiny app.
23:43I hope this was helpful.
23:44I hope that you're able to follow along through the whole thing.
23:46Huge shout out to Posit, who makes Shiny for Python.
23:49Absolutely amazing.
23:50If you have not already, be sure to like and subscribe.
23:52And I will see you in the next video.

Recommended