{gt} Table Battles || Digital Publications || RStudio
00:00 Introduction 00:32 Jesse's gt table, with a focus on changing background cell color 07:11 Rich's gt table, which uses three different tables to create a fixed-size scrollable gt table You can find the code for each table here: https://github.com/kierisi/rstudio_videos/tree/main/gt/table-battles/01_round-01_digital-publications Learn more about the gt package here: https://gt.rstudio.com/ Got questions? The RStudio Community site is a great place to get assistance: https://community.rstudio.com/ Content: Rich Iannone (@riannone) & Jesse Mostipak (@kierisi) Motion Design & editing: Jesse Mostipak Music: Nu Fornacis by Blue Dot Sessions https://app.sessions.blue/browse/track/98983
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
So designing tables is hard. I was not prepared for that.
Did you notice that this data set has got like tons of like missing stuff in it all through it? It's like, I'm looking around, is there any data around? I'm just seeing NAs, where do I look? It's like I'm in a world of NAs when I look at this data.
But you've got some good stuff here, the stuff that's not NA.
I don't think you're ready for this. I think I'm ready.
It looks really good, I can read the code, sort of.
Jesse's table: working with the data
So it took me a while to get to like what, like you said, right, like what is the data? Is there like data here? And like, how do I put it in a table?
And I definitely approached this of like, oh, I use the tidyverse, so my data should be tidy. And then my first table was just one long column. And I was like, yeah, it's a common mistake. You don't want to be tidy when it comes to tables. Like if your table is too long, you're not, yeah, it's not useful.
And like, it should be like, it's almost like you're reading in a way, you can make it ready for reading and for a person to read, not for a computer to read. If that makes any sense. I think it makes sense.
You don't want to be tidy when it comes to tables. Like if your table is too long, you're not, yeah, it's not useful.
Choosing colors
But this is great. How did you choose the colors? It's always a hard thing for me. I always like experiment with a million colors and I just don't, I can never settle on stuff. So this was a process.
So I decided I was going to look at tax status of California newspapers. And then I was like, California makes me think of like summer, the beach and kind of like the vaporwave aesthetic.
I was just saying that these are great vaporwave colors. Like with salmon, you got like, you got like the blue or turquoise.
So I went in and I was like, so I looked for vaporwave palettes. Basically I pulled a color palette and I used that. And then what's really, what I really liked about the color palette is with the scales code here.
So when I was doing, when I was using this for the color palette, you kind of give it your, I don't know your markers, right? Like here are my five colors, but then because it is interpolating, I guess, or interpreting. Yeah. It actually is interpolating.
So yeah, just like in a graphics editor, those are the marks, like the interpolation points, I guess you can say like new color. Yeah. So it was great because like when I first got the table and I got the columns colored, I was like, oh, this is so much better than just the palette because I'm getting that range.
So then what I did is I went in and I used a color picker in the browser to take, I think it's like this color here. And then I set the alpha to be really light because it looked funny. Like the white wasn't a right color for the background.
And then what was really cool, I mean, I learned so much doing this, but being able to target all of my NAs and have a specific function to turn anything that was an NA, a specific color was really, really cool because it was like, now it's like my NAs match the background and it's not gray. It's not like, I mean, like this is a jarring table. This red is atrocious.
But like, it's not, you know, to critique my own table, the colors aren't informative, right? Like 1977 is not a dangerous number. It doesn't need to be bright red, right? Compared to the 70s, it should be like purple, blue or something like that.
I may be reversing the color palette or things like that, but what I thought, like what I took away from this was how you can actually surgically select colors in gt.
And that was what I think seemed like it would be really challenging and was probably, I think it was probably the easiest thing I did was just, well, besides like pipe gt was like, oh, I want to, you know, as long as you know what something is called, you can target it with a color, which was super cool.
How did you do that? Can I see the code for that? So data color did one thing, but you did also, okay, so you did it for like different columns, right? Years of operation, year founded.
Yeah, it's kind of neat because I guess you have to do it that way because like there's different like domains, right? If you did it like all together, it'd be like sort of messed up because the data is like different, so.
Fonts, footnotes, and Markdown
And then, so like that was where the font came from was because. Oh, it's a Google font. Okay. It's a Google font. So I was like, I don't want to deal with downloading fonts. I don't want to pay for a font today, you know, like use the fonts you have. So I was like, what's this? And this is like, cause everybody can use this font, right? Cause you have internet access. It's kind of like super simple.
As long as you have internet access, you can, you too can use this incredible font.
I feel like you do a really good job with footnotes and source notes and I just wanted to try them. Yeah, try them. If they don't work, then like, at least you tried. I tried. This is pretty good though because you don't have like a huge, huge table so you can get to the bottom without like scrolling forever.
And then because of the calls we've done, I was like, I can use Markdown. Yeah, Markdown is awesome in these tables. Like look at that. You just put in some links and stuff, which is great.
So this, but like, it was, it was one of those things where gt, I think is deceptively simple because sitting down to do this, I was like, oh, I'll be able to knock this out in like 20, 30 minutes. And then I was like. I mean, you could, but. You could. It wouldn't be like this.
So it was, it was really interesting. And like, just, you know, we've talked about a little bit about like preparing your data for a graph or a plot is very, is different from a table. But also then I was like, what would even be interesting for a table? Because a table, you know, you're not necessarily creating a table for the same purpose as a, um, as a plot.
I don't want to like average everything and only have six rows. I mean, you, you have tables where you want that, but I was like, no, this would be like an overview. So like how granular do you get with the data? It's like almost like it has like the same number of considerations, but they're totally different.
Rich's table: a fixed-size scrollable layout
Okay. So we have links. They're nicely styled. Check out this underline. It's not right below the text. It's a little bit further down. I like nice links. It's also colored in a way which is not defaulty. Okay. Who wants defaulty?
So I'm going to click on it and it opens in another tab. Check that out. And it faithfully opens up. So this is kind of like a little catalog for these cool pugs that, you know, like people have been, you know, like looking at in this data set.
Wait, so what I'm missing is you're going from that like nice summary table. And now we're scrolling down. What? Can you go through that like real quick? Like, can you show me again? What is, how does this work?
Okay. The trick to having a frozen header and a frozen footer. Is to make multiple tables. Three tables to be exact. It sounds nuts, but that's the only way you can do it. Because like every other way is like prone to failure. So these are multiple tables. Sort of like long, you know, long together with HTML tools.
Okay. So there's a div here. There's a div here. Another div. Another div. So it's like three divs within a div.
But yeah, this middle div is like basically the body and I've hidden the column labels. You can totally do that. You can just see there's another option and tab options, just like call labels hidden. True. And then it's gone.
The only major thing you have to do, and this is like super, super important. Is you have to set the widths of each column. Okay. In each of these tables. Otherwise it just fails. You just get misaligned stuff and it'll just look horribly bad.
The only major thing you have to do, and this is like super, super important. Is you have to set the widths of each column. Otherwise it just fails. You just get misaligned stuff and it'll just look horribly bad.
But that said, this is a pretty simple table besides that. But I did a lot of prep stuff. So I ran the table. That's not my deal. I put that in one file because I didn't want to see this again. So just source it in.
Data preparation
Another kind of thing, cool thing I did is like there's lots of different places that these papers come from or publications. So I went to like this census page and I tried to like have groups of states. Because I figured, you know, like, you know, I have to have some sort of like grouping. So I did like this, like West, Midwest, South, Northeast, Canada. Cause you know, there's Canadian stuff in there too.
And these are like maybe dubious groupings. Cause some people will say that these are not actually a South, but that's what I found in this publication. So I'm just sticking with it. So I have all these states and the cool thing I want to do is, even though it's here, I want to group them together. Otherwise they'd just be like sort of all over the place.
First of all, all the URLs didn't look so great. I didn't even know some of the didn't work. I went through a process of just checking each URL. I made this function is valid URL. So basically I'm just, you know, and it takes a long time. Understand that because there's lots of these and it has to check each one, make sure it returns a 200.
So I check all these and then I just filter and I say, okay, I do this. It takes like 20 minutes. It's a long time. I just went away. And then I just started like wrote into an RDS file, read it back again. It's like a checkpoint. Never have to do it again.
And then I do a bunch of link cleaning, get rid of like the HTTPS, get rid of some other cruft that's all in place. Some of these like links like lead to like donation pages or like contact pages or about it's like, oh, just give me like the base URL. So I was pretty careful with my G subs here to just get rid of stuff that was safe to get rid of.
And then, yeah, a bunch of arrange these factor to make sure that these states were all in the same order as here. And then, yeah, I just capitalize a few things, you know, make sure it looks nice. I change a few things, you know, for profit, just to FP. I like the short forms. This fits nicely.
And then, yeah, languages. I noticed that there's some like inconsistency there. I just cleaned it up to either EN or ES and I made the table.
So I made the links, obviously, like right here, you know, like this, I use publication name, the cleanup URL. I made a pattern that made the link from HTML. If you use calls merge and you make a pattern, this is not escaped. So you could basically use this as HTML that appears. It's like a little bit of a loophole, but I'll take it.
Building the scrollable table structure
Super important if you want to do this sort of table, which has tons of content and other table bits around it, you need to set the widths of each and every column. As long as you have a few columns and you have everything, you're guaranteed to have everything set with the width. So it's like, you know, it doesn't like change with the content. It's basically what you don't want.
I use lots of these opt functions as you do as well. Like, you know, all caps for giving this cool look around. Like some of these names are super long. So what I've done was I've targeted a bunch of these that had lots of characters. I just guessed, you know, I just tweaked this number. And basically if number of characters is beyond 30, we'll just change letter spacing, make it a bit more tight. This is like kerning, but not official kerning for the font. It's basically like this works with every single font. Same with URL. Those are even longer in some cases, even though it's smaller. So I cut off 75. I made it even tighter in some cases.
Yeah, so that's what I did there. And I even like fooled around a bit with some CSS. This is how I changed the links to be just a bit less defaulty and a bit nicer. I just changed the color to be dark cyan. And this really hard to find parameter, text underline position under. This makes it so like this line, the link underline is a little bit further away from the text. That looks nicer.
It's this is like publication ready. You could put this in a Shiny app. I think I could. Right? I can probably get away with it too. Yeah. Like you could put it in a Shiny app. So now you're taking up a very specific amount of space, but you're still getting that level of interactivity with a scrollable table. Exactly. It's all about the divs. Like anything scrollable within divs.
So let me show you the other thing I did, which is the top part. So what I did was I realized I had to split it up. Otherwise, it would just not work. It would just be terrible. So what I've done is I took a lot of the code that was up here in this main table. But I took the parts that I needed. So here's a little trick. Here's a table with no rows, but has the same columns.
You kind of need that, right? Otherwise, you can't do any of this stuff without it. So I just copied that stuff, made calls label change. I kept that the same. I guess I didn't need it above because I basically just want to hide it. So let me show you the thing where I hide it.
There's more. There's so many layers to this. It's like an onion, which is like a huge onion. So there's many layers to peel back. So basically, so this is the same stuff as above there. We need calls width, just like before. I put this on there because this is essentially Chrome that goes on the outside. So you need to have this. You need to have a table font. You need the alignment because that affects the alignment of these as well.
And then on the next page, which is basically sourcing in everything that came before that, which is basically those objects. Now I'm using HTML tools and divs to create the different parts. So they say three divs inside one other div. The main thing is that you just use tags div. And then you put your content in. And the key way to get your gt table content out is just use as raw HTML at the very end.
So this makes something, but this dumps it as HTML. And this is a totally cool thing. Like this will just accept HTML. I like that. So you don't have to write. So once unpack that for a second, you're saying you don't have to write any HTML to get HTML tools to recognize HTML.
Yeah. The key thing is just like outputting it as HTML. If you just use like the gt table object right now, it doesn't recognize it as having HTML. So it's like, what is this? So if you just do this, you're cool.
And another cool thing you can do is see the div. We have a comma past HTML content. We, there's no argument there, but you can put a style argument. And then you can use this helper function for HTML tools called CSS. And it just helps you like, like write the different style rules for the div, like the inline styles, which is kind of, so I can set the overflow. This is actually super key. You need to have like the height 500 kicks to make sure it does this. And you have to have these overflow settings set up like this auto. So it scrolls.
And then finally, let me show you the thing I did. Oh, yeah, right here. Column labels hidden. So we did that because we took that Newsworks gt table and just, you know, tweaked it a bit too. So it wouldn't show the column labels again. So if you scroll to the very top of this, it's not repeating this. It's just like the table part, like the body part. And yeah, that's the like tweak I made for the body. Just making sure the column labels are hidden.
I did the same thing. You can just take the top. So I called it Newsworks gt top. And then I basically just made that hidden as well. I had some source notes. And then I did the same thing. I ended off with the raw HTML. And then I got this at the bottom because that's in another div.
I didn't have to style that. But then at the very bottom, there's a style like block. And this refers to the other div, like the very first one. I think it got confusing with all the commas everywhere. But this is basically the style for the entire div, the other div. And basically, yeah, I just made an order. I put some background color inside. Pretty nice. You can use this wherever. It's just like on color names. Just for fun. Just remind me that I still have this function. It's in gt. So I did a bit of that. Made the order thick enough. And it looks pretty sweet.
