HTML and CSS for R Users - posit::conf(2023)
Presented by Albert Rapp You can get the most out of popular R tools by combining them with easy-to-learn HTML & CSS commands. It's easy to think that R users do not need HTML and CSS. After all, R is a language designed for data analysis, right? But the reality is that these web standards are everywhere, even in R. In fact, many great tools like {ggtext}, {gt}, {shiny}, and Quarto unlock their full potential when you know a little bit of HTML & CSS. In this talk, I will demonstrate specific examples where R users can benefit from HTML and CSS and show you how to get started with these two languages. Materials: - Here's the link to the video that I mention in the talk: https://youtu.be/QU8wSya-Y9E?si=zw59OSFPl1eJSY7M - Part 1 of this two part series can be found at https://www.youtube.com/watch?v=jX4_Dnzhl0M Presented at Posit Conference, between Sept 19-20 2023, Learn more at posit.co/conference. -------------------------- Talk Track: Compelling design for apps and reports. Session Code: TALK-1105
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hi, welcome to my talk. My name is Albert Rapp. I am a freelancer and a content creator. You may have seen some of my content on YouTube or Twitter. On my main job, I am a math PhD student focusing on probability theory, but I assure you that today we are definitely not talking about mathematics.
Today I want to show you how to combine HTML and CSS with popular R tools that you may already use to create even more beautiful outputs than we already have with the tools we want. So you may be wondering why is a mathematician talking about things like making more beautiful designs, making better tables with GT, having a nicer plot, talking about things like design. So let me tell you how I ended up here and how the idea for this talk came to be.
As a PhD student, I also have to teach, and at some point, at that time, I felt like I was getting stuck with the R course and not with the math course. So I was sort of getting stuck with having to teach R. I assure you now I would be very glad about this, but at that time, I felt like I was kind of getting the short end of the stick.
But I decided to make the best out of it, so I decided to read R for data science, which I am sure all of you have read, and I just learned a lot from it. And one of the things that I found very striking was that it starts out with data visualization. The very first chapter teaches you ggplot, and to me, it was fascinating how just the very basic ggplot call that you learn in the first page of that chapter was already creating a plot that was much nicer than what I could have possibly created at that time.
So we will see in this talk that this is a recurring theme. We have very great tools that can help you to create very nice outputs all from within a couple of lines. So this is how I started ending up with data visualization. I wanted to learn more, and I kind of went down a rabbit hole, learned more about it, and once you start learning about data viz, you see other people's work as well.
Colored titles and ggtext
And here I have brought data viz from John Burn Murdoch, who is creating visualizations from the Financial Times, and if you don't know his work, you should definitely check it out. He creates beautiful plots, and what I found most interesting about this particular chart is that instead of using a legend, like a typical legend on the right-hand side of the plot to indicate which color means what, instead it highlights single words and colorizes them. For example, in the title you can see that the word British cities is colored in red and to indicate that the red dots mean British cities.
So I thought, well, can I do this in ggplot2? And so I set out and tried to create a scatterplot first using the very famous palmar penguins, and this is like a very nice plot that I created with ggplot. It's a decent plot. ggplot is a very fancy tool to make these kind of things, but this was not what I set out to do. I wanted to have the colors not on the right-hand side, but in the title. So the question is, can we do this within ggplot? And the answer is, yeah, we can actually do that, but we have to invoke an extra package that's called ggtext.
So at this point you are asking probably, okay, what's the story with HTML and CSS now, right? We have been saying all of this was done in R. But if you are looking at what you have to do to make this happen, even though we are using R code, what you need to do is to wrap the words that you want to highlight into these span tags, and inside of these span tags you have to set the color to some hex code that you want to use. So really, this is HTML and CSS. These span tags, that's HTML, and the style instruction inside of it, that's CSS.
And even though we could get very far to accomplish our goal with just within R, we have a great tool for that. We had to sparkle in a little bit of HTML and CSS to make this happen. And the very nice thing is that it isn't actually that hard to make this work, right? If you can create a scatterplot with ggplot like that, then you certainly won't have any trouble to set the words into span tags and then throw in a couple of keywords. And we will see that this is a recurring theme with the tools that we like to use.
If you can create a scatterplot with ggplot like that, then you certainly won't have any trouble to set the words into span tags and then throw in a couple of keywords.
HTML and CSS across R tools
So I have mentioned that you can add a little bit of HTML and CSS to your data visualizations with ggplot, but it's also true for other very popular tools. And this is what I've noticed. It's true for tables with GT, it's true for reports and slides with Quarto, and it's true for dashboards that you create with Shiny. All of these packages or tools are great out of the box. They can create beautiful outputs, and we can get very far all from within that tool that you use. But if you want to make something unique, if you want to make something a little bit special like having the colors in the title instead, then you need to add a little bit of HTML and CSS to it.
I like to compare this to building houses. You can create or can build a very nice, a very solid home all within R, nothing wrong about that. But if you want to build something very special, want to have something very fancy, then you are kind of forced to add a little bit of HTML and CSS to it. But really the point that I want to make here is that just with the data visualization where you only had to throw in these span tags, it isn't that hard once you are at the point that you can already create the nice home. So the transition using the HTML and CSS isn't that hard.
To prove my point, let's look at a couple more examples. Here's a table that I have created with GT. Once again, it's a very amazing tool that we have at our disposal. GT can make a very nice table. Here it's a solid table. It shows a couple of measurements from the penguins dataset, and it even has like a little chart in there to visualize the distribution of the penguin weights. And even though this is a neat table, it may be a bit boring. It's just plain black and white, and you may need to draw your reader's attention to that specific table that you have.
So you might want to throw in a little bit of color in there, add like a linear gradient to make things look fancy just to grab your reader's attention. And the same story is here happening again. Basically, this was all done in GT, but to make this happen, you created your table in R and then passed this to some overlay. In this case, it's called OptCSS, where you stick in CSS code to make the final changes that you want. And again, the story here is that the part that is highlighted is only a couple of keywords that are pretty easy to understand.
I will guess that you won't have any trouble understanding what border top width does when you set it to one pixel, right? The only thing that might be a little bit troublesome is the things that are grayed out here. These are the description of where you want to apply your styles. But the cool thing about this is that usually you don't have to write these things yourself. You just have to figure out where to look, and then you copy and paste the thing and throw that in there. So this is how I made this thing. I mean, I just copy and pasted the descriptions, and then I set the keywords to what I want. And the keywords are easily Googled. If you want to figure out what changes the background in CSS, you Google just that, and you see that background will do the job.
Same thing is true in Shiny. In Shiny, you can just throw in a couple of keywords to a lot of UI elements to make your user interface look different. And once you are comfortable with using these nice and easy keyword value pairs, you can start to use more complex stuff from CSS, like the grid alignment, to take your UI elements that you have from within Shiny and arrange that on a grid here. That's how I created the Shiny app, this little habit tracker. And basically, this is how I leveraged CSS here to get the job done.
Quarto as a gateway to HTML and CSS
And finally, we have Quarto, which I like to call a web development gateway drug. It really is true. Quarto generates so much great output for you out of the box, and a lot of times that's HTML and CSS. And then you're thinking, OK, I want to change this tiny thing to make the theme similar to what I want. And then you're hooked. You want to figure out, how do I do this? And this is really how you end up learning more about HTML and CSS, and this is how I ended up there, too.
And the very cool thing is that Quarto is a great place to learn the HTML and CSS, because it already generates all of the code for you. You just have to figure out where to look. Once you know that, you can copy and paste most of the code from there and change the values to what you want. If it says background is white, copy and paste it and set background to blue if that's what you need. So with that, you can get very far.
And finally, we have Quarto, which I like to call a web development gateway drug.
And the thing about Quarto is that, for example, if you create slides like these, you can do things like in little chunks. For example, you could interpret every slide as a little web development project and do some fancy stuff there. Here, I definitely want to mention that this theme isn't by me. It is great, but it is from Emil. I borrowed that. He will speak about probably more amazing Quarto themes just after me. And this saying of every slide is a little web development project is something I have picked up from Garek Adembuyi, who also stressed this point. So it's not a new idea, but it is worth repeating that you can start working on very small projects to ease your way into the HTML and CSS world.
Getting started with SCSS variables
So this begs the question, how do we actually start with that? I gave you a couple of examples and showed you, like, after the fact, this is how it was done. But how do we figure out these things? And again, Quarto is the base for us, our users, or Quarto users. It's the best way to start out because most of the things are already done for us.
And in this case, you can use so-called SCSS variables to just throw in a SCSS, so-called SCSS file into your Quarto document, set the theme to that file. It really is just a text file that you rename to something something dot SCSS, and then you have an SCSS file. And in there, you can use, as I said, SCSS variables and set them to very specific values. This is really the easiest way you can style a lot of your Quarto outputs by figuring out what the couple of keywords are that you want to use. Here, the first three keywords are the primary and secondary and tertiary color. And I've just set them to some hex code. And by just setting this in this SCSS file, you can immediately transform the output of your Quarto file. Basically, the theme is changed then.
And the same thing could be done for the code background or the code chunk background colors and so on. So you really have to figure out what is the keyword that I need, and then you set it to some value. And thankfully, the Quarto documentation is pretty solid on that part. You can just go to the Quarto website, look for the SAS variables, SCSS and SAS are kind of the same thing. And there, you will see the most important variables, and their names are kind of self-explanatory. And then set that to some value that you want. So that's basically the easy route to easier way into HTML and CSS with Quarto.
Using the browser's developer tools
And once you want to go wild, once you cannot do something with the basic SCSS variables to make the changes that you want, then it becomes time to look at the actual HTML and CSS code that Quarto generates for you. And on any website, you can do this. You can just take your web browser, right-click anywhere, a drop-down menu will appear, and then you can navigate to Inspect. Just imagine that there is Inspect and not the German word for it. And then you would know what you have to click.
I deliberately not clicked Inspect right now, because honestly, this part is scary. Once you open it up, the web developer view will immediately show up, and you will see a bunch of stuff. You will see the HTML, all the CSS, and 1,000 other tools I have never used, or I don't even know what they do, honestly. But really, it opens so many things, and you need someone to kind of guide you through it. But once you have that part, the strategy to make the changes that you want to learn HTML and CSS is pretty straightforward. Select all the things that you want to change. This will immediately put you to the HTML and CSS code that generates that output. Copy and paste that stuff into your SCSS file, and then simply change the values to what you need.
So, as I said, you kind of need someone to guide you through it. You could, of course, try this at home and just click Inspect and see what's happening. But it's always easy to have someone show you where to look, how it works. And once that is done, it's like a 10-minute intro, then you know how to operate with these three steps. And then it really is as easy as I've said, copy and paste most of the things and add the values after the fact.
And that's why I decided to actually make such an introduction, because I cannot do this here. It would take too much time. So this is why you will find on YouTube a Quarto themes guide for HTML and CSS snoops that guides you through that. This is actually part two. Part one will show you more details on the first part that I have mentioned with the SCSS variables. So you can start with part one, check out how far you can go with there, and then use part two to see how much you can get done with the web developer view. And with that, thank you for coming for my talk. And I'm happy to answer any questions that you have.
Q&A
Thank you. We have indeed time for questions. I was much faster than I practiced. So first question, have you dipped at all into JavaScript for enhancing your apps? Yeah, but this is like a scary world. I mean, I have dipped into it, and it is very fascinating what you can do. But I feel like the easier way to all the things you want to change for style, HTML and CSS are enough.
What are the limitations of HTML and CSS in the R context? Like, I can't ask questions back, I guess. So I don't think there are any limitations. I mean, basically all the websites in the world that you see are built on HTML and CSS, and you can see all varieties of websites. And I don't think there is, like, imagination is the limit for HTML and CSS. I guess the only thing that might be, like, in the R context be specific is, for example, the ggtext example. It doesn't accept all style instructions. It only accepts those that were implemented. In that kind of scenario, there truly is a limit. Then you would have to figure, like, something out.
So the ggtext output, that works not only in HTML output, right? And that output can be, that's any ggplot, which you can save into a PDF file. I mean, at the end, it generates an image file, and the way that you need to instruct to make the changes is via HTML and CSS code. I'm not 100% sure what ggtext does behind the scenes with that instruction, but you have to use that language to instruct it to do it. Right, right.
Another question, what is a good way to share your new Quarto themes with others? So I guess if you modify, you know, a document, maybe you want to do that again to another document to use the same theme or same style. I mean, honestly, we would share it, I personally would share it, like I would share all things via GitHub repository. The slide that I showed from Emil here, that's how I got it. I knew Emil shared his themes on GitHub. I just went there and looked into this SCSS file and then put that into my SCSS file. So you just need to share the SCSS files, basically, that's the theme. Basically, and all the resources that you want to have. For example, in this very specific case, there are also images. These are all images. Then you also need the image file for that, of course. Thank you.
