Teaching data visualization with R entirely in Quarto (Claus Wilke, UT Austin) | posit::conf(2025)
Teaching data visualization with R entirely in Quarto Speaker(s): Claus Wilke Abstract: When teaching a programming course, we may want to employ several different modes of content delivery. First, slides. (And it should be easy to integrate code and code output into them.) Second, practical exercises, where students can try out programming concepts in a guided manner. Third, an in-class live programming environment, to ad-lib during lectures. Fourth, a framework for graded assignments. Fifth, a class website. All of these components can be created with Quarto and webR. I will explain how I used these technologies for my data visualization class at UT Austin, covering how the different components work, what issues I encountered, and what I think best practices are if you want to create a similar course yourself. Materials - https://github.com/clauswilke/PositConf2025 posit::conf(2025) Subscribe to posit::conf updates: https://posit.co/about/subscription-management/
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Something every teacher knows is no matter how much you prepare, and we just saw this, things will go wrong. And I had an anecdote, but we'll skip that. You saw it, right? Things will go wrong. So that means I'm always on a quest to just try to simplify, simplify, simplify. How can I think make things simpler, cleaner, more streamlined? I mean things will still go wrong, but every like element of complexity is just an additional point where something goes wrong.
And so let's think about that in a context of an R-based data science class, which is essentially what I'm teaching. Data visualization, the students learn how to think about visualization, but also how to make visualizations, and we use R throughout. So there's various components that you need, right? You need slides, and it's slides with code and output because I'm teaching code. So PowerPoint is maybe not the best option there, right? Even though otherwise it might be a great option. You need a website, probably. Somehow the students need to find all the materials. You need interactive exercises, at least that really enhances your class. You need student assignments. The students somehow need to be given something that they have to do, and maybe also you have like little shiny apps or so that just demonstrate some concept of your class, right?
And we can do all of that in the R ecosystem, and like traditionally we had different packages like Scharingen for slides, and LearnR for interactive exercises, and so on. It all works fine, but honestly it's a hodgepodge of different technologies, and many of them can pose various challenges. And I've used them all, and I've run into challenges with all of them.
Just one example of the types of challenges we may encounter. So we can use LearnR for interactive exercises. It works great, except the problem is it requires a running web server, because it's a shiny under the hood. Sorry, I'm not sure if it's shiny, but under the hood it needs, actually it needs R, right? Because it executes the code, and so under the hood it needs a web server that can create substantial overhead and cost if you just want to run this for your class. You may need IT support at the university, or you buy a commercial service which is expensive. It just doesn't work very well. Then you have the alternative. Students can run LearnR documents locally, and that works. That's actually what I've used most of the time, but that's really confusing and ugly. You tell the students, oh, download this thing, and then start RStudio, and then you run this, and then up comes another website somewhere that you don't understand where it comes from, but there is where you do the exercises, right? Great failure point, like something will go wrong there.
Discovering a unified Quarto workflow
And so I was thinking about like last, about this time last year, the last PositConf, I don't know exactly when it was, I was thinking about planning for my spring class. I always teach in the spring, and all the issues that I had, and so I was thinking how can we streamline and simplify all of this, and it all fell into place for me at the last PositConf, and in particular this particular presentation, which was the first one of the conference. You can watch it there on YouTube, and George Stack was introducing WebR and QuartoLive, and that is really amazing, and I'll show you that in a second. So you can now do these live exercises actually in a static web page, which means all this overhead is removed.
And then Charlotte Wickham introduced types, that's like another one of my pain points, like the student assignments, I want them to do PDFs, and it's always a headache. Like either they use LaTeX, and the result is kind of ugly, if we're honest, but also then they need to install LaTeX, something will go wrong, or the alternative is you tell them, well make an HTML, and then open it in Chrome, and export as a PDF. That was always, you laugh, that was always my recommended solution, because it actually looks better, but it's even more like, and then somebody manages to somehow create a screenshot of the HTML, and stick that into a PDF. I don't know, every year somebody did that.
Okay, so we now have types, and so that means all what we now can do, we have all these components, and we can just replace them all with Quarto, and so that means we have a single unified framework, both for the instructor, and actually also for the students, right? So I'm using Quarto and Reveal.js for my slides, I'm using Quarto websites for the websites, using Quarto Live for the interactive exercises, the assignments are also Quarto documents, that with types are converted into PDFs, and then if I have any apps, I use Shiny Live to just run also my Shiny apps as static websites, and so that makes, takes away a lot of my pain points.
And at the same time, literally everything the students learn connects to how I'm doing things.
And at the same time, literally everything the students learn connects to how I'm doing things. If they want to know, well, how did you do the slides? Well, here's the GitHub, here are the sources for my slides, you can look exactly what I did, right? And even though that is, like, for many students, that is, like, we're not going that into the weeds, some students will want to go into the weeds, right? And they can, and they can go as far as they want, or even just telling them, look, everything you're learning here today, which is just basic ggplot in a Quarto document, there's a direct line from that to everything I'm using in my class, and if at some point in the future you want to do similar things, you can.
Tour of the class website
Okay, so this is my class website, where all my class materials are, and you see the little GitHub button, it is all on GitHub, but what I've done for today, for this presentation, and for you, is I've actually created a little, sort of, stub website that has all the elements, but really pared down, so the QR code should send you to that website, you can try that, and it's essentially a copy of my class website, but again, I have only one example of each thing.
So first, we actually have the talk here, this is the talk on the website, as you can see, and if you keep going, then comes again, slides all the way down, took me a long time to get that. Then I have an example worksheet, I'm not pulling the live worksheet up, you can do that on your computer, I just also have a little video, so this is what the worksheets look like, they're just Quarto documents, but then you have R code in there, there's a little exercise, and you can have hints and solutions, right, and then I'm just copying now the solution, and pasting it in just to show, then you run code, and you get the output, but of course it's live R, so you can run any code you want, right.
Then I have a Shiny app, and the Shiny app doesn't really do anything, it's just a demonstration of how you can easily integrate a Shiny app into your site, so this is what happens when you click on that, there's like a little icon for a second, and then the app is literally the demo app from Shiny that just allows you to to click through various data sets in R, so the app doesn't do anything, I was just trying to keep it simple, right, everything is on GitHub, so you can go, you can figure out how I did this.
Technical lessons learned
I just want to, I have plenty of time, I just want to go over some things that I've learned, and some of them may be a bit technical, but I thought, you know, I have some technical tidbits here and there for those of you who may have struggled with similar things, like this, I really struggled a lot with this, even though it's kind of obvious, live HTML pages need separate theming, so in your, if you have used Quarto, you know there's a quarto.yaml file where you set up all your settings of like what theme do you want, and so on, and if you use regular HTML documents, and you use live HTML, so those are the worksheets with the live exercises, you actually need to write all your theme information twice, here I set the theme for HTML, and then I separately set the theme for live HTML, and if you don't do that, they will crosstalk and create weird things, and that took me like three days to figure that out, you know, I was changing my theme code, and it just never looked right, and like sometimes it would take, and sometimes it wouldn't take, and I was extremely confused until I realized, oh, the live HTML was sort of interfering with the theme, so that is like a really subtle thing that you can run into, and it can really cause you a lot of headache for no good reason, once you've done it like that, it's fine, it works great.
The other is, if you're using reveal.js to make slides, you're basically becoming a web developer, like I wrote a lot of custom CSS code, like the developer tools in Chrome are your best friend, right, like this is, I mean, I've learned a lot of web development over the years just from making slides, and I spent three hours yesterday trying to get those videos to start synchronized when I go to the slide, and it turns out that's not possible, not with my intelligence in three hours possible, for the simple, so video tags have auto play, right, the problem is the video starts playing when you load the slides, because this is just one big page, so I wanted the video not to start when I start talking, but when I go to the slide, right, I tried JavaScript that somehow tries to detect when the video shows up, and it would start the video three slides before the video came, I don't know, yeah, that's the kind of stuff that eventually you run into.
But the one positive thing is that deploying shiny apps using this shiny life is super easy, if you have an app that lives in a folder so you can run it in this traditional way using the shiny app function, then deploying it as a static website is literally as complicated, like this takes no work at all, like there's no reason whatsoever not to write all sorts of shiny apps and just deploy them as static websites, and if you are, if like that doesn't make any sense to you, like why am I harping on this so much, shiny as a static website means you just have a file, you stick it anywhere on GitHub pages or whatever, and it's there, you don't think about it anymore, you don't have to think about who is paying for the compute cost, is the user that is running it locally on their machine, it's extremely easy, right, versus running shiny actually as a web server is like a real deployment headache that as a teacher you probably don't want to get into, so this has really been a huge improvement for my personal workflow.
Challenges and caveats
Okay, however, it's not all roses, I've already said a couple of things, like, yeah, you write web pages if you're making slides with real JS. I would say the biggest overall issue that I've had with Quarto is because it does so many things when you try to Google how to do something, you often get the documentation for the wrong thing. I want to style something in the slides, but I get the documentation about how to do it in a regular Quarto document, right? And then it's mostly the same, but there's subtle differences sometimes, so that's probably, I would say, and it's just inherent in the fact that it's one tool that does all of those things.
And of course, the other thing is the moment you change your methods, your workflow, there's learning curves and some things that you've always relied on just don't quite work the same way. So there's this transition cost. For me personally, it was absolutely worth it, even though going from Sharingan to Reveal was a lot of work. Every slide set probably cost me two or three hours to redo. Once you've done that work, it's great, but there's these subtle differences that take a lot of time and effort.
Is this approach right for you?
Okay, is this approach right for you? I think it's really many levels that you can be on. If you have never used Quarto at all, I would encourage you just try it. If you're familiar with R Markdown, going to Quarto is really, there's no learning curve at all, right? If you've never made a website, just try setting up a Quarto website. Also extremely simple. If you have used Quarto, but you've never used the live exercises or the live apps, I would also encourage you to try that. And if you need to generate PDFs, look into Types, because it really is going to make your life easier for PDF generation.
Okay, and that's it, that's the QR code once more to the website. So if you get a chance, put questions in and upvote as you like.
Q&A
First question, when using Quarto Live for interactive exercises, how do you monitor slash evaluate the student's work? How would this integrate with LMS platforms? Okay, so I don't. So, no, no, no, this is actually very deliberate. So I see the interactive exercises as a self-study thing, right? Sometimes what I do is actually in my lecture, I have time where I tell the students to do work. And so then I say, okay, pull up this exercise and do it. And then I may walk around this.
By the way, if you're not doing this, I really encourage you, have some time in the class where the students are doing something. And walk around and talk to them. It really builds a connection between you and the students that you don't have if you're just, even, this is a small room. I teach in a way bigger room, right? Students at the beginning are always shocked that they sit in the very back and I walk there and say, hello, how are you doing, right? The other thing is, every time I walk up to a student and I say, do you have a question, they go, no, yeah. But if I just ask, does anybody have a question, nobody asks a question, right?
So having them do something and then walk up to them, great. But I don't use the interactive exercises as assignments. The assignments are separate. I just give them a Quarto template, and then they have to fill it out, turn it into a PDF, and then that is the assignment that gets graded.
Do they do that through GitHub or something, or is it just more like some other method to send the assignments to you? So at UT Austin, we use Canvas. And so they just upload the PDF, and then actually it's very easy, and this is why it has to be PDF. As the grader, you can then go in and annotate the PDF. You can directly say, look here, in this particular, this line of code is wrong, or this sentence doesn't make sense, or so. So that is nicely integrated, but it's manual. Or we also do a lot of peer grading, then the students grade each other.
I think we have time for one more. Let's see, how are your students feeling about Quarto workflow? What's their feedback that you get from them? I don't know that they, they don't know the difference, right? I mean, I tell them, well, do this thing. Here's a Quarto document, press the button, and it makes a PDF. And they're like, okay. I would say the previous iteration, they got confused at many steps. Creating PDFs was extremely confusing. Doing these interactive exercises by running a shiny server locally was extremely confusing. So I think lots of things have just streamlined for the students with this.
