Real-World Python Dashboard Project w/ Quarto! (Airbnb Review Analysis)

Transcript#

This transcript was generated automatically and may contain errors.

Hey what's up everyone and welcome back to another video. In this video we're gonna see how we can build dashboards using Python and Quarto so that you can put together dashboards like the one you see on the screen with different types of components, different types of graphs, even different pages that have tables and some interactivity in them. We'll start with the basics and kind of work our way up to this.

There's no prereqs to watch this video but it might be helpful to check out the recent Quarto crash course we posted which I'll link in the description and if you work more in the R space I might also recommend checking out Mine's recent tutorials on Quarto dashboards which are also linked in the description.

To get started there's a github repo that has some data in it so it specifically has some Airbnb data both on all-time listings ratings and some specific reviews that the Airbnbs were given. This data came from a site called insideairbnb.com and basically downloaded some data from the Boston area there. I augmented it very slightly but I feel like it's a good data source to use to kind of build a real world-esque dashboard with Quarto and Python.

All of that's linked in the description. In addition the finished dashboard file that we'll have complete after this video will be found there and you can also see what libraries are needed via this requirements.txt but we'll start from scratch so I'm going to just delete all this stuff and the first thing we'll want to do is create a QMD file so I'll call this dashboard.qmd and when you're building a dashboard in Quarto we always want to start with specifying our parameters and specifically we'll specify the format dashboard.

You could put that all in the dashboard QMD file but it sometimes makes sense to you know keep things clean by isolating it and putting it in its own functions in its own file.

And then we go to our dashboard dot QMD, we can import our — from data helpers import load listings and load reviews, we can set our reviews and our listings like this and that should be good there for getting our data.

And then if we wanted to actually populate our data — so for this last value we could pass in some code here, reviews overall was the column and I think we can just take the mean and I do like this syntax with f-strings showing two decimal places as a float. Let's rerun our dashboard — cool and now we actually have some real data here in our dashboard.

Adding charts

Now let's maybe add some useful graphs to our data so what we might want to know about is how have our listings been trending over time. So maybe we add a row, our next row is like plots, and let's think what we might want to do here. We might want to aggregate by month so we have our reviews and we have that month column we just saw.

So if we wanted to plot the data the average review by like month or something like that, let's think how we could do that, we could probably do a matplotlib plot pretty easily.

And you know you're going to want to customize it and style it a bit more so maybe you add a title like average rating past six months. I think it's always a good idea to like add a thicker line, I think just when you're dealing with this everything should probably be a bit bigger.

I use github copilot in my VS code and I often will do something like make my matplotlib plot line thicker, make the axis labels larger. That's a good start, see if it generates me good code.

And you know really as someone that's running Airbnbs what I would want to know is like okay in the past six months are we trending upwards, are we trending downwards, that's gonna start helping me understand overall trends. So maybe we're implementing a bunch of solutions to help improve our work, you know based on this trend line I kind of have a sense of okay are the changes we're making actually working or not.

So maybe we also wanted to add a plot that's just a histogram of the counts of each different type of rating. So rating counts — that's going to be equal to reviews overall dot value counts dot sort index. That looks right, we can print that out real quick just to check.

If we have a four point six four overall you'd expect most of them to be five stars and much less to be one and two and three stars.

And I think one thing that I would recommend is passing in a color that's similar to our secondary color. I could use this little inspector tool, I can inspect this color and then I could you know make my line colors match. I just like having uniformity in the colors that is in a dashboard that I'm working on.

Adding a map with Folium

All right let's maybe also add another row and we'll make an actual map of our listings. The best way to do this I find is using this folium library so I'm going to import folium here up at the top.

And our map center — so let's look at our listings again, we have columns called latitude and longitude here, so we want to grab those. The map center then is going to be listings dot latitude dot mean, same thing for our longitude.

And then we want to iterate basically over our listings and add markers like this. So I could do is for index row in listings dot iterrows — look at that autocompletes it pretty well.

I can add some custom HTML to each marker that we add so I might paste in something like this, we add this basically custom tooltip that has our name, the rating of the property, and the price per night. And then I can add a tooltip to our marker specified as tooltip.

Cool, instead of having color blue there's only limited colors here in the folium icon. It kind of blends in with the rest of our details and you can see information about each of these listings, you could zoom in, you know look a little bit more about them.

Adding pages with interactive tables

All right cool, let's add some different pages to our dashboard that has you know maybe some interactive tables. So I'll add another page, I'll call this like listing details, and then I'll do another page called recent reviews.

One library that I like a lot for showcasing tables inside of Quarto is this itables library. So I'm going to do import itables and then what we can do down here is we can just do something like Python itables dot show and we can do just like our listings to start.

See we got a table here, it's got a lot of stuff in it so we probably only want to have certain columns instead of having everything. But it is cool, we could search then by like you know just ones in the south and how about just Beacon Hill.

So there's different ways you can search these interactive tables but maybe we wanted to just specify specific columns related to ratings.

So now we have a table that looks like this which is pretty good. Obviously it's not super helpful though because we have these rating columns but we also would want like the name of the property or something.

So I might do like call this display columns and I might add you know my name here of the property, maybe the neighborhood or something, maybe I also add the price as one of my display columns.

And one thing that's cool is if I had this, if I was trying to share this with a team member to understand, help them understand our rentals, I would probably give them you know this table and tell them hey you know maybe look at like the reviews that I have the least amount of accuracy or you know the least cleanliness and we can kind of start targeting which homes to fix up based off of this.

I found sometimes you can customize this and tweak this in a way that makes more sense, like for example if you wanted to make sure it wrapped and fit into the space of your screen you can add some custom CSS.

And then in my dashboard QMD file I do style or I think CSS it will do style dot CSS. We run this and we see we get it wrapped basically in a different way. I mean basically we can just affect it, just formats it a bit differently. I'm not going to go into huge details here but just kind of know that you could add this style dot CSS and you can style different elements on the screen as needed.

Okay that's pretty good, if we wanted recent reviews table we could do something similar, we probably have to join our reviews with the listing. And we would want to display probably the name of the listing, the date, and the comments of our reviews.

I also might actually recommend adding an overall score and the reason for that is if you're doing an Airbnb listings review it's sometimes really helpful to sort by lowest rated comments and you can kind of use these reviews to help you identify specific things that you want to improve in your dashboard.

So you know if I only wanted the stylish downtown studio yeah I can start typing it in, filter by that. Cool, this all looks good.

Plotly charts and neighborhood breakdown

I mean honestly that's a lot of the basics. I think one thing that's worth showing is that we could also put like a plotly graph in here instead of using matplotlib. So to do that a similar plotly graph would be something like this. So we have let's say we wanted to show this based on the neighborhood of the listing.

So we now see some information about different neighborhoods as part of our dashboard.

Quarto vs Shiny and combining them

One thing that you might be wondering about as you start getting comfortable with building dashboards in Quarto versus let's say Shiny is like when do you use one over the other. I think that if you're you know sharing something kind of at static intervals, you don't always need the data to be the most up-to-date, it's totally fine to use Quarto.

One thing that I'd recommend is to do embed resources equals true. One cool thing about Quarto is that like this file, this dashboard dot HTML, you could share it with you know a team member or something and they have access to this whole little dashboard just via that HTML file, whereas if this was a Shiny app they would need to run a server or something to have this up and running.

So it's like kind of cool, you could generate you know a static dashboard basically and you know do that on you know every month basis, and then as long as someone can open up you know the HTML file in a web browser like this you can see all this information for the let's say last six months.

So yeah if it's a static intervals I think Quarto is good, if you need it to always be living and you want additional interactivity — so imagine you wanted additional interactivity where there was like a sidebar and you could toggle on or off different neighborhoods — then it might make sense to go to Shiny.

If it's a static intervals I think Quarto is good, if you need it to always be living and you want additional interactivity then it might make sense to go to Shiny.

And we've posted tutorials on Shiny, building dashboards in Shiny with Python, I'll put a link for that in the description as well. Check out that series if you want to really understand some you know more interactive dashboards.

One cool thing that you can do though is you can actually specify server Shiny and start combining Quarto with Shiny. So you can do stuff like add a sidebar.

I'm going to just kind of preview this, I'm not going to go into the details here, maybe in a future video we'll go into the details, but I could do like from Shiny import reactive and UI and then I could do UI dot input checkbox group.

So this basically takes our reviews joined but filters out the neighborhoods that are selected or only filters in the neighborhoods that are selected. And then you could imagine down here where we render the table instead of having this code I might do something like at render table return filter reviews.

As we can see here if I pop this open and we look at our dashboard now if I untoggle these we ultimately get no data. So there's cool interactivity you can add by combining Shiny with Quarto but I'm not going to go into huge details there right now.