Quarto Crash Course | Create Professional Reports, Dashboards & Websites w/ Markdown & Python Code!
Welcome to this comprehensive Quarto crash course using Python! Whether you're a complete beginner or an experienced user, this tutorial covers the topics you need to know about the Quarto publishing system. We'll explore: - Basic setup and installation - Creating HTML reports, PDFs, and interactive dashboards from your Python script or Jupyter notebook. - Building presentations with Revealjs - Customizing outputs with CSS and layouts (fenced divs, classes, and more) - Working with parameters for dynamic reports - Publishing to Posit Connect Cloud - Creating complete websites - Automated report generation Perfect for data scientists, analysts, and developers looking to create beautiful, reproducible reports from their code. We'll use Python throughout the tutorial with real-world examples using movie analytics data. Let's dive in! Video by @KeithGalli Github repo: https://github.com/KeithGalli/quarto-crash-course Deploy with Posit Connect Cloud! https://pos.it/keith_qc #python #quarto #posit — Resources Mentioned — Slideshow example: https://quarto.org/docs/presentations/revealjs/demo/#/title-slide Slideshow example (source code): https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/demo/index.qmd Example HTML report: https://019302a7-e9e3-3454-3575-23148999a7f7.share.connect.posit.cloud/ Quarto Gallery: https://quarto.org/docs/gallery/ Bootstrap Icons: https://icons.getbootstrap.com/ Video timeline! 0:00 - About the Crash Course 0:50 - Quarto Overview 2:12 - Installation & Setup 6:22 - Markdown Basics 8:46 - Quarto Markdown Features 19:37 - Quarto Styling & Formatting (fenced divs, CSS classes, etc.) 34:53 - Parameters & CLI Options 40:46 - HTML & Publishing 49:46 - Static Docs (PDFs, Docx) 54:53 - Dashboards 1:06:50 - Slideshows (Revealjs) 1:16:11 - Websites 1:19:52 - Automated Report Generation (Parameterized Reports)
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hey what's up everyone and welcome to this Quarto Crash Course. So in this video we will start with the absolute basics. What is Quarto? Why should you use it? How do you set up and install Quarto? And then throughout the video we will showcase a lot of the features and functionality of Quarto. And we'll end with some more advanced topics. Overall there should be something in this video for everyone whether you're a complete beginner or you use Quarto as an integral part of your day-to-day workflows.
The goal of this video is to have something for everyone to present interesting and useful concepts about Quarto in a succinct manner. A timeline for this video can be seen on the screen as well as in the video description. Feel free to jump around, watch what you want, skip sections, do whatever. Let's jump right into it.
What is Quarto and why use it?
Alright to start what is Quarto and why should you use it? Well the way that I like to think about Quarto is that as developers as data scientists we typically have a way that we like to edit and run code and run analyses and that might include using like you know VS Code, writing Python scripts, writing code in Jupyter notebooks, etc. And these formats they're great for us but they're not always the most friendly to less technical people, business stakeholders, etc. So where Quarto comes in is that it's an open source scientific and technical publishing system that's all based around these Quarto markdown files. So with Quarto you can ultimately output these Quarto markdown files into very digestible formats such as slideshows, HTML websites, PDF analytics reports, dashboards, etc. So you can really bridge the gap between yourself as a data analyst, data scientist, software engineer and these stakeholders.
Quarto comes in is that it's an open source scientific and technical publishing system that's all based around these Quarto markdown files. So with Quarto you can ultimately output these Quarto markdown files into very digestible formats such as slideshows, HTML websites, PDF analytics reports, dashboards, etc.
Installing Quarto
So let's see how we can install Quarto then we'll walk through a couple of markdown basics before getting into Quarto specific markdown and the features you have access to when you use Quarto and VS Code.
To get started with Quarto you can look up Quarto install, click on the get started page. The URL is quarto.org slash docs slash get dash started. There's a few ways to set up Quarto. One is you can download the Quarto cli, install it and then you should have access to the command line interface and then I recommend clicking on the VS Code option to follow how to set up the extension. Alternatively you can use a terminal and I'd recommend creating a virtual environment.
So I'm going to create one in my EMS directory called Quarto. I'm going to go ahead and activate that so I can do that by doing source. I think I can just do with a Mac I think I can just do EMS Quarto bin activate. I might actually have to do source first.
So now we see that we have activated the Quarto virtual environment and I can then go ahead and do a pip install Quarto dash cli.
So either install Quarto using this button right here or you can do it the terminal way I just shared. Once you've done that go to a directory that you want to edit some Quarto related code. So I'm going to do that in a directory I have called code. Then I have a directory called Quarto and then I'm going to navigate into this folder I have called Quarto crash course. I've shared some code on GitHub that is related to this crash course. You can feel free to check out the link in the YouTube video description. Keith Galley slash Quarto dash crash course to find a bunch of information on Quarto. I've linked that in the description. But you also are free to work wherever it makes sense to you. And then I'm going to open this up in VS Code by doing code dot slash.
Setting up the Quarto VS Code extension
Okay so now I'm in my Quarto crash course directory. So what we're going to want to do is we're going to want to install first the Quarto extension. So you can open up your Quarto extensions. You can look up so on MacBook you can do command shift x to open this window. You can also go up to the top go to view and then click on extensions to also open this. And you're going to look up Quarto. Click on it and make sure to have this installed. Then we're going to go back to our our folder and we're going to create a file called Quarto. Or how about we just call this index dot QMD. QMD stands for Quarto Markdown. And it is the format that we use to generate all the different formats that Quarto can ultimately output. To confirm you have everything set up correctly you should be able to do something like title.
You can just follow my lead here. And then add some markdown. And to confirm that everything is installed correctly you should have this little option over here on the top right if you're using VS Code. There are other code editors that you can use. As we can see on this screen feel free to look at the option that makes most sense to you. You might click on this text editor option if you don't see something listed and there'll be a few different other options there. If you are using VS Code though we should see this VS Code Quarto extension up here on the top right. And if you don't see it you can click on the top right, click that, and we should see our Quarto over here.
Markdown basics
Let's start this tutorial by really quickly talking about a markdown. So right now we've already set up some basic Quarto Markdown but we'll start by just looking at markdown. So this first thing that we see here in markdown is a header. So this is an h1 tag. We specify that by doing just one pound sign. We could also do slightly smaller headers by doing two pound signs. We could do even smaller headers by doing three pound signs and so on.
If I render this we see all of that. Other things that you can do in markdown is a list of items. You could also do numerical lists, a numbered list. We could add hyperlinks by doing stuff like this. We could add images by doing something like this. You can look up markdown basics and you'll find all sorts of great resources. I could do bold text. I could do italicized text. So a bunch of things here. Go ahead and run this and we see all this different stuff with our basic markdown. If you are curious about markdown, I recommend looking up markdown basics Quarto and you should find a page that has a bunch of the different options of markdown that you can use.
Markdown is pretty universal. There's slightly different flavors of markdown but the base things that you see on the screen right here will work in any sort of markdown renderer. One place that you might have seen markdown before is if you're ever working on a github repo you'll probably have a readme file that looks like this. A cool thing is if you ever like wanted to you could always render that with Quarto as well just so you could see your readme in a nice clean manner. Whereas sometimes looking at the the raw markdown can be a little challenging.
Quarto markdown and YAML settings
All right now that we've covered some basics of markdown let's actually get into Quarto markdown specifically and why Quarto is so helpful. So whenever you're starting up a Quarto markdown file I recommend starting with these three dashes and I also recommend if you're using like Visual Studio Code to close your three dashes. So right here in between these dashes we can specify all sorts of YAML settings for our Quarto markdown. So we can do things like specify an author. We can specify a title and we can see the reason that I like to have these these fully closed is that you'll start getting autocompletes if you're using VS Code. I will call this Quarto Crash Course and then we can add a subtitle.
Perfect I'm using github copilot behind the scenes too that's how you're seeing all these autocompletes. We can specify a date. So it is 2024 11 11 right now as I record this. Convenient for us here in the United States as well as people abroad that use a different day and month orders here so I'm very thankful that it works for all of us right now. Let's think of other things like one thing I like too is like you can just kind of start typing something so if you ever forget what an option is you know start typing in what you might think it is and you can see all these nice helpful autocompletes. But I think this is a good starting point we have some settings here and we can go ahead and maybe add a header. This is a quick guide to Quarto and I can render this.
We see that these YAML options gives us this nice look to our rendered document and then we can include our standard kind of markdown to render other elements. One of the first things that you'll want to know about Quarto is that we have the options to render all sorts of different types of outputs with Quarto. So by default we're going to be rendering a html file but I can very easily specify format and I can say something like pdf and now if I run this we see we have a pdf document here and it looks a little bit different but nicely enough it still is formatting things.
I could specify a revealjs format and if I add a little bit more information we can see that when this is rendered as a revealjs format it actually creates a slideshow. We'll dive into the details of all these different formats in a little bit but it's good to know that you have all these options. Let's delete this real quick and we'll leave it as the default html format.
Another thing you'll start to notice is that we start adding all these files over here and it can get a little bit messy if we are generating tons and tons of different documents. So one thing that I like to do is that you can specify this special kind of project formatting file called underscore quarto dot yaml and in it you can do project and you can do output directory and I could specify specify something like outputs and now when I run this index.qmd we'll see that instead of creating the outputs in our you know standard root directory it's actually putting them in this outputs folder. So also move index.pdf there too.
Embedding code in Quarto documents
We also really start seeing the benefit of quarto when we start seeing what types of things we can embed in our quarto docs. So by including these three tick marks so this is right above the tab mark on my keyboard you can insert our code you could insert python code you could insert julia code etc. So I'm going to insert some python code so I'm going to add this brackets python and then I'm going to close the brackets and I'll do something like you know print hello world. I could make this even more fancy I could do something like for I and range 10 print hello world. So nothing crazy. I can run cell and we see we see 10 hello worlds. One thing that is cool is I can go ahead and generate this as a quarto markdown document or render it as html and we see now the code nicely formatted and the output is embedded in our quarto doc.
So the combo of like using this markdown and also embedding code and the output of the code such as visualizations easily using this quarto markdown format is super super helpful. Some of the features of quarto though you might not always remember so one thing that I also like to highlight is that there's also a visual editor. So if I right click I see that there's this option to edit in visual mode. So this is available in VS Code. It might be available on some of the other text editors as well but I know that it works well here in VS Code. So if I say edit in visual mode now I get this new interface that is easy for me to do different things if I forget the markdown specific syntax.
So I could create a let's say insert a new code cell. I could insert a table here so maybe I wanted a three by three table with the caption example table. We see we get something that looks like this column one, column two, column three and I could add all sorts of information into this table. Look at that the alphabet. So tables I could also insert let's say like I maybe I forgot how to insert an image. I could you know very easily upload an image this way. I could insert a citation. So this is pretty cool. So let's say you need to cite an article or something. Oftentimes they have this doi link so like in this tutorial specifically we will be using some movie data set data and I originally got it from Kaggle.
So one thing that I could do via this visual editor is I could open up chrome window. I could go to the Kaggle data set that I got this from. So type in Kaggle and I specifically use this full tmdb movies data set. I'll make sure it's linked in the github slash maybe the video description so that you have access to this. But basically there's this doi citation. I can copy this digital object identifier. I can go back to my VS Code window. I could paste this in and now we see that we have the option to embed specifically this link. If I now insert that we see that we have a citation and if I render this we see we have our table. We have our citation that we just added and we even get automatically this reference page.
So some of the stuff especially like the citations I feel like I might not remember how to do exactly with the markdown specifically. So this visual editor is super super helpful and we can easily go back to the source mode by right clicking and editing in source mode and we see we have things that are added here nicely that might not have been easy to do if you just were trying to memorize all the markdown. You see that it also added this bibliography page too.
Working with Jupyter notebooks
One other really cool thing for Python developers out there or maybe anyone that uses Jupyter notebooks is we also can edit our Quarto markdown as a Jupyter notebook. So you can either start it as a Jupyter notebook or one cool thing is that you can easily convert a existing Quarto markdown file to a Jupyter notebook by doing quarto convert index.qmd and now we see we have an index.ipython notebook and so if you prefer to work with IPython notebooks such as this you can easily have a Jupyter notebook and you can even render this Jupyter notebook. So if I added another code cell so how about I did something like i equals zero while i is less than 10 print instead of hello world how will we print i. Some really exciting advanced code here. Python environment.
Okay we have this and now I could go ahead and with my terminal I could do quarto render and I can render this index.ipython notebook and I do get and we see our index.html. I guess it didn't output it in the outputs folder that is kind of a standard way with our QMD. There might be an additional setting that you can do to do that but it is cool to know that you can directly output it via the IPython notebook and if we look at it we do get all these code blocks.
For now I'm going to stay in working with the quarto markdown file so I'm going to go ahead and delete this. I'll delete this index.html as well and we'll stick with this index.qmd and I might clean up some of this stuff temporarily.
Fenced divs and custom styling
Let's say we wanted to style certain sections of our quarto document in one way and we wanted to style other sections in a different way. We can use what is known as a fenced div. So let's say we wanted to add some custom styling to this second header and kind of that whole section. A fenced div can be specified with any number of colons. I think it's any number. It might need to be three or more but as long as you match the colons that's really what's most important and then within this fenced div we can specify some classes. This is going to be a class whatever our class name is and then we also have access sometimes to these sometimes classes and I'll specify when you don't use the dot and when you use a dot. I think it's easiest to start with just looking at using the dot. Well quarto gives us access to some special things and the typical way that I figure out what I have access to is that I could go to the documentation and in the readme there's a page that I find quite helpful.
So if you look in the documentation you'll find specific like options such as here we see an example of a class called PanelTabSet and if we use this there's different types of built-in classes so PanelTabSet is an example of a built-in class. If we add that to our Visual Studio code so let's do PanelTabSet and how about I actually make this fenced div all of this. Now what we're going to see if I run this is two tabs set up as a panel so that's one built-in option use the documentation to help you find these different built-in options that we have available to us.
Another thing we could have done is let's say instead of using the PanelTabSet how would I define a class is just called like VeryRed so there's nothing actually called VeryRed so if I run this like nothing happens when I surround it with VeryRed but if I go ahead and add an additional file so right now we have these files if I add an additional file called styles.css and I define a html or I guess a css class called VeryRed so I specify the class with the period and I make the color red and now if I run our file that is surrounded in the fenced div with the class VeryRed we see that it is not red and why is it not red because we also need to specify css here and specify that file called styles.css now if we rerun it we see that it is VeryRed and you can do this this is super super useful so if you ever need custom formatting custom you know styling etc leveraging some cascading style sheets some css can be very very powerful.
And you can add you know classes here you could add ids so I could do you know some other format here I could make this like font style italic and now if we look at this if I then surround it how about this with id some other format and close it off with four we'll see that this gets italicized so now it's italicized.
And I think it's cool to understand what's happening under the hood so under the hood if we look at our output file in our index.html we look for that second header so we have the second header or some more text and we see that this is given the class level two and it's given the class VeryRed we see that that whole section is encapsulated in this class that includes the VeryRed that we specified. If we instead how about added an image so in here we added an image and maybe if I'm lucky maybe it will know a url of a shrek image okay it doesn't but I can paste in a url of a shrek image you can paste in a picture of shrek and if I run this we see we got shrek there.
And some text and one cool thing is that we can also maybe specify the width equals how about 400 pixels we rerun this we got a bigger shrek and I think the thing that's interesting here is why we're able to do width 400 pixels instead of like dot width or something like that 400 pixels and this kind of like I think a good rule of thumb is that we can sometimes use a class or like a an attribute without a period if we're specifically wanting to add that attribute to the ultimate like html that gets rendered so what I mean by this is if we now look at the index.html and we look at the picture of shrek that has been added if we look at the image we see that it adds this width equals 400 as like its own attribute so instead of adding like a class variable here it adds it specifically as width.
But I could add my own class to the shrek image by doing you know dot think that we need to specify classes and ids first so I could do like shrek class width equals 400 pixels if I render this look at my index.html we see that now it has class shrek class so use this as you see fit you can kind of style things specifically you know based on this information and I think one thing to note is that there's a lot of different ways and a lot of different like built-in options that you can use with these fenced divs.
For example if we were working off of a revealjs doc it's like a cool thing I can do with the revealjs with a fenced div is I could add a list so if we look at this by default it looks like looks like this but if I added a fenced div with the class incremental around this section and you could only you know you could surround it by just around just the list I don't think that it will affect this header at all we run that or actually I guess I have to specify it right around the list we run that now it comes in at one at a time.
And if we looked at the documentation for this and we looked up revealjs we'll see that incremental is one of the options that we have access to and if we went to how about reference revealjs one thing that you'll see as you start looking through the documentation for whatever format that you're working off of is you'll see some notes sometimes included so like if we wanted to set the footer we can do that using our top level yaml config but we also can do it by setting like a fence div with footer for example or a fence div with the smaller class so we can see that real quick so I could add a fence div with the smaller here in addition so there's now two classes on this and if we looked at our list it's a bit smaller than it was before so rerun that again.
Let's just double check right around this whole section that's smaller we're using four divs now or four colons to say all of this is within the other stuff so now we see that this is all smaller if I remove this it's going to be a bit bigger cool so that's fence divs.
know you know editing specific elements so in addition to fence divs you could also edit things in such a manner called a bracketed span so if you wanted to just edit like some specific text
and you only wanted to make maybe this here red I could do this and we see that that is specifically red so you can do bracketed spans like this and customize certain elements and attributes of that you could also add like a style equals font size you know maybe it's very big here like five that's probably too big 72 pixels elements so you can do stuff like this
trying to think if there's anything else that's worthwhile talking about here that's styling we'll spend another couple minutes real quick on formatting as well building on this let's um remove this all this code real quick and just have some example headings and stuff like that so let's go ahead and do that
all this code real quick and just have some example headers again some cool things that you might want to do here with fenced divs is a layout so we can do layout or we can do specifically layout equals something like 30 and then 70 and how about the next one is 100
so this is a special layout format and if I close this and then I add three paragraphs of text so this is what's some text about a cat
okay this is some text about a dog this will all make sense in a second and then we added
okay so we have three paragraphs and we specified a layout for these three paragraphs if we look at what this looks like we see that we get it laid out in the page in a certain format this can be very helpful if we want to like let's say instead of having this text embed an image
I wonder if this image will actually appear and you can yeah just basically showcase text and whatnot in a certain way and we're still using the revealjs format this shows makes another probably option that's cool to see I could do I could add a dot scrollable
I bet you that we'll see everything now maybe not
but if we made this let's say back to the html format we see that it is formatted with this specific format we can also add things like do something specifically like layout number of columns equals two and now what this will basically do is it will keep two columns no matter how many paragraphs we add
so I could just keep adding this is you can just keep adding paragraphs and what we'll see is it always formats it with two columns so we see a bunch of different two column formatted things you could easily change this to three columns and it's formatted three columns you know four columns etc so very very useful if you want certain things to wrap and format always in a certain way so good to know basically I feel like if you're looking for some sort of customization option it's there for you you just have to sometimes do some browsing through the documentation
Parameters and CLI options
real quick I want to touch on parameters with Quarto as well as some CLI options that you have when you want to render something dynamically in Quarto so if you go to this Quarto web page docs computation slash parameters you can find some information on both Jupyter based execution and Knitter so whether you're using Python or R as well as some information on what you can do with these parameters but just see this in action real quick if we want to add our own custom parameters so let's say we wanted to generate reports and we wanted to switch up variables for each execution of the report
we could add to our Quarto markdown this special parameters tag and then we could define custom variables like name equals Keith and then maybe a data filter so in this video we are going to be doing some stuff with movie a movie data set so you can imagine that maybe you wanted to filter by comedy or something and we can close this Python cell and then later on and somewhere in our notebook we can utilize these variables so I can very easily down here add some more Python code
and I could maybe you know print my name and print the data filter you could obviously do any sort of Python execution with this but now we have the code that looks like this
and if we run this right we see that it says Keith and comedy and we see it prints out Keith and comedy down here one thing that you might want to do this is just a good to know is maybe you didn't want this code to show you could add a echo is false here and what that will do is it will hide all the code cells from your doc
and so now we just see the output here you also change it on a per code block basis by doing the following so the pound sign and the pipe is a special kind of syntax in Quarto but I could add echo is true here and so we will actually see these print statements show up along with their execution
okay so we see that and now the cool thing is that I could go ahead and I could run something like Quarto render index dot qmd I can pass in parameters so maybe I wanted to set my name to be something like Elizabeth and maybe I wanted to set my other parameter to be something like so we have this called data filter maybe I wanted it to be actual you know drama movies so now if I run this
we see we get a new output in index or output set index dot html if I look at that file or actually it already re-rendered over here we see Elizabeth and drama so you can run these and render these Quarto markdown files with other parameters and this is really helpful if you want to generate custom reports based on certain variables you can also even though this is specified as html you can also use the command line to do useful things like rendering it to a specific format so I could do Quarto render index dot qmd to pdf and we'll see a new pdf be generated in here
so if I open this up we see we get something like this and we see that it you know can take those variables in as well some useful simple command line interface options and parameters one other potential thing you might want to do is in addition to specifying these parameters you can actually via the cli change up some of these metadata settings so I could do Quarto render index dot qmd I could pass in this dash m and maybe I would want to set a table of contents equals true in this situation so we haven't actually seen this parameter but if I now open up our index dot html we see that it gets this table of contents I could also let's say maybe I wanted to change the title of this so right now it's saying Quarto crash course and maybe I wanted to change that to so that's our title metadata parameter I'll make this a little bigger so everyone can see
Quarto render index dot qmd I wanted to set the title to how about and this might be a little bit interesting because we have spaces in it so you might have to do quotes I'm not sure if this will work or not we'll see you might actually have to surround all of this in like quotes like this my fancy new title let's see if this works open up the index dot qmd and look at that it does work so you can pass in metadata as well useful stuff to know about
HTML output and publishing
all right let's go ahead and talk about some more advanced things with the html output format as well as publishing our html or any Quarto files to a public place where you have a link that you can share with your teammates to easily kind of navigate data or some sort of dashboard or report so right now I am working off of the github repo that is shared in the description so that is github.com slash keith galley slash Quarto crash course there's a bunch of qmd files and whatnot in there you can check it out you can go ahead and clone the repo and get all of this locally you also don't necessarily need to work off of this but it has some helpful things such as this helpers.py file that has just some code that I wrote to visualize different graphs and whatnot using these helpers.py we can start actually embedding you know very useful analysis into our Quarto reports so there's a file in here called html report dot qmd
if we go ahead and look at this we can see some pretty cool stuff so I'm going to go ahead and run this and if you don't have all the packages I recommend doing a pip install dash r requirements and that's going to be based off of the requirements.txt file in this repo so these are the libraries so you'll need to have this requirements.txt file locally for this to work but I do that it doesn't work for me I guess I spelled I didn't add the txt here cool now I can try running this file again
and we see we get a that's all sorts of analysis on a movie data set so the data that we're they're talking about right here is found in the data directory tmdb small so I mentioned previously in the video that all this came from a Kaggle source which can be found here and basically this tmdb small data set that you see is all the movies from that data set that have a thousand ratings or more have been kept and it just made the data a lot more manageable to work with one cool thing you can do in base code is I could preview this so we see what types of data that we have in this data directory if we go back to our html report we see that we load in that data we see that we import some of our functions from the helpers file and then we can go ahead and utilize some of these functions
so let's look at what that looks like again so we see our report over here and there's a combination of markdown as well as you know the actual python code one cool thing is like this plotly scatter plot is interactive so you can do all sorts of cool things with it we also see like for example for this python figure we've added some specific features such as fig align center and fig caption movie release year by release year distribution if we run this we see that like that appears here as well as it's centered on the screen we can change up the size of the figure as well so that it doesn't overflow or we could change up the martians or something but I think if we actually just spread this out a little bit it will see it pretty much fully
we also see that we are both generating an html file and a pdf file here so if i click on pdf just from this html file alone you can generate the pdf so this is cool because imagine you wanted to share this easily with a teammate you could just generate the pdf share but sometimes interactivity is very important so like you wouldn't be able to interact with a plotly chart like this if you only sent the pdf so that's where hosting your Quarto markdown files on a place like posit connect cloud can be very helpful you can click the link in the description to get deposit connect cloud once you're there you'll show up to a place like this you can sign up for free you know I recommend signing up with your github and as long as the repo that you're working off of to generate your qmd files is public you can very easily connect it to posit connect cloud so I'm going to go ahead and log in I'm logging into my github
and if I go ahead and click publish I want to publish specifically Quarto I'm going to use the Quarto crash course repo I'm working off of master right now and I can specify a primary file so in this case would be html report dot qmd I can go ahead and publish this and that will run some things and just to see what that will look like I did this previously and we see we get our report
you can play around with settings and like you know resize things as you need but like cool like I could go ahead and just take this link right here and I could share this with someone I'll even share it in the description so that you can go ahead and like play around with these charts so what's really cool about this is like we can see okay uh some of the top movies all that I could zoom in see you know more movies I could uh zoom out and maybe I just want to toggle certain types of movies to show up here so maybe I just wanted to do comedies
so uh there's one other and uh you know now I have just comedies here I can see what the top comedies are as well as the worst comedies epic movie the room uh pretty cool zoom in play around with this and yeah you can share this with teammates and they can also play around with it so super super helpful uh one thing that I should mention though is that if you do have a Quarto.yaml if you do have a Quarto.yaml file in your directory or in your repo that can sometimes cause issues when you specify the primary file that you want to generate on posit connect cloud um if you want only certain files to render you can specify you know only render html report dot qmd or you could do like you know render all qmd files you could say don't render index dot qmd there's a lot of different parameters that you can pass here and I think I would actually have to surround this with quotes um to only render certain files one other cool thing that we can do here
is another fenced div option in class that we have is we can add this content visible when format equals html fenced div around some of our code so like for example this plotly code uh not super useful when we have a pdf report so if I looked at the pdf report that was generated when we ran this code we see that it doesn't include that plotly chart
a final thing about this html report thing that I wanted to share is that you could actually use python inline as well so like from our data frame we are grabbing a random row from it we are grabbing a poster image from that that is on the moviedatabase.org that's where all the data comes from it's ultimately aggregated from there and then moved to Kaggle but we can get the movie image from there and then like based on whatever row we got we can dynamically you know set values set headers set bold text in our rendered file just you know dynamically
so like I run it this time we see we get american assassin if I run it again we see we get this movie flatliners cool to be able to do that with this inline python code
we see we get this movie flatliners cool to be able to do that with this inline python code
PDF and static document options
moving along we also have this file in this repo called pdf report and I just want to show some additional things that you can do with static documents so I've set it as a format pdf we see that we get a document looking like this one thing that I think might be useful is sometimes you'll want to change up your text to be in columns so similar to what we showed earlier in the video we could do something like you know add a layout so this explicitly is meaning 33 percent for the first column 66 percent takes up the second column and then when we add items in that we have it take up those sizes and in the the text here on the right we can also like add certain classes like flush right and add this data latex that allows us to align our text to the right I run this you know we see that you know it is taking up that space kind of how we expect
trying to think of other cool things here with pdf reports specifically one thing that I find quite useful is being able to do page breaks so if you look at the Quarto documentation there's some special syntax that we have available to us so I'm going to go to overview or maybe guide that's somewhere in here I think down over here in projects there are some maybe uh environment variables is that one look no not environment variables maybe in project basics
this is more on the Quarto yaml file what you can do with that somewhere in here we can find about uh project scripts a lot of good stuff in here maybe it's in advance actually okay yeah um I think maybe it's in page layout more useful stuff here you can include content from other qmd files using this include bracket still not finding what I want with the page break I don't explicitly look up page break quarto
okay short codes it looks like we have some short codes that allow you to do different things so like we see page break here lets you separate pages I find that super useful this looks like there is some useful stuff I guess this was just on the markdown basics page
but if we look at what this does when we render it so let's say I wanted to add a page break after every like section so we have one there we have one there we have one there um we could add one right here we're going to see all of our sections is separated all of our headers separated by pages with our pdf and the concept of pages only really makes sense in when you have like a word document when you have a pdf document so we see that it's kind of working as we expect this code is not showing up because we have echo equal false but I could also add the code to the screen doing echo true so we see now we see the code alongside the outputs
we could also generate a docx file here by doing format docx if I run this we now see in our output we have this docx and so you can you know feel free to open that and you know edit things as you need to so I could edit the text in here this is great if you you know are working with someone else on your team and you need to generate a template and then they can fill in the rest of the details so maybe this was some descriptive columns that they needed to fill out they could edit the word doc and then go ahead and you know save it as a pdf another thing you might want to do is add a table of contents
we're going to change this back to a pdf we see we get this pdf and one thing that's cool is it automatically knows what page each things are on so I could click on random movie goes down to the random movie section of our document cool stuff word cloud etc so that is uh some information that is good to know about static documents
Creating dashboards
next let's talk about dashboards in Quarto also very very easy to create so i'm going to call this new dashboard qmd and with dashboards when you know start it the same way create these three dashes open and closed I will make the format here specifically dashboard and now we render this we see because we get nothing here I should probably give it like a title at least so title is my new dashboard run this one more time
we get a nice looking dashboard title banner and then I can start adding some sections to my dashboard so maybe I have one on movies by rating versus number of votes and I'll pass in the same python code that I had previously which is in the helpers file
so I could do from helpers import and let me just see what the function was called I think it was one of the one that uses plotly what was the one that uses plotly oh the probably one actually was rendered inline but I could just do like plot top movies by rating so I'll just call this I think column one or import plot top movies by rating I don't need a because we're importing it from helpers I don't need to pass in all the code and then we also want to import pandas
and I also recommend maybe using pathlib I know previously I used just the I know previously I just used a string to get my data frame but I could do something like data or file path equals path to this specific file we get the parent of this file we go into the data directory and grab movies.csv but it's actually called tmdb small let's confirm the with a capital s and then I can get the data frame and maybe I actually want to do this code before I actually get into things and then we can make this a little simpler
and all we have to do in this cell is import the function and pass in the data frame we run this okay it's yelling at me so I'm going to just do it the old fashioned way
oops run this we see we get our movie here if I add another plot here so I could also add let's see what other functions we have access to plot revenue versus budget how about we do that one
on this so we see this we see that each time we add a new code block within this column so I guess this is actually a row they get stacked side by side but if I added another row and then let's add how about that python code that created the scatter plot so right here we have it
I'm going to make a new python cell add this scatter plot close it up and so now we see this we see this takes up the full one because we've specified a row here and every code cell that we put inside of this row will start stacking
so if I moved all this code over into our previous row and I know this is quite small but I just want to show for example we see we have three columns and it fills up the top and we can keep doing this so I could add another row and we see we get this
I guess we're being a little aggressive but you can you know do all sorts of cool stuff with this another cool thing that you can do so let's how about move one of these rows to the top
Value boxes
another cool thing that we have access to are what's known as value boxes so if I do python and I specify that I want to do a let's check value boxes real quick
so I'm going to go to dashboards I can just click on an example these are the value boxes I'm talking about
so if I go to dashboards I'm in the gallery right now if I click on source code we'll see that it does value boxes like this so I'm going to just copy one of these these icons are coming from the bootstrap icons so if you look up bootstrap icons I'll put this in the description you have access to all of these different icons so we'll see that in one second but I want to copy all of this code and go back to our dashboard
looks like I screwed something up let's see does it look good okay
there's no function called get price so I could just do something like how about 255 here I need to make sure that this is closed
and now we run this we see a value box I could go ahead and copy this
paste a couple of these in now we have three different value boxes I could very easily change up the icons of these so go back to that chrome tab maybe I wanted an envelope for one of these I just need to copy the name that we see here I could look up something like you know maybe I wanted a flag they have a lot of icons so to see how we embed those you just need to take the name that we see here
so if I wanted to do flag for one of these then maybe I wanted to do envelope for one of these and then I could do things based off of our data frame so I could do like number of movies so maybe I said our title here is number of movies and maybe that would just be length data frame
maybe this is average rating or something like that I could then paste in you know data frame the column of vote average and take the mean of that so we can start all doing you know actual useful stuff here
I could do an f string that might make this helpful I do float actually it will be a float by default so I want to pass in f string then there's this cool f string syntax I could do 2f to get it to just round to two decimals run this we see we get the average rating of all of our movies
another thing we can do is right now this is row formatted but I could easily change these to be the columns by doing orientation and I could do instead columns we get it looking like this another cool thing that you can do is you can add different tabs so imagine that you wanted to have one tab for comedy and all of the comedy movies were under that and one tab for how about horror and so this is specified specifically with a level one heading so we have comedy at level one heading horror at a level one heading you know content here
now we see we have all the comedy stuff under that first heading one we also could put a bunch of stuff under this section this other heading so a lot of cool stuff that you can do with dashboards very easily using this Quarto markdown syntax we could also add like titles nicely into some of these certain graphs so I could let's say add a title to this one by adding a parameter using the pound pipe sign I could then add the caption this is the revenue versus budget
so if we add the title we see that it you know gives it this nice title you can do that with any of these so you can kind of play around with different parameters and make this really your own you include all your python code a lot of cool stuff that you can do with this
Slides with revealjs
so next let's talk about slides in Quarto so I want to create a new file called like new slideshow.qmd and if I want to do a slideshow I bet the best format that I recommend you can actually output it to like a powerpoint output but I think that the easiest is to use the format revealjs and then basically we can have like title slides and then you know section slides
and you know you can insert any sort of text in there and if I run this we see what we get I could also add you know a title a author just like we could with the other types of docs
another thing that's useful to do is we can change our theme so I think there's like a dark theme I'll share on the screen a list of the different theme options but yeah so we see now we have a dark theme so maybe you're more of a fan of dark themes with the revealjs format too you can easily like go to a certain slide by clicking this bottom bar and we have this progress bar that shows how far in the slideshow we are which is pretty cool so if I look up slide themes Quarto you see we have reveal themes so you can do any of these available themes and you can also customize them as you see fit too if you want to by playing around with this
so this is on presentation slash revealjs slash themes dot html some things that I find particularly useful is let's say you had a slideshow and you had some code in it
and let's say this does something like imports random for i in range 10 we output some random integer from 1 to 100 if I run this we see the output of that right here I could also include the code I think if I do echo is true we should be able to see the code alongside so we see that and nice it automatically like makes it compatible with the dark background but one thing that's particularly cool is that we could also do something like python and then I think we do line or let's see I need to remember how to do this I think it's line numbers equals one how about then three to four and run this okay I messed it up let me just double check this
okay this should actually be code dash line numbers we can highlight certain codes at certain times so I first highlight the first line then I highlight lines three and four I could even then afterwards highlight all of my lines so how about one two four so watch this highlight the first line highlight the next lines highlight all the lines etc I think I could easily turn off the line numbers so let's say code line numbers I could say that's false so now if I run this I think this is not working because this is actually still this is a special class of python but if I ran the python like this we don't see the line numbers gonna make this true we will see the line numbers
so this is the special class dot python
other things we could do is we could add lists and we saw this previously but you can do dot incremental show items one at a time with incremental list surround that with close that fence now if I run this we see it shows item one at a time with the incremental list we could also do this with other elements like images or something so image fragments
I can specify things as fragments so how about I specify an image I can paste in some url I also could have these images locally paste in my url I'm going to add the dot fragment here and then I can do a dot fade in and if we look at this we see that it now fades in and we could do this with multiple shreks so I could do another shrek and another shrek and I could you know specify maybe that I wanted this to be a column layout so I could do layout equals 33 33 33 and now instead this will all be right next to each other instead of down so cool I could also say that I wanted maybe this one to fade in first and so I would do a I'm trying to think what the index is so I could pass in a fragment index I could say that this is one I think it's a if you pass this into all I think it will we'll make this two and then we'll make the first one that's actually you know farthest on the left we'll make this equal to three run this middle one comes in first the one on the right will come in second and then the one on the left will come in third you could also like you know tie these together so that they fade in at the same time if they have the same index
so middle one's going to come in first and then because now the left and right has the same index they come in together
you could also optionally like add instead of doing a layout you could add like custom widths and stuff so maybe this is 500 pixels it's going to say the width is 500 pixels this should make a big shrek over here on the right and doesn't let me do the same I guess we removed the order but we got a bigger shrek I could also like set the absolute position of some of these so absolute I could do top equals 50 left equals 50 I could make this one farther to the right and I think I had to do that I would do dot absolute top equals left equals farther to the left so we want it more to the right so I think if we do left equals 500 this should be more to the right okay let's see what that looks like
so this is pretty far to the right the first thing to fade in this next one should be farther to the left we see it's kind of stacked I could you know set the width of one of these 500 pixels so you do all sorts of organization of your images as you see fit I always just look up you know as I've kind of mentioned previously I go to the guide I look up the type of format that I'm working on so revealjs in this case and I just see what the you know what it shares with me there to see kind of my options I also find that looking at gallery you know presentations as well as like this example presentation that they list here on the docs is super super useful you can check out the source code here I'll also link it in the description so you can see all sorts of different things that you can do okay that's some of the basics on slideshows
here on the docs is super super useful you can check out the source code here I'll also link it in the description so you can see all sorts of different things that you can do okay that's some of the basics on slideshows
Creating websites
so tying this together we can actually create websites here with Quarto as well so to do that I recommend starting with the kind of index.qmd so I'm going to just say you know welcome to my website here you can find some Quarto examples and then if we specify in our Quarto.yaml file that this is a project of type website and we give some website criteria here and so I'm following all of this from the Quarto docs website so if we go to quarto.org slash docs slash websites we see we can get some useful stuff here I want to just copy this website stuff here
I'm going to paste it in we can say our home page is equal to index.qmd and now how about I do so I could just render in an about page as this but I'm going to pass in like our how about html report I'll pass in our pdf report I don't know if the pdf report will work perfectly because it is specifically needs to be html but I could pass in our uh presentation.qmd I could pass in our dashboard.qmd and now if we go back to that web page we see that we can do Quarto preview to see our website so I'm going to do Quarto preview
and we see we get a website I can click on my so I guess it's giving the title based on what title each of these qmds have so like the movie data analysis is probably our dashboard I know this is our html report we see that if we go to our Quarto crash course I think this is our slideshow we see that on the web page we can go to our dashboard this is a different dashboard but it's also included in the repo all of this is on the website this today we could very easily I think change the title of our website oh I guess the website was called today so our first Quarto website
I could do another Quarto preview we see that we see our home page in different sections and you can look at the documentation I would recommend doing that to see all of your different options and whatnot of what you can do with the websites as well as like theming it when publishing it so we could publish it the same way I could do you know go to posit connect cloud link in the description and specify I want to publish a Quarto and you know use primary file index.qmd and we should have success doing that so that's websites really really quickly
Parameterized reporting
real quick I want to just show a more advanced example of parameterized reporting which is super super useful in the real world so let's say you are doing a country analytics report and you need to generate one for each country we can do that via parameterized reports I'm going to just kind of show an example so I'm creating a parameterized report.qmd and we'll use our movie data set so we'll start writing some python code here so this will be I'm going to call this top movies and we'll make a report based on all these different genres and the format is html and we need to now because this is going to be parameterized we need to have our parameter special syntax at the top slightly different for r but this is how we do it in python
tags parameters and then are going to our only parameter here is maybe how about number or num movies and genre and we'll close that and then basically we'll have top movies in and then I'll just say python genre top movies and genre and then we need like five movies so number five number four number three number two number one and in each of those uh let's say we want a little bit more code here I'm going to add my code to the top just so it's a little bit neater so we need some code to get the top movies so what we could do is we want to get our data frames import pandas as pd df equals pd dot read csv and it is specifically in data slash tmdb small dot csv I'm going to just print df head real quick uh just to see what we're working with I'm going to run this cell okay okay okay okay do we have a genre so I'm going to actually print out df dot columns
here on the cell genres okay we have a genres so let's look up what genres looks like
oh oops I just wanted to run this cell okay so it's like a string of get out of here run this cell it's like a string so we only want one genre I think we did this previously in this code if I look at HTML report uh there's a primary genre function so I'm going to just copy that code primary genre and then how about we also lowercase this I don't know if it's already lowercased
so I'm gonna real quick now look at primary genre dot unique and I can run this cell again okay so I got a dot string dot lower I'm trying to make sure they're all lowercase okay we get this so now we have a nice list to work off of so I'm going to just paste this as a comment
okay and now if we want to just get those movies that are in a certain genre we could do df genre equals when the primary genre is equal to the genre that we specify and then the top movies in that genre are going to be this list and we want to sort it and this is autocomplete is doing great for us we want to grab the head so now let's look at our I guess I'll call this top movies let's look at this real quick
our genre is not defined on this real quick then run this cell okay we got our top movies I think
I'm going to actually do display I think this should work
oh and popularity is not what we want to sort it by we want to I don't know what the popularity column is necessarily I want to do vote average
okay so we see we get some movies are these sorted by genre these are considered comedy that's crazy for parasite or this I don't know this one
uh regardless uh we can do you know python it's going to be top movies dot loc four right so you get the fifth one and then let's say we wanted to get the title from it and maybe we wanted to also get the description so you'll see this work in a second
so let's look at our what our report looks like right now I'm going to comment this line out temporarily just remove it real quick I just want to see if this code is working to start with
okay so we get that fifth video movie a dog's will and I could also add what is the column called with description I'm going to look up the columns again I'm looking for overview that will work
so I could do something like surround this maybe with bold text I think that this should work and then maybe I add the description overview run this look at that and then I could do I want to echo to be false I don't want to see all this code on the screen
look at that and now we can copy basically the same code for all of our other reports make this three make this three make this two make this two make this one make this one and make this zero and zero and now we look at this we run it we get all of our different movies and like the descriptions of the movies I love this Forrest Gump great movie and that's for comedy specifically but cool thing is we could very easily go ahead and do a quarto render parameterized report dot qmd dash p and now we want to set how about you could also play around with the number of movies that would be a guess a challenge for here is how could you dynamically set the number of movies challenge for here is how could you dynamically do all this instead of doing it kind of hard-coded like we have right now so number of movies isn't really useful here yet but genre and now I make it how about western
we'll see this all update so if I refresh this we see the top movies in western we could even do something like genre dot capitalize run this again
I just noticed that our core yaml is still going crazy over here because we added the website stuff so I'm just gonna remove that temporarily okay
we could run it again doing genre equals how about action or let's see what options we have action that seems good
refresh this top gun maverick actually I don't I don't know if I've seen top gun maverick that's pretty bad cool and you could even do like a python script now if you want to get really into it I could do like generate all reports
Generating all reports with a Python script
I could run for or like genres generate all reports dot py this should be called genres equals in our parameterized report we'll just copy all these genres so we have a list of all these genres
oh shoot you could print this out nicely as a list I'm just going to do it manually as a one-time thing okay so we have all of our genres I could do a for i in genre preferred genre in genres we could run the command insert python code to run the command Quarto render parameterized report genre genre
so we could run this using the os library uh passing the parameter and we can also give it an output name I forget exactly how to do output names let's just look up Quarto render dash h so we give it a name I think we do dash dash output let's see what output output yeah output so we're going to do dash dash output and we'll call this how about genre dot html
this is an f string so we're able to do this stuff so now if I run this we should be able to generate all these reports so we would currently look at our output we see you know there's no special name or anything but if I run this
uh parameterize how do we spell that parameterize dash report did I spell that correct come on cross my fingers run this we see it doing work
I would open this up in the finder if we look at all the new reports that we have we see documentary dot html romance dot html so like what are the top romance ones open that up five feet apart Gabriel's Inferno never heard of it if I open up war we got there fury Guy Ritchie's Covenant 1917 so these are just based on the vote average the top movies if we look up animation what do we have there
cool and yeah you might you might want to maybe make a something with like having to have a higher vote count too to to really make this a um a more interesting reports but it is really cool to see all these different html reports that we have that we generated using uh this simple python script in combination with Quarto so that's some you know a kind of advanced topic that I use a lot in the real world that can be super super helpful with Quarto
that's some you know a kind of advanced topic that I use a lot in the real world that can be super super helpful with Quarto
Wrapping up
all right we covered a lot in this video we covered you know kind of the basics of setup and installation with Quarto and then we started seeing how we can generate different types of outputs using the same QMD or IPython notebook files this is only really scratching the surface of all the possibilities with Quarto but I hope it is a good launching point that you can kind of build off of and take and and adapt to your own projects if there are certain topics that we didn't cover in this video that you would love to learn more about we're always looking we're always looking for recommendations so leave those down in the comments
if you did enjoy this video it would mean a lot if you like it and also subscribe to the channel to not miss future videos like this one thank you all for watching until next time peace out
