Quarto Dashboards 3: Theming and Styling | Mine Çetinkaya-Rundel | Posit
Theming and styling Quarto dashboards built with R and/or Python. Before watching this video, you might want to watch Parts 1 & 2. This video takes you through 0:00 - Theming (including Bootswatch themes, light/dark mode, customizing themes with SCSS) 3:55 - Styling 4:55 - Live coding demo Slides can be found at https://mine.quarto.pub/quarto-dashboards/3-theming-styling and the starter documents for the accompanying exercises at https://github.com/mine-cetinkaya-rundel/olympicdash. Materials for all parts of the videos can be accessed at https://mine.quarto.pub/quarto-dashboards. You already analyze and summarize your data in computational notebooks with R and/or Python. What’s next? You can share your insights or allow others to make their own conclusions in eye-catching dashboards and straight-forward to author, design, and deploy Quarto Dashboards, regardless of the language of your data processing, visualization, analysis, etc. With Quarto Dashboards, you can create elegant and production-ready dashboards using a variety of components, including static graphics (ggplot2, Matplotlib, Seaborn, etc.), interactive widgets (Plotly, Leaflet, Jupyter Widgets, htmlwidgets, etc.), tabular data, value boxes, text annotations, and more. Additionally, with intelligent resizing of components, your Quarto Dashboards look great on devices of all sizes. And importantly, you can author Quarto Dashboards without leaving the comfort of your “home” – in plain text markdown with any text editor (VS Code, RStudio, Neovim, etc.) or any notebook editor (JupyterLab, etc.). This workshop will walk you through building an increasingly complex dashboard using various layout options and deploy them as static web pages (with no special server required) as well as with a Shiny Server on the backend for enhanced interactivity. This course is for you if you: * do data analysis in computational notebooks * share your results with your audience in static or interactive dashboards * want to improve the design, user interface, and experience of your dashboards
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
In this third video, we're going to polish up our Quarto dashboard and we're going to talk a little bit about theming and styling. So let's start with theming. Quarto dashboards can be styled with one of the 25 themes from the Bootswatch project. So here, for example, I've used a theme. It's a theme I like to use for testing, just to make sure that I have the right syntax because it looks a little crazy, in my opinion, something like this.
It's very fancy, but it is great for testing your code. You can really see when it actually takes effect. So we're setting theme equal to, in this case, the name of the theme is Quartz, and we're doing that under dashboard, as you can see. So that's a little bit indented on the YAML.
You can take a look at the various themes from this project. If you are familiar with any sort of web design, these are probably themes that are very familiar to you. You may have used them in other Quarto things, like if you're making a website or if you're making slides. And otherwise, even if this is the first dashboard you're making and you haven't done any sort of theming work in another project, chances are you'll recognize some of these themes from websites you peruse.
Light and dark mode
We can also add a light and dark mode, and the way we do that in Quarto dashboards is very similar to how we do it in Quarto websites as well. So instead of setting a single theme, we then add a light and a dark option for our theme. And in general, I recommend choosing themes that pair nicely with each other. So flatly and darkly, for example, pair nicely. And you can see here in this screenshot, it's a little tiny, but we've gained a little toggle button in our dashboard.
The theme has also changed to flatly for the light version. And then when I toggle that switch, we go to darkly, so a dark background for this. Now obviously, if you're going to do this, it makes sense to take care to update your plots to go along with it as well. But for now, we're just going to focus on the theme aspect of things.
Customizing themes with SCSS
We can also customize themes. So you can create an entirely custom theme and apply it to your dashboard as well. For that, you would write an SCSS file and simply pull that in. Or you can customize an existing boot swatch theme. So you could take an existing theme and say, there's just one thing I don't like about it, or a handful of things I'd like to customize further about it, and then bring those in by adding a custom SCSS file.
So here, for example, we have a custom light SCSS file that we have loaded as our theme. And the way it's affecting things is in here, we can see that we've changed the font. So that's going to affect our output. We've also changed the background and foreground for our navigation bar. And we've also changed for the headers of our cards what the background should be and the text color should be. So those are all reflected here. As we can see, you're seeing that gold or bronze-ish headers, for example, for your card titles with white text in front of them.
Here, we're using that same style file, but we're applying it to an existing theme, so to the sandstone theme. So you can see that the colors that are used for the value boxes, we're using colors like primary and secondary for those, have been updated as well. And then our custom theme has been layered on top of that.
Styling best practices
In general, when you're at the stage of polishing your dashboard, you're going to want a unified look for your dashboard, which is going to require customizing your dashboard along with your plots and tables. So you should be choosing colors that are complementary and visually appealing, at least to you, but also following accessibility best practices as well. So stick to predefined accessible color scales where possible.
So stick to predefined accessible color scales where possible.
If you want to learn more about theming Quarto, I invite you to browse the documentation. So under Guide, Dashboards, and Using Dashboards, there is a theming page, and there is plenty of information there going into detail of how you can build your custom theme, all the SAS variables that you can use in order to do that. We're going to dip our toes a little bit into this in this video and create custom-style dashboards, or actually take our Olympic dashboard and add a little bit of customization to it.
All right, let's go ahead and build. Once again, if you would like to review the slides for this video, the top link will take you there. And if you would like to peruse the source code for the slides, you can go to the repository where the slides live. That's under my GitHub and then the repository Quarto-dashboards. So this time, we're going to start with our starter documents in the repository that we've cloned again.
Live coding demo
I'm going to be working through the R version, but there's a Python version as well. And unlike the dashboard components video, there should be no differences in terms of theming, except for when we get to polishing our plots, ggplot2 versus plot9 have slightly different syntax, obviously, for setting the color scales, but the syntax is very similar. And ultimately, we want to get to a look like this.
So if we are to zoom in, and if you remember where we left off with video two, we've gotten pretty close to this, but it looks very different because, first of all, we've added a boot swatch theme to this. So this is the sketchy theme. I've chosen it both because it is playful, but also because we can see the effect of it really clearly. We're seeing the text, the font has changed, and also sort of the lines look very hand-drawn. And then we've done a few other things like polishing up our plots as well.
So let's go ahead and turn to R, open up RStudio, and render that document, that olympic-r3 or pi3, depending on the adventure you're choosing to follow along with. And things look something like this. Let's start with the easy and the most impactful fix. We are going to add a theme, and let's set that theme to sketchy, and render the document.
And here we go. We can already see that our text and our lines end up inheriting sort of decisions that go along with the sketchy theme, and things are starting to look different. However, if we go back to our rendered dashboard versus our goal, we can see that our goal has other color choices that go along with it that we haven't really incorporated yet. For example, the color of the card titles is this beige-ish color that we don't currently have in our dashboard.
So how can we go about getting those as well? So the sketchy theme alone didn't get us that, which means that we're going to want to augment it with our custom style file. We have a starter custom style file in this repository already, so if you go under style and then olympic-.scss, you'll see that I've already given you the SCSS code, since the goal of this video isn't really to teach SCSS, and frankly I'm not the right person to be doing that anyway, but to give you some starter code that you can further play around with.
So we can see some of the choices here. The card header background color is this beige-ish color. We're changing how our navigation items look, what color they get when we hover over them, and the links, and similarly for the tab sets as well, and we're changing the background and foreground of our navigation bar too. So given that we already have our choices coded up already in this SCSS file, all that we are left with to do is to make sure that our Quarto dashboard uses it.
So in order to do that, we're going to say I don't want to set just a single theme. Instead I am going to list, along with the sketchy bootswatch theme, tell Quarto to actually pull this file in that's in the style folder and is called olympic-.scss, and let's go ahead and render that as well and see what we get. All right, we are basically there.
We're basically there in terms of our dashboard styling, so the only thing that's left to do at this point is to make sure that we can steer away from the default ggplot2 colors to something that goes with the rest of the dashboard. While this video is about Quarto dashboards, I'm going to take a couple of minutes to walk you through those last steps as well, just to drive the point home that even when you're designing a dashboard and you're sort of focusing on what's happening outside of the code cells, at some point you're going to want to pay attention to what's in the code cells as well so that you can achieve this unified look.
even when you're designing a dashboard and you're sort of focusing on what's happening outside of the code cells, at some point you're going to want to pay attention to what's in the code cells as well so that you can achieve this unified look.
So if we take a look at our goal, we can see that we're using slightly different colors, like a goldish, silverish, and a bronzish color for the three metals. How do we do that? We're going to add a manual color scale to our ggplot.
So let's go ahead and find the plot that gives us that. So I'm going to run everything up to this point. I'm also going to say that I want my chunk output in the console and run this line of code as well. It tells me that there has been a change in ggplot2, that I probably want to do this. So let's see if that's happy enough with that. And I think I need to also specify legend position inside. Let's see if that works.
Now I have that, and I'm going to add a manual color scale to this. So let's go ahead and say scale, or actually this is filled by metal, so that's going to be fill manual. And these values, I'm going to give it a named list vector. We have gold and silver and bronze. I think we can use the same colors that we had used in the previous video for our value boxes. So that was d4af37 for gold, and we need backslash, and thankfully RStudio shows us what that's going to look like nicely. And then this was c0c0c0, and this last one was cd7f32, and let's see if that gets us what I want.
An additional comma. Okay, and another thing I'm seeing here is that these bars seem much more separated from each other, so we can do that by adding a white outline to our bars. So I would do that in geom bar, since that's not an aesthetic mapping, say color is white. And so that gets me that as well. Let's go ahead and render this to see how this is looking in our dashboard.
So our dashboard is here, and one other thing I'm seeing is that in this dashboard, things are a lot more stretched across the whole space we have for the card, versus here the plot seems a lot narrower. So we're going to want to play with the figure height and width. So let's say that I want a different aspect ratio. I'll make it a bit narrower in terms of the width so the text isn't so small, and let's do something like figure height is something that's much smaller. Let's see if this gets us what we want, and see if we can fit that space in, and if not, we can play around with those numbers a little bit more. But that is looking a lot better than where we had started.
Oh, another thing is it looks like we may want to expand our x-axis a little bit, so that this 8,000, or maybe what we might do is we might choose different labels, right? So here it looks like this is from 0 to 7,000, increasing by 1,000. So let's add a scale x continuous, and the breaks are going to be a sequence of numbers from 1,000 to 7,000 by 1,000. And another thing we might want to do is I'm going to go ahead and bring in another package here, the scales package, that will allow me to label these as numbers so that I may be able to gain those commas, separators for the thousands.
All right, let's see. I just need those commas in there, and in order to do that, I will say big mark is comma. So this label number function comes from the scales package, and basically the big mark argument tells us what to use as a separator for each of the thousands. So we're there.
What's left to do is make similar adjustments to the last plot that we have, which is the line plot. But now that you have the color assignments that you need for the gold, silver, and bronze, and the tip that we went over, which is that you can resize the plots that you have in your code cells by setting figure height, figure width, or an aspect ratio figasp, you can actually get that line plot to fill in the entire card and add manual colors as well. The one difference is going to be the geom that we used for the line plot is a geom line, and we're coloring by the metal type as opposed to filling by the metal type. So instead of scale fill manual, as we did with the bar plot, you're going to want to use scale color manual.
I'm going to leave that and making the same updates to the Winter Olympics page to you to work through. But note that if you go back to the repository with all the starter files, you can look under the pie or the R folders and get access to quote unquote, the solutions there as well. I hope you enjoyed building these plots. And once you are done with your dashboard, once you're done polishing up your plots and done building your dashboard, go ahead and publish it to Quartopub.
