- 2 months ago
Building a fully interactive web app with Shiny for Python turns real housing data into a polished portfolio project. Using Zillow research data, the app pulls in current for sale inventory, new listings, and median list price, then transforms the data into interactive Plotly visualizations that respond to state selection and date range filtering.
The build walks through the practical pieces of a real Shiny app: reading in data, cleaning and shaping it with pandas, creating helper functions for date conversion and filtering, and wiring up reactive inputs like a state dropdown and a date slider. It also shows how to handle the United States view, switch between different states, and organize the interface with a sidebar and tabbed layout so the charts and data feel easy to explore.
This is a hands-on Python data app tutorial for anyone learning Shiny, interactive dashboards, or web app development with real estate data. It is especially useful if you want to move beyond basic examples and build something you can share on LinkedIn or add to a data science portfolio.
SEO: Shiny for Python tutorial, interactive web app with Python, Zillow housing data dashboard, Plotly data visualization, pandas data cleaning, reactive state filter, date range slider, real estate analytics app, Python dashboard project, and Shiny app for data science portfolios.
The build walks through the practical pieces of a real Shiny app: reading in data, cleaning and shaping it with pandas, creating helper functions for date conversion and filtering, and wiring up reactive inputs like a state dropdown and a date slider. It also shows how to handle the United States view, switch between different states, and organize the interface with a sidebar and tabbed layout so the charts and data feel easy to explore.
This is a hands-on Python data app tutorial for anyone learning Shiny, interactive dashboards, or web app development with real estate data. It is especially useful if you want to move beyond basic examples and build something you can share on LinkedIn or add to a data science portfolio.
SEO: Shiny for Python tutorial, interactive web app with Python, Zillow housing data dashboard, Plotly data visualization, pandas data cleaning, reactive state filter, date range slider, real estate analytics app, Python dashboard project, and Shiny app for data science portfolios.
Category
📚
LearningTranscript
00:00What's going on, everybody?
00:01Welcome back to another video.
00:02Today, we are building an entire Shiny web app
00:04using real data.
00:11Now, this project is actually one
00:13that I've really just been wanting to build myself,
00:15but we're gonna be building it together.
00:17So I'm really excited to get into it.
00:19We're gonna be downloading real current data from Zillow.
00:21We're gonna be transforming that data,
00:23and then we're gonna be building
00:23an entire Shiny app with that data.
00:26If you watched the first two videos in the Shiny series,
00:28this is gonna go way above and beyond that,
00:31but it has a lot of the same fundamentals that we learned.
00:33It's just gonna be going a lot more in depth
00:35because now we're building a real Shiny app.
00:37This is gonna be the kind of project
00:38that you're gonna wanna share with everybody,
00:40your friends, your family out on LinkedIn,
00:41saying, hey, look what I built.
00:43This is really, really cool.
00:44Now, this is gonna be a longer video
00:45because this is gonna be a full project.
00:47So let's not waste any more time.
00:49Let's jump right into it.
00:50All right, so before we jump into the Shiny app,
00:52let's actually look at where we're getting this data from.
00:54I'm getting this from Zillow Research Data.
00:57You can have this link.
00:58It's in the description.
00:59So you can come and download the latest data set,
01:02but it has a ton of data in here.
01:05Just some really, really, really good information
01:07that they're collecting and giving out.
01:08And so you can come in here
01:09and you can download the data that you want.
01:12What we're gonna be looking at
01:14is specifically this area right here.
01:17We're gonna be downloading this for sale inventory,
01:20new listings, and median list price.
01:22When you're downloading them,
01:24be sure to get the smooth all homes monthly.
01:26And then for new listings, smooth all homes monthly.
01:30And then download those.
01:31Now, I already have those right here.
01:34And I'm just gonna pull up one.
01:36You'll notice as we pull them up, if we go over,
01:39they're all very, very, very similar,
01:41just with different data.
01:43You'll notice the numbers are changing.
01:44But let's look at this one.
01:46This is Metro new listings.
01:48So these are the how many homes are listed per month.
01:51So we have March of 2018, 2018.
01:54And if we go all the way to the right,
01:56you can see that this is current
01:59as to when I'm recording this.
02:00So this is April's data.
02:02It has all the current numbers.
02:04And if you get this, you'll have the most recent data.
02:08Now, the only really thing to look in here
02:10is that we have this region name.
02:12This is the actual location.
02:14We have the region type.
02:16And then we have state name.
02:17Really in this project,
02:19this web app that we're gonna be using,
02:20we're just using the state name.
02:21And then we have our data.
02:23Now, I've already written some of the code for this,
02:26because again, this is not a full lesson on pandas
02:30and matplotlib or plotly,
02:32which is what we're using for more interactive visualization.
02:35But this is not a full tutorial on that.
02:37We're focused mostly on how to build the Shiny app.
02:40So I'm assuming that you have gotten in,
02:44you've gotten your data,
02:45you've made your visualizations and whatnot,
02:47and now you just want to create your web app.
02:49And that's what we're gonna be focusing on.
02:50Although we will get into some code as well.
02:54Let's come over here
02:55and let's take a look at everything we have so far.
02:58So this is what I'm gonna call our boilerplate code,
03:01although it's not very boilerplate.
03:03This is just our template.
03:04This is what we're starting with.
03:05I'm gonna walk through all of this really quickly
03:08to take a look at what we've done so far,
03:10kind of what I'm giving you to start the project.
03:13And then what we're gonna be doing
03:14for probably the next hour or so
03:16is building out our web app
03:18with all of the things that we've gotten here.
03:21And we'll have to create some custom functions
03:23and we'll be doing a lot of different stuff.
03:25But we're gonna be building a really, really cool web app.
03:29So let's go ahead and get started.
03:31These are all of the different libraries and packages
03:34that we're gonna be using.
03:35You can see there's a lot in there.
03:37We also have one that we created.
03:39We're pulling this in from this .py file over here
03:42called state choices.
03:43I'll explain this when we get there.
03:46We can do this another way.
03:48And when I was initially building this out,
03:50we can just take this and we can filter on this
03:55and remove the duplicates and order it and do all that.
03:58But it doesn't work as well as what I found.
04:02And so I decided to do it this way instead.
04:05And then we need our requirements.
04:07So be sure you have that.
04:09But we're just bringing everything in.
04:11We're reading in our files the same way we did
04:13in our last lesson where we read them in
04:17with this parent path so that when we actually deploy this,
04:22then it's going to read in that file properly
04:25and everything's gonna be good.
04:26So we have those three different files.
04:29Again, same, similar data,
04:32but you just have to read them in and we'll go from there.
04:36Next, I've already created these kind of helper functions
04:39is what we're gonna call them.
04:40For some of these date time conversions,
04:43we're gonna be creating some time series data
04:45because that data really lends itself to doing that.
04:48So we're gonna be creating some time series data.
04:50And with that, we need to convert this string,
04:54which it is a string right now,
04:55or when we pull it in, it's a string
04:57because these are numeric.
04:58So we're gonna convert this string into dates.
05:01And so we're just converting them into dates
05:03and we'll be using these functions that we created
05:07later on in this project.
05:09And then lastly, this is actually what I would consider
05:12the simplest part,
05:13which is we just created our visualizations.
05:15You can do this with matplotlib, you can do the seaborn,
05:17you can do a bunch of stuff, but we did it with Plotly.
05:20The reason is because Plotly is interactive.
05:23So in our web app, I wanted people to be able to interact
05:26with the data and click into it and look at stuff.
05:29And so we're gonna keep that in.
05:31Now let's look at what we're actually doing
05:32within our visualization.
05:34We are taking our data
05:36and we are grouping based off of that state name.
05:39Let me just show you right here.
05:40So we have this state name.
05:42So we have all this data.
05:44We want all the ones that are Texas,
05:46which are right here.
05:47We want it all to be grouped by Texas.
05:51And then for this data specifically,
05:53this is new listings.
05:54We're gonna be adding these numbers.
05:56So let's go back.
05:58We're getting the mean,
05:59but that's because this is the list price.
06:01But for sale, which is this one right here,
06:04this is our sum.
06:05So this is our for sale inventory data frame
06:09that we created right up here.
06:10For sale inventory for our inventory.
06:13And then for new listings, if we go down,
06:16we have our new listings data frame.
06:18And so we're doing the same thing on every single one,
06:21except for the data where it's the inventory
06:25and the new listings, we're doing a sum.
06:28And then right up here, this is the median listing price.
06:33And so what we're doing for that is we're actually taking
06:34the average of the median listing price.
06:37If we do sum, that wouldn't make sense,
06:39because we'd just be adding the mean together.
06:41And then the median household price would be like 10 million
06:44for every state, and that'd be terrible.
06:46So that's what we're doing here.
06:48And then we come down here,
06:50and this is our actual visualization using Plotly,
06:52keeping it super simple.
06:53So this might look like a lot, but this actually,
06:57you know, this is something that I know
06:58you guys can definitely do,
07:00especially if you've gone through my Pandas series.
07:02You should be able to understand this
07:04and definitely do this yourself.
07:06Now, we're about to do a ton of stuff.
07:09This is probably gonna be one of the longer projects
07:11just on my channel, but it is,
07:13there's a reason for it,
07:14it's because it's gonna be an amazing project
07:16to add to your portfolio.
07:18So let's go ahead and get started.
07:20Now, what we wanna do before we really do anything
07:23is we want to visualize these, you know, visualizations.
07:27We wanna at least get them on our screen,
07:29so then we can start formatting them nicely,
07:31and we can start getting some sidebar going,
07:35and some, you know, nav panels,
07:36and all these different things.
07:38And we're gonna have to do some custom stuff as well
07:40within that.
07:41So it's gonna get a, you know,
07:42might get a little complicated,
07:43but if you stick with me, you'll understand it,
07:45and it'll be really, really fun.
07:46Let's start off by creating our input select.
07:49And if we come back here,
07:51everything that we're gonna be pulling
07:52is from these components.
07:54Or actually, some of these are,
07:56if we go to Shiny Express,
07:57some of these are gonna be ones that are only in here,
08:01and aren't in the components page,
08:02because I just like the look of it a little bit better.
08:05Or, you know, they had a better functionality
08:08than some of the other ones.
08:10And so something like nav set card underline
08:12isn't one that they show in this components tab
08:14or the layout tab, but I like it.
08:16So that's what we're gonna be using.
08:17Now let's come up here.
08:18We're gonna come to input select,
08:21and we're gonna be using this input select
08:23so that someone can choose the state
08:25that the visualization's gonna represent.
08:27And so if we come back to our data,
08:30someone's going to be coming in here,
08:32and they're gonna say, okay,
08:32I wanna look at all the New York,
08:34what is this, new listings.
08:36So we're gonna do the sum of all the New York listings.
08:38So we already grouped our data in our visualization,
08:41but we want the input select,
08:43they should be able to specify
08:45that they want to choose New York.
08:48So what we're gonna do, let's come back here.
08:51We're gonna come in here,
08:52and we're gonna say,
08:55UI.input underscore select.
08:57And we're gonna call this the state.
08:59So that's what it's gonna be called.
09:01And I actually need to do it in quotes.
09:04So call this the state.
09:05And then we'll do a comma.
09:07I'm gonna say, filter by state.
09:10This is what the person will actually see.
09:12And then their choices.
09:13So the choices is an actual parameter
09:16that we're gonna pass through.
09:17Now you can do it two ways.
09:20And there's actually, you know,
09:21you can do it both ways,
09:22and either way will be technically fine.
09:25But I'm gonna show you
09:27how I originally thought of doing it.
09:29And then I found the better way to do it.
09:32The simpler way to do it
09:34is to just create this file with all,
09:37just a list, that's all it is.
09:38A list of exactly how you want it.
09:41And we can do that right here.
09:43We'll say we have United States, A-K-A-L-A-R.
09:46These are all the acronyms, or sorry,
09:49abbreviations for the state.
09:51And we can read that in.
09:52And we already have done that.
09:53And we did that right up here.
09:54So we would just say,
09:55as equal to state choices.
09:58So we come right here,
09:59is equal to state choices.
10:00And that would be that.
10:01The other way of doing it,
10:02and I'll, I guess I'll just write it out real quick,
10:05because this shouldn't take very long.
10:06But let's take the new sale data frame.
10:10Really what we need to do,
10:11there's two things.
10:12One is, this is all of the United States.
10:15So if it's blank, it'll be United States.
10:18If not, it'll be all of these.
10:19So we actually do need to specify that.
10:22So we can fill it.
10:23We'll just say equal to.
10:24So we'll take our data frame,
10:26and then we'll specify this column right here,
10:29which is state name.
10:32And you can either just write it out or not.
10:36And then we're gonna say dot fill N-A.
10:39And what are we gonna fill it with?
10:41If it is empty, we are gonna call this United States.
10:45So we're filling that blank value with United States.
10:47And then we're going to come right down here.
10:50We need to remove the duplicates.
10:52So let's come here, and we'll say is equal to.
10:54We're just overwriting the data frame.
10:56We probably shouldn't do that.
10:57We'll do data frame two up here.
10:59But we're just gonna drop the duplicates
11:01in that state name.
11:02So we're gonna take the state name right here,
11:05and we'll say drop duplicate.
11:07So we're gonna say drop underscore duplicates.
11:11And then we need to sort them.
11:13So then we come right down here.
11:14We'll say is equal to.
11:15And then we do dot sort underscore values.
11:18And then we need to put in a list.
11:21So we'll say to list.
11:22And so this would be the list
11:24that we would pass through into here.
11:26Now, I'm gonna save these
11:27because we can test this out later
11:29once we get everything up and running.
11:31But we're not gonna do that right now.
11:33So we'll do that in a little while.
11:35I'll show you kind of the difference between the two
11:37and why we did this
11:38versus just creating our own list with the data.
11:42But let's keep going.
11:43So now we have this input select.
11:46So they're gonna be able to select
11:48the state that they want.
11:49So what we need to do is we need to take this state.
11:52We need to bring it right down here.
11:54Now, here's what we're gonna do.
11:55We are gonna do basically the same logic
11:57that we did in the last lesson.
11:59We're gonna say,
12:00if somebody inputs something, then give them this.
12:03If somebody inputs this, then give them this.
12:05Now, here's why we need to do this.
12:07Because we have an option in the state choices
12:11that isn't actually in the state name.
12:14And I'm gonna explain that in just a sec.
12:16If somebody chooses United States,
12:18the United States is not right here.
12:20It's blank.
12:21And so if they choose United States
12:24as their option in the select menu,
12:26then we need to select everything that's not that one,
12:30essentially.
12:31And that's because we're using this state choices right here,
12:34which is just a list.
12:36And so if we had done it the other way,
12:39if we had used this, then we wouldn't need to do that.
12:41But again, it wouldn't work as well.
12:43And I'll show it to you later.
12:44But let's just write out what we need.
12:46And then we'll kind of visually see what we're needing to do.
12:49Let's just call this data frame.
12:51We'll say the data frame is equal to,
12:53and then we're gonna take this data right here.
12:55So we're gonna say within this,
12:58then we need to select the state name.
13:00So then we'll do just like this.
13:03We'll say state name.
13:05So for the state name, we want that to be equal to,
13:08and then we're gonna say input.state.
13:12We need to open our parentheses
13:14and close this bracket right here and get rid of that bracket.
13:18So what we're doing is we're creating this data frame
13:20where when someone inputs the state right up here,
13:23so when someone clicks on that input select,
13:26they're going to select the state.
13:30We're then filtering based off of that.
13:32And then we're gonna pass this data frame right down here.
13:35And so let's go ahead and let's try to render this.
13:38So we're gonna say at, and we're gonna do render.
13:43Then we need to say at render plotly.
13:45Now, this one is specific to plotly.
13:47As you can see, we're using a plotly visualization.
13:49So let's see if this works.
13:53Let's go ahead and control S.
13:55And let's see what comes up right over here.
13:58Now, it looks like our visualization's not working,
14:00but let's come over here.
14:03And this worked properly, but this isn't pulling up properly.
14:07Now, that may be something that we need to fix.
14:09But what we can do is let's really quick,
14:13let's put a data grid under here,
14:15because we're eventually gonna have that anyway.
14:16So let's put a data grid under here.
14:18And let's see if this piece is working,
14:22this input piece is working.
14:23So we're gonna say at,
14:26then we're gonna do render dot data frame.
14:29We're gonna say define, and this is for the list price.
14:32So we'll do list price data.
14:36Then we'll go into it and we'll say return.
14:39Then we'll say render dot data grid right here.
14:44And what do we want to render?
14:45We want to return all of the data.
14:49And we could, what is this data?
14:51This is the list price.
14:54So let's come up here.
14:54Let's take our list price.
14:57Let's say median listing price data frame.
15:00We're gonna come right down here.
15:02And we can just put that right in here.
15:05And that'd be perfectly fine.
15:07But we want to be able to give me one sec.
15:10I'm actually, let me check this.
15:12Oh, there we go.
15:14Oh, okay.
15:15I figured out the issue.
15:16Our, uh, this actually is working.
15:18Um, well, ah, okay.
15:21And this actually reminds me of why we did the state choices and what we need to do to fix
15:26that.
15:26United States is not an option in the state name.
15:31So if we come over here, uh, this is not an option.
15:34United States is not in the state name.
15:36So what we need to do is create a little logic here.
15:40So we're going to come in here.
15:42This worked great.
15:43I'm actually really happy that it's working.
15:45Um, but what we're going to do is we're going to say if, and it needs to be lowercase.
15:51So if the input dot state is equal to, and if they choose United States, which is going
15:58to be the default value because it's the first one in our dot P Y file or our list, if
16:02you want
16:03to just say in our list.
16:04So if they choose United States and I need to spell that right, then we just need to come over
16:10here and we need to say, if they choose it, then return all of the data that is not United
16:16States,
16:17right?
16:17Return all the other data.
16:19So we're going to actually copy this right here.
16:22So we'll say, uh, if it is United States, then we'll say, take everything that is not.
16:30And so we'll do exclamation point equal sign is not United States.
16:36And actually within the state name, it's blank.
16:39So maybe we should be putting it like this is not blank.
16:44Um, so if it's not blank, take all the other data.
16:46And so within this, we're going to take everything that's not this.
16:49So we're gonna take all the numbers from anything that's not blank.
16:52And this is the only blank one right here.
16:54So that's just a, you know, a little piece of it there.
16:57And then we're going to say else, and then we'll do this one is that should fix our issue.
17:04Let's go ahead and save this.
17:05We'll see if the United States renders, uh, properly.
17:08And I said equal to, instead of equal, equal, which is equal in Python.
17:13So let's go ahead and fix that mistake.
17:15And it looks like that didn't work for the United States.
17:18This is all still working.
17:20So that logic still works, but maybe it is United States here.
17:24Let's take a look.
17:25Let's just try it out.
17:26And it looks like our data frame object is not callable for
17:31this, uh, data frame right down here, but we'll take a look at that in just a second.
17:35All right.
17:35Well, we'll come back to this piece because this piece is working properly.
17:40Um, and I'm pretty sure I just need to get rid of that to fix the data frame issue.
17:47That should come up here in just a sec.
17:49There we go.
17:50So now here's our data down here.
17:52And if we come in here and we select one now, what I'm actually thinking is the reason why
17:58it's not working for United States is because I'm saying don't select the United States.
18:06Then what it's doing is it's trying to pass through multiple values into this visualization,
18:12which again should work because then it should be all of them.
18:16Uh, it should be New York, California, Illinois, Texas, you know, all of them.
18:19So actually I, I, I feel like this is correct, but we'll come back to that because, uh, you know,
18:26we need to keep moving forward.
18:27But here's what we have so far.
18:29Uh, we have our filter by state so they can come in here and say, okay, I live in South
18:35Carolina.
18:35Let me come in here.
18:36Uh, South Carolina.
18:37Here's my, these are the median list prices and maybe we need some type of title in there
18:43in a little bit, but these are the median list prices back in December or sorry, let's say
18:47May of 2018 is 232,000.
18:50And as we've gone, you can see it's all the way up to, uh, right about 312 at its peak
18:56in July, June timeframe of 2023, about 322,000.
19:02That was the median price.
19:02Uh, so pretty, pretty expensive.
19:05And as you can see clear lineup, let's go, I'm going to go to California.
19:08I want to see what California looks like.
19:10So this is the median price in California, which is, uh, 676,000.
19:18So that is pretty expensive.
19:19Now, if we want this to react in the same way, uh, we would just need to add the same
19:24logic.
19:25So we could come in here and we can even copy this.
19:27Maybe this would help us solve, uh, this issue that we're having with this piece.
19:31Uh, why not?
19:33Why don't we, why don't we try it?
19:35So we'll come in here and we'll actually do it just like this.
19:38We'll pass through the median listing price data frame, uh, right in here.
19:45So that that is what's displayed, but if the input state is equal to this, we're going to
19:52pass through our data frame into the data grid.
19:54So now let's try running this really quick, uh, because this might help us solve this,
19:59honestly.
20:00So for the United States, it's not working, obviously, uh, we figured that out, but for
20:05Arkansas, I believe that's Arkansas for AK.
20:08Now it's filtering properly.
20:09This is our data that we're looking back in 2018.
20:13Here's, uh, the numbers.
20:14And we're taking the average of that.
20:16We're taking the mean.
20:16And so this is all working properly for whatever reason, the United States isn't.
20:21And we're going to solve this.
20:23So I was trying to figure out this United States, uh, really quick.
20:26And I did a little bit of debugging.
20:27I'm going to show you how I figured this out.
20:29Um, but it's not anything too crazy.
20:33Um, we, I want to look at the actual data that's coming from this.
20:36I'm just going to pass this through, uh, right down here real quick, just so we can look at
20:41the data grid.
20:42So we're going to look, um, at this, put this right in here.
20:46So just the data, that's all we're doing.
20:50And so we're not filtering it or anything.
20:52Um, if we choose Arizona, it's not, uh, passing that through.
20:57Cause that's the data frame, right?
20:58We're not, we're just looking at the raw data.
21:00Notice there's no state name called anything.
21:01So actually that filtering that we were doing before, it didn't matter.
21:04Um, what we need to do is we don't need to do any filtering on the state name at all.
21:11Although I'm not sure a hundred percent why I was causing that issue.
21:13Um, you know, coding is never, uh, never an exact science, but what we can do is if it
21:19is United States, we just passed through the whole data frame.
21:22We just passed through this whole thing.
21:24Uh, let's give this a go.
21:25We're going to see if this works.
21:26So let's go ahead and yeah, let's get, uh, let's try this.
21:30I just got rid of all this stuff down here in the data frame.
21:33Let's go ahead and run this.
21:35And there we go.
21:35This one is working.
21:36So we're just going to copy this whole thing and we're going to replace this down here.
21:44And then both of these should be working properly.
21:47Let's go ahead and save this.
21:48And we don't actually need to use this price for data frame.
21:52We should use the original data frame.
21:54Now we're doing a median price.
21:57We're going to use this median listing price.
22:00And we'll come right down here.
22:02Place that right there, right there and right there.
22:05And that should work.
22:07So now we have all of our data, but then if we choose Arizona,
22:13there we go.
22:14So this is, I mean, that was kind of the hardest part we've had so far.
22:18We haven't gotten crazy far into this, but this is looking really, really good.
22:22And so we have all the data.
22:24We could also pass, I mean, we could have, if you want to,
22:28you could make this into a function and you can pass it through down here and there,
22:33or you can just copy this and you can bring it down here.
22:37If you really want to, and then you could do the exact same thing.
22:41So you could do it just like this.
22:44And yeah, there we go.
22:46Hit save.
22:46This will run once we actually do this right.
22:50And there we go.
22:51So you can do it either way.
22:53I think I actually prefer with the raw or the initial data frame.
22:56So I'm going to go back.
22:58I'm going to get rid of all this.
22:59But I think it looks better like this because you can see all the data.
23:03That's what I personally prefer.
23:04So it's up to you which one you want to put in there.
23:07Now, this works and this works.
23:11So really quickly, we are going to apply that to our next two data visualizations.
23:17And so this next, now that we did the first one,
23:19it should be a lot easier to do the next ones.
23:22We'll render this as plotly and we'll render the data frame.
23:28And then we'll add in our other stuff.
23:31Actually, pull this whole thing in here.
23:35Now, we need to change this median listing price because we're not doing the median listing
23:40price.
23:41This is the for sale.
23:43So we need to call this for sale data.
23:47And we need to come back up to our data sets and we'll get our for sale inventory data frame.
23:55Come right down here and we need to put that one in here.
24:00And then we need to also pull down is the logic that we've used.
24:03So let's get rid of this or move this over for just a second.
24:06We need to bring in this logic as well.
24:11So we're going to bring this down, replace it right here.
24:14But instead of this one, we'll be passing through this one.
24:20And we can't forget the data frame.
24:23So that one should be working now down here should be working.
24:28Let's go ahead and run this.
24:30Let's see if it actually is working.
24:31That's that's pretty important.
24:33All right, we have United States.
24:34Here's our first visualization data frame.
24:38Second visualization and data frame.
24:40We're rocking and rolling.
24:41Just know we're just getting everything working.
24:44And then once we start really formatting, we're gonna make this look really, really nice.
24:48So don't worry about how it's looking right now.
24:51That's all part of the process.
24:53And then actually we're gonna add one more input up here for date ranges.
24:57So I want the user to be able to customize their date range.
25:00And then once we do all of that, then we'll start really working with some of the layout stuff
25:05and really make this start looking really nice.
25:09Let's copy this again.
25:10Now we're working with listings.
25:14So let's call this listings data.
25:16Let's go back up.
25:18Let's take our new listings data frame just for the data grid at least.
25:23So we'll go right here, right there, right there.
25:26That's great.
25:27And then we'll copy this.
25:30Give it a little room just so you can see it.
25:33And we'll bring this down right here.
25:37And there we go.
25:39Now what we need to do is we'll pass this through.
25:43Boom, boom, whoops, boom, boom.
25:45And then we pass through the data frame as our parameter for our data.
25:50So now this one should be up and running as well.
25:53Let's go ahead and run this.
25:55We'll see if all of them are working properly.
25:58I'll drag as far over as I can.
26:00So we have this right here.
26:02We have the data.
26:03We have our visualization.
26:04We have data.
26:06And our next visualization didn't show up because we didn't say render plotly.
26:13Oh, boy.
26:15That was my bad.
26:17All right.
26:17Let's go ahead and save this and run this again.
26:19Once we have this up and we get the next UI input, that's 90% of it.
26:25And so we're going to be going strong.
26:28So there we go.
26:29There's that.
26:30There's that one.
26:32And there's our third one.
26:33So this is all really looking great.
26:36Now, the last UI input is going to be the date range.
26:39And we'll have to make it dynamic again for all of these.
26:42So we'll have to connect them to each of our visualizations and the data as we go.
26:48Or you know what?
26:49We could just keep it this and not because this data is sitting like this.
26:56So we'd have to convert it and a bunch of other stuff.
26:58So maybe we will only change it for the visualizations.
27:01And it'll make sense later because we aren't really displaying this front and center in the final state of it.
27:10So I think we'll be okay just to connect it to our visualizations.
27:13So let's come back up.
27:16We have a lot of code up here.
27:18And what we're going to do now is we're going to create another UI.
27:22So now we're going to say UI dot input and there we have input slider.
27:29Now, for our input slider, we need several things.
27:33First, we need to give a name.
27:34So we'll call it date and we actually need to do some quotes.
27:37We'll do date range.
27:38We'll call it date range.
27:39But what do we want to visually call it for the user?
27:43We'll say filter by date range.
27:47And then we need to pass in a few different things like the minimum value for the slider
27:52the maximum value for the slider and then what the current value is.
27:56So we can do that all in one line, but I'm going to tab down.
27:59So we'll say the minimum value.
28:01So we'll say min is equal to then we're going to open it up.
28:05Now, if we go back into our data, the minimum value is this value right here.
28:11And then also, if we go all the way to the end, this value right here.
28:15But these are not formatted well because it's in a weird format that Pandas isn't going to really understand.
28:21So we need to use this little helper function that we created earlier to convert it into a string to
28:27date.
28:27So we're going to take this string to date and we'll say is equal to.
28:31And we're going to do string to date.
28:33Open up parentheses and we'll pass through that very first value.
28:37And so let's come back.
28:40Take this right here.
28:42It will come down.
28:43Now, what's going to happen is it's actually going to pass through this and reformat it.
28:47And we actually need this new format.
28:49So instead of the slashes, we're going to need dashes.
28:55And it looks like the year and then it's month and day.
28:58So we actually need to put this at the beginning.
29:00Just some small things to be thinking about a little bit.
29:05Now we'll come down.
29:06We'll do the max and we're going to do the exact same thing.
29:08So we can copy this over just like this.
29:12I think I need to come after this.
29:14We'll do the max and let's go back and get the maximum value.
29:18I think I knew what it was, but better just to make sure we have it.
29:23So we'll bring this in.
29:25So I'm just going to do 2024, 430.
29:29We'll do 4 and 30.
29:33And this looks great now in order to pass this into our visualization right here.
29:38And that's, you know, what we're doing.
29:40Actually, we can save this.
29:42Let's go ahead and save this.
29:43It won't be attached to anything, but we can at least see visually what it looks like.
29:47And actually, we forgot one more.
29:49We need a value.
29:51So let's get our value going in really quickly and then we'll be good to go.
29:56So this one's a little bit different.
29:57We need to take this string to date and we need to pass it through with list comprehension
30:03or for loop, whatever you want to do.
30:05But we're going to do string to date X and then we'll say for X in.
30:08And then we need to give it this range.
30:10So we need to give it this exact range.
30:12So we can copy this and then we'll do a comma and we'll give it the end.
30:18So that's the start and the end.
30:20And that's that when they're changing the ranges, it'll be more dynamic.
30:24So let's just save this really quickly.
30:27And I need to put this in brackets because this is, in fact, a list and parentheses.
30:34Man, I'm just making a little small errors in here.
30:37Let's go and try this one now and a parentheses.
30:40OK, yeah, the parentheses needs to be on the outside, I believe.
30:45Let's try saving that again.
30:47And there we go.
30:48And so what I was saying was, is we're passing through these two different values.
30:52And so now we can do different ranges and we can go just like this.
30:56So what we need to do is we need to actually pass this into our visualization.
31:01But it's going to be a little bit trickier than just passing it through,
31:05which is why we created our other helper function, which is the filter by date.
31:10So we're going to bring down this filter by date.
31:13We put it right down here because actually you could go either way.
31:18You can either put it here because we're going to filter by the date
31:22and then pass through this into this logic.
31:25And so it'll be filtering on two separate things, both the state and the date range.
31:29So it doesn't matter the order, actually, but we'll put it right above it.
31:33And so this is a function that we're calling.
31:36And what's it going to do?
31:37It's going to sort the date range and then we're passing through some options.
31:41One is data frame and one is the date range.
31:43And so this date range is going to be the input from whoever is placing in that input.
31:49We want the input to pass through and then we're just specifying what the data frame is.
31:54So let's come right back down here.
31:56So we're going to say this right here is equal to and you can do it kind of however you
32:03want.
32:03Actually, you can name this something different and pass it through.
32:06But, you know, we don't need to do that right now.
32:07We're going to pass through our data frame and then we're gonna do a comma.
32:12And that's going to be our input dot and we call that date range.
32:16So input dot date range and pass this through.
32:21So now this should be integrated into this one.
32:23Let's go ahead and save this.
32:26Looks like we're getting an invalid syntax.
32:28I think I might have messed something up earlier.
32:30Let's go ahead and try this.
32:32Should look a little more like that.
32:35Maybe I hasted something where I shouldn't have.
32:40We'll see when we run this.
32:42It looks like we need a colon right here.
32:46Making a few mistakes, but, you know, we live and we learn.
32:49So let's see if this is, in fact, dynamic when we are running this.
32:53So let's try moving this towards 2021.
32:57And there we go.
32:58So now the first one is in 7.13 to 2021.
33:04That is perfect.
33:05So we are working.
33:06We're working with, we're cooking with fire over here.
33:08So now we can keep them just like that.
33:12And now we can integrate this into all the other ones.
33:15And we're just going to do the visualizations.
33:16I don't think we need it in the data, me personally.
33:21So, but you can.
33:22Hey, if you want to go above and beyond, I'm not going to stop you.
33:24In fact, I encourage you, be better than me about that.
33:28So we'll just pass that through the exact same thing.
33:33And then we'll come down here and we'll pass this through as well.
33:37And whoops, we'll go right there.
33:41And let me go over.
33:43There we go.
33:43New listings, passing that through into this function.
33:47And we should be good to go.
33:49So now let's save this.
33:50Let's make sure it's reactive and dynamic for what we're actually changing.
33:56Let's try both filters.
33:58So I'm going to go short.
34:00Let's do 2021.
34:02Let's make sure they're all working.
34:04That one's not working.
34:07And that one's not working.
34:09So we're actually, we actually need to fix that.
34:14Let's see what's going on here.
34:17And that's because we forgot to change this.
34:19So we need this new listings right here.
34:22And then up here, we need it to be called this.
34:27All right, now it should work.
34:28Hey, listen, I made plenty of mistakes already in this project.
34:33But we live and we learn, don't we?
34:35So now let's change this.
34:37Let's go to 2021, 2021 and 2021.
34:43Perfect.
34:44So we are doing really, really good.
34:46Let's just check one real quick.
34:47Let's check California.
34:51Excellent.
34:52Excellent.
34:53And this is reactive to the state only.
34:56So this is all of our California data in here, but it's not reacting to the date.
35:00And so I think that's even better just so you can actually see the historical.
35:04So I think this is great.
35:05So now what we're going to do is we are really going to make this look a lot better.
35:10Because if you pull this up into, you know, the actual website, it's not very pretty.
35:15But we're going to change all that.
35:16And we're going to make this look a ton better so that you feel confident sharing this and
35:21being like, man, this guy really, this guy really knows what he's doing.
35:25So let's go back out of here.
35:28Let's pull this up.
35:29And let's go all the way back to right about here.
35:33The first thing that we can do is just give it a header.
35:35And that's going to make it look really nice.
35:37And actually, let's do it.
35:39Actually, when you start doing everything, it all kind of goes together anyways.
35:42But we'll do UI dot page underscore ops, and we'll just give this a name.
35:47So we're going to give this a title and we're going to say US housing app.
35:54So we'll call it the US housing app.
35:56We can run this and just take a look at it.
35:59Should be pretty simple.
36:01So there we have the US housing app.
36:04Next thing I want to do is I want to put both of these filters into a sidebar because
36:09this doesn't look super good just as is.
36:13So I want to place this into a sidebar.
36:15In fact, I just realized I never showed you this.
36:18I'll put this code.
36:19I'll leave this code in there so you can,
36:21you know, I keep that and then pass this through into the state choices.
36:25And in fact, you know what?
36:27I'm not I'm not going to save it for later.
36:29I'm not going to let someone else do my job for me.
36:32Let's pass this through really quick into these state choices
36:34and see what it looks like real quick.
36:36So we're going to remember we build that.
36:41Now the default is Arkansas.
36:44But if we want to choose United States,
36:47it's this NAN up here.
36:48So we need to work on that.
36:51And actually, we would need to rewrite some of our code in here to account for that.
36:57But what happens is, is we are filtering on the state names or state abbreviations,
37:04and we can still use them.
37:06But it's not going to be the default start like we have in state choices,
37:10which is why we did it this way.
37:12And it's just a little bit more intuitive.
37:14So I'm going to get rid of all this.
37:16Yep, there we go.
37:17And I'm going to rerun it so that we have what we're working with.
37:19Anyways, a little sidebar.
37:21But let's put this.
37:23Speaking of sidebar, let's actually put all this stuff in a sidebar.
37:28Because I don't like our filters just being out there.
37:31I want them to be looking nice.
37:33So what we need to do for that is with sidebar.
37:36Actually, it's UI sidebar.
37:38With UI dot sidebar.
37:40And we need to open up our parentheses, do a colon, and tab these over.
37:47I don't want two tabs here.
37:49Let's do a tab.
37:50There we go.
37:50Now, let's get this back.
37:52Now, all we should need to do is put a comma here potentially.
37:57Let's just run this and see what happens.
38:00See if there's any error in here.
38:02And there we go.
38:03So now we have these different options over here.
38:05And I might even label this.
38:08Let's, you know, if we're really feeling wild, you can label this.
38:11You don't have to.
38:12We'll just type in filter options.
38:15Do it just like this.
38:17And I need a comma, don't I?
38:19I'm going to get an error.
38:23I'm not getting an error, but that just looks, that doesn't look good.
38:27We're not feeling that wild.
38:28Let's go ahead and save this.
38:30This is looking better already, right?
38:31We have this sidebar.
38:33Now, in the previous lesson, when we were looking at this, what we did was we had the
38:38visualization on one page and then in a separate page, we have the data.
38:42Now, you can do that.
38:43And that's perfectly fine.
38:45We can even have a different page for each visualization.
38:48And it's quite simple.
38:50It's not crazy hard to do, but I want to go above and beyond.
38:54I want to create something that looks really good, that really impresses people.
38:57So we're going to keep it all on one page.
39:00It's going to be a one page or a one page app.
39:02But you can make it as complicated as you'd like.
39:04In the last lesson, we were looking at components and layouts.
39:07We had multiple pages up here in this nav panel.
39:10But what we're going to do is we're going to combine this and this into kind of one piece,
39:18one visualization.
39:19So you can look at the visualization and then you can tab over and look at the data.
39:24And so you can tab over and it's all in one place.
39:28And then we scroll down.
39:29This other one will be in its own thing as well.
39:32And so it's going to look really, really nice and kind of smooth when we do it.
39:35And I think you'll be kind of wowed at how it looks.
39:38So let's come over.
39:40Let's do all the code for it.
39:42And in fact, we need to add two more things up here and we'll get to that later.
39:49That's going to be a little bit more coding rather than or writing, you know, using pandas
39:54and creating some logic because I want some cards up there.
39:56I think it'll look really nice.
39:58But let's do these really quick and then we'll get to that after.
40:02So let's come in here and not with the sidebar.
40:05We're going to go past that.
40:06We're going to go down just to the visualizations and our data frames.
40:10So we're going to come in here and we're going to say with UI dot nav set underscore card underscore
40:18underline.
40:19Now, this was an option.
40:20I need to say UI.
40:21This was an option that I talked about when we were over here.
40:26If we go to references and shiny express, come down.
40:31We have this nav set card underline.
40:33And so this is the one that we're actually going to be using.
40:35I thought it looked really nice.
40:37So we're going to be using this and we need to give it a title.
40:40We're going to come in here and we'll give this a title.
40:43And you say titles equal to and call this the median list price.
40:48We need to tab all of this over.
40:52So let's tab this.
40:53This is the data frame and this.
40:56We need a colon here.
40:58Now, the next thing that we're going to do, and we'll separate a little bit, we're going
41:02to do a nav panel.
41:03Now, a nav panel is typically at the top of here, but we're doing this within the nav set
41:08card underline.
41:09So we're going to come in here and say with and we'll say UI dot and we'll say nav panel.
41:16So now we're saying within this panel, we're going to have two separate cards.
41:21We're going to have this and right down here.
41:23So we're going to have the data frame.
41:24We're going to have the actual visualization.
41:26We want the visualization to be first.
41:28And so that's going to be at the top.
41:30But then the next page, if you call it a page, the next panel is going to be all the
41:35data.
41:36It should be really neat.
41:37So let's select all this.
41:38Let's tab this over.
41:40So we need to give this a name too.
41:41We'll call this a plot and then we'll come down here and we'll do the same thing.
41:49So we'll come right here and this one is going to be our data, or we could call it a
41:54table
41:55or really whatever we want.
41:57Let's go ahead and run this.
41:58And it looks like I'm missing some colons here and right here.
42:02And just like that, that's going to look a lot better.
42:04Let's bring it up into the full web app so we can kind of see what it's looking like.
42:10My computer is huge.
42:12I don't know if you knew that, but my screen is ginormous.
42:14So most likely on your screen, it's not going to look like this.
42:17But here's what we have.
42:18We have this median list price.
42:20And then we have the plot and we can tab over to the table and we can tab back and
42:26forth.
42:27So when we change this, let's go to Arizona.
42:32When we change this and we go to the table, the data's dynamically changing, right?
42:36But now we have this plot here.
42:38So you have plot and the table.
42:40Now, what I was talking about before is we're basically creating this plot and table,
42:43but up in this page, so it's a completely separate part of the website.
42:48You don't have to do it.
42:49You can do it this way, which I think this looks really, really good.
42:52So let's come out of here.
42:54Let's go back.
42:55And we're going to do that exact same thing for all of those visualizations.
42:59And in fact, since we are going to copy and paste this, I'm going to add a little bit
43:04of extra stuff in here.
43:05Now, up here, we brought in something called FA icons or an icon SVG.
43:11Those are for like different icons you can pull in and make it look really cool.
43:15So we're going to say we're going to use that icon SVG and we're going to pull in for
43:20at least the plot.
43:21We'll do a little visualization.
43:23Let's make it start, you know, making this look nice.
43:25We'll do chart dash line.
43:28And you can always just Google that and, you know, look at the different stuff.
43:32But let's choose our icon for that one.
43:36And then for the table, we'll do a table.
43:40It's pretty, pretty simple.
43:44And let's try running this.
43:45And if we pull this over, you can already see it.
43:49Those are the little visualizations for our stuff.
43:53It looks really nice.
43:54Now we're going to pull this over and we're going to do the exact same thing for the other
43:57ones.
43:58So let's come over here.
44:00Let's copy this.
44:02And we'll bring it into this one.
44:05And we'll bring this one over real quick as well.
44:11Place it right here.
44:12And we need to tab this over.
44:14And then we need to take all of this and tab it over twice.
44:17So let's do tab tab.
44:19And then this one is going to be tabbed over twice as well.
44:24We'll do tab tab.
44:26Let's copy all of this.
44:28We're going to bring it down to our last one.
44:32There we go.
44:34And we'll take this table.
44:38Put it right here.
44:40Tab the table over.
44:42Or sorry.
44:42The UINav panel piece.
44:45Tab this over twice.
44:47We'll take this.
44:49Tab this over twice.
44:50And let's go ahead and run it.
44:52And let's take a look.
44:54So now we have our median list price.
44:56This is not median list price.
44:57We need to rename that.
44:58But we have median list price, median list price, median list price.
45:00These are all our visualizations and the data associated with it.
45:03So now we just need to name them properly.
45:07This one right here is called, these are our new listings.
45:10So we'll say new listings.
45:15And if we go up, this is not the median.
45:19This is the home inventory.
45:21So we'll call this home inventory.
45:25And let's save that.
45:26And there we are.
45:27You can already see it's a filter.
45:29We don't have to.
45:30We don't have to see it.
45:31But that looks really good.
45:33So now we're really close.
45:35We're doing great.
45:35I think this needs a little bit extra.
45:38This is actually great stuff.
45:39But at the very top, we're going to add two extra stuff.
45:43You didn't ask for it.
45:45But that's OK, because I'm going to give it to you anyways.
45:48So let's go back over here.
45:50It's always nice to have some type of like card at the top,
45:53not just straight into the visualizations,
45:55something that kind of gives some over, you know, high level information.
45:59And there's gonna be two things that we're going to do.
46:01So I'm going to put some comments here.
46:04The first thing that we're going to do is we're going to put the price.
46:07So we have this median list price here.
46:09But we're going to take the median list price as it is currently,
46:13like the current, the latest data.
46:15So in the latest data, what's the current list price?
46:18So this is going to be current.
46:20We'll say current median list price.
46:23The next one that we're going to be doing is going to be for home inventory.
46:26So we'll say home inventory, which is,
46:30let's see the second one, the home inventory.
46:32So we want to see what's the change from one month to the most recent months.
46:37So from March to April, the second to last to the latest.
46:42We'll look at the percent change.
46:43So we'll look at percent change.
46:46Where's that percentage?
46:47There it is.
46:48Percent change.
46:50There we go.
46:51Now, this does require a little bit of writing things out,
46:54but it's going to look really, really nice.
46:56So let's go ahead and write it out first and then we'll define it and run it.
47:02And then we'll make it look really nice and all that good stuff.
47:05So we'll render dot UI and within this render at render UI, you have that.
47:13We'll define our price.
47:15This is going to be our current price.
47:17Now, this may seem really easy because it's not,
47:21uh, you know, we're just trying to select the last price,
47:24but if you don't know how to do it, that's okay.
47:25I'll show you how to do it.
47:27And we can actually do this in one of two ways.
47:29We can actually use this data right here or we could use the original data frame.
47:36I think it might be easier to use this.
47:38Let's bring this back a little bit.
47:41Go back to go back to go back to because this data sits a little bit easier.
47:46So we can use the indexing a little bit easier.
47:49I really should have made this into a function.
47:52That would save a lot of time, but just ignore that.
47:55Pretend, you know, I know what I'm doing,
47:57but let's just call this data frame is equal to, and we'll do that.
48:01So let's take this.
48:03And what we're going to do is when somebody filters right here, they're going to say,
48:08oh, I want, um, Arkansas.
48:11We don't care about the date range.
48:12We just care about the very last date.
48:14So we do need to take in that input, that input logic.
48:18And so we need to say, uh, for the data frame, we'll say data frame,
48:22uh, for that column.
48:24So that's going to be the state name.
48:26So for the state name, we're going to say it's equal to the input dot state.
48:33And that's from that input state right down here.
48:37Now we may actually need to move this under this.
48:42Just, I'm not a hundred percent sure actually,
48:44but we're going to put it right here.
48:46This is another part of the UI or another visualization.
48:49So it should be under the sidebar anyways, but we have our price.
48:52So now we're taking this input and we need to finish this real quick.
48:57It should have this at the end and this shouldn't be there.
49:00And then we take the data frame and we're going to say we want the last value.
49:05So we'll actually call this last value.
49:07So we'll say, uh, the data frame dot I lock.
49:10So we're accessing the index now.
49:13So we're just going to do minus one, minus one.
49:17So within that data, uh, within this data frame, we're taking minus one, minus one,
49:20which is going to give us the very last value, but then we need to return it.
49:24So now, uh, within this function, we have to actually return that last value and we should
49:29form a, we shouldn't just say last value because, um, I mean, we can, let's go ahead and save this.
49:34So if we come over here, let's, let's see if this needs to be in quotes.
49:42There we go.
49:43So we're getting an error index.
49:45One is out of bounds for axis zero.
49:49Let's see if it's working for the other ones.
49:51It is, uh, so it looks like just the United States.
49:54And that's again, because the state name isn't in there.
49:58Um, I actually think I know a way to solve this.
50:01Let me try to write it out real quick.
50:02And if it works, then, uh, I'll just, you know, kind of share the code with you.
50:06All right, guys, I figured it out.
50:08Uh, took a little bit of reworking the logic.
50:11Cause I had to, uh, combine where the country and the region type, which is right here.
50:19Um, I had to, let me go way back over.
50:21I had to combine where the region type is country to here so that the United States could be here.
50:25So then we could select this last value, uh, right here.
50:30So you don't have to write all of that.
50:31Just go to the GitHub and you can download it.
50:33Uh, but it's going to pull, uh, that very last value.
50:37And so now when you have nice United States, it works.
50:39Uh, when you pick Arizona and everything like that.
50:42Now, the last thing we need to do before we actually return it,
50:45cause some of these numbers are crazy long.
50:47We need to format it properly.
50:50So let's come right here.
50:52We're going to say F and we'll do a dollar sign.
50:54And we'll say last value, then we'll do a colon comma.
50:59And then this is where we actually format the, uh, the actual decimals here.
51:03So let me say, uh, zero F then we'll close that right there.
51:08So let's look at this.
51:09So it should have that dollar sign and format the decimal a little bit better.
51:13Let's take a look.
51:14And that looks really good.
51:15Now we're going to put that in a card in a little bit, but that value is what we want.
51:19And now we need another value, which is going to be the percent change for the home.
51:25And let's bring these down.
51:29So we already did that one.
51:31And now we need to get the home inventory percent change.
51:35That's going to be a lot easier.
51:36We can actually take this entire thing.
51:38We're not going to call it price.
51:39Whoops.
51:40We're not going to call it price.
51:41Uh, we'll bring it here and we'll call this age.
51:45And the reason we need this because we need to take the last value.
51:49And calculate the change from the second last value.
51:51So this part's actually, uh, you know, not as hard.
51:55This is the last value and we'll do right underneath it, the second last value.
52:02And that's really easy because we're going to say that's equal to,
52:06and we can get rid of that.
52:08And it's just going to be a minus two here.
52:09So we're selecting the column before it or the row before it.
52:12And so now we just have to do our calculation.
52:15So now we do our percentage underscore change is equal to.
52:20And, and the calculation is last value minus the second last value.
52:28And then we divide that.
52:31There's the divide.
52:32There we go.
52:32By the second last value.
52:34Then we multiply it times 100.
52:36Now we just need to wrap that all in little parentheses here.
52:41And then we can return the percentage change.
52:47And let's run this.
52:48And I'm not seeing the percentage change.
52:51I'm not seeing that because we didn't render it as a UI.
52:55Of course.
52:56It's always, it's always the little things.
52:58You know what I mean?
52:59It's always the little things that get you.
53:01Well, let's see if it shows up now.
53:02And it should, I think right beneath it.
53:05Okay.
53:06There it is right next to it.
53:07So it's a 1.8% change.
53:09We need to format that quite a bit better.
53:12So let's format this percentage change.
53:14And then we should really be doing good here.
53:18We're going to come right here.
53:19We'll do the same thing.
53:20F and then a double quote.
53:21And then we'll do our percentage change colon dot.
53:26We'll do two F for this one.
53:28Then we'll do a close the squiggly brackets.
53:31That's what I like to call them.
53:32And then we'll do a percent sign and we'll close it.
53:35So let's go ahead and see what this looks like.
53:37All right.
53:37So that looks a lot better.
53:38So now let's actually use these and format these and make them look really nice.
53:42Now we want these side by side.
53:44Like I'm thinking, you know, this looks really good.
53:47I want one here and I want one over here.
53:49Now we can do that using something called a column wrap.
53:53And so that's what we're going to do.
53:54So we're going to say, let's actually come underneath here.
53:58We'll say with, and actually, no, I shouldn't do it.
54:01I should do it right here.
54:04So with UI dot layout underscore column underscore wrap.
54:10So with this layout wrap, we're going to put this into a value box.
54:15So this is just saying we're going to put one next to another.
54:17Now we actually have to, you know, put it in something.
54:21So we're going to say with UI dot, we're going to put this in a value box and we can
54:28label
54:28this value box, add different stuff.
54:30And maybe we'll do that in a little bit, but we just need to put this all over.
54:35So let's double tab this.
54:37There we go.
54:38And let's just run it and see if that works.
54:41And it looks like I need a colon here.
54:43Let's see if this works really quick.
54:45And saying we need a positional argument.
54:46In fact, I just realized that this is the second one.
54:50We need to put it up here.
54:53And then put this over twice.
54:57But we also need this, another value box anyways.
55:01So we'll put this right here and that's already there.
55:05Let's try running this within the value box.
55:09We're getting an error.
55:10Let me try something real quick.
55:12I'm going to write showcase is equal to and I'm going to give it an icon.
55:17So I know this is something I've done in a previous one.
55:20We just need to do an icon.
55:21I'll do a dollar sign on this one.
55:27And let me copy this whole thing.
55:29We're going to give the other one a different thing.
55:32We're going to give this one a house.
55:35So let's say house right here.
55:37And we need to close that parenthesis it looks like.
55:40All right, let's try running this.
55:42And I actually think a value is like a title.
55:45I don't even think we needed that.
55:48We can, let's give it this actual name.
55:51Let's give it this right here.
55:52I'm trying to click on this.
55:54Let's give it current, median, list price.
55:57And then we'll put this right here.
56:00And then I think this may be the value that it's looking for.
56:05Let's go ahead and try it.
56:06And there we go.
56:07Let's take a look.
56:10And that looks really, really good.
56:11Now, this is a 1.8% change, but it doesn't say if it's positive or negative,
56:15because it could have gone down or up.
56:17Let's come back really quick into that percentage change, which should be right up here.
56:23Let's give it a sign.
56:25So we're going to say the sign is equal to, and we're going to give it a plus,
56:30if that percentage change, let's bring that down right here.
56:34Whoops, I need to copy it.
56:36If the percentage change is greater than zero.
56:39So if it's a positive number, it'll be a positive.
56:42If it's not, we'll just say else, maybe we'll give it a minus.
56:46But now we need to put that sign right over here.
56:49So we'll do this.
56:51Let's try running this.
56:52So let's take a look.
56:53Let's see what we got going here.
56:55Now, there's so many other things that we can do with this,
56:58but I think this looks really great already.
57:01But we could add different pages.
57:03We could add different colors.
57:04I'm just, I mean, we've done a lot in this video.
57:08So I mean, I could just keep going, but this looks like a really solid app, right?
57:12We can, people can come and click and they can filter the dates and the states.
57:17This is a very fully functional app right here.
57:21This is great.
57:22So what we're going to do now is we're going to deploy this.
57:24So let's come back over here to our PowerShell and do rs connect.
57:29We'll do shiny deploy dash n.
57:33And then it's Alex, the analyst.
57:36And then you spell it right.
57:38Alex, the analyst shiny app.
57:41And let's go ahead and deploy this.
57:44And there we go.
57:45So that looks really good.
57:46And I did that wrong.
57:47I got really, we need to deploy the shiny.
57:50That's it.
57:51Then I can copy this right here.
57:57All right, that should work now.
57:59And there we go.
58:00We have our fully functioning web app.
58:03This is great.
58:04I mean, I'm going to look at South.
58:06That's where I live.
58:07I live in South Carolina.
58:08I'm going to look at South Carolina really quick.
58:10312,000 inventories going up.
58:12So you can see from one to another inventory is going up.
58:16But inventory has been going down.
58:17I don't know if you guys have been following the housing market, but this inventory is going down.
58:21New listings.
58:22It's pretty cyclical with a lot of people over the summer will list their house.
58:28And so very cyclical, very interesting.
58:30And then home pricing, really going up over here.
58:33This is really great.
58:35This is a fully functioning web app.
58:37And you can use this.
58:38I think you should build on top of this.
58:40Keep going with it.
58:41Add different pages, resources, you know, different things.
58:44Maybe different filters that people can do and incorporate it into your visualizations.
58:48I mean, but this is awesome.
58:49Um, so if you really get all this way, I know this was tough.
58:53Um, and you know, these projects, I could have made a lot simpler, could have been very,
58:58very basic, but I wanted to make it something that you could really use for your actual portfolio,
59:02your personal projects.
59:04Cause this is a tough one.
59:05But once you start really getting into it and you start, you know, using shiny,
59:09it all just makes a lot of sense.
59:10I feel like, you know, I can go and build almost anything now.
59:12So I hope you enjoyed this.
59:14I really had a lot of fun making this and recording this, and I hope you did too.
59:18We ran into some errors and we got through it.
59:20Um, and that's just all part of the fun.
59:22So huge shout out to Posit making this awesome tool for us all to use really appreciate it.
59:27Um, and if you haven't, you know, go ahead and learn shiny, like take this
59:30series and learn it and use it.
59:32Cause these kinds of things are really, really awesome.
59:34So again, thank you for watching.
59:35If you liked it, be sure to like, and subscribe, and I will see you in the next video.
59:48Bye.