{gt} Table Battles || Eurovision || RStudio
00:00 Introduction 00:07 Jesse's gt table, with a focus on flag emoji and interactivity via a Shiny app 09:50 Rich's gt table, with a focus on CSS and embedded animations Code: https://github.com/kierisi/rstudio_videos/tree/main/gt/table-battles 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: Gemeni City by Blue Dot Sessions https://app.sessions.blue/browse/track/113567
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
oh my god this is so similar to the table i have of course it is i wouldn't know i mean like we get the flag i've got that too okay so i went down i was like what i wanted to so like the original attempt was i wanted to put here's the so it's grouped by country and what i wanted was the australian flag next to australia and the austrian flag next to austria etc etc oh yeah i got you i got you yeah couldn't get it to work oh yeah the reason is is because it's like a row group and it's really hard to like change the content in a row group yeah so i couldn't target the row group so that got really frustrating was i couldn't do that and then it turns out flags are really hard yeah to work with and i got very lucky because someone oh gosh um
let me pull up his name so that did you go to the table gallery to get like some pointers because like there's some good flags in those tables
that's okay you got to the answer so i you know so just say dr liam bailey whoever you are thank you you are like this oh this is like timely it just got published this is fresh just got published and i was like this is what i want you know i want a flag so anyway the dreaded that's all the dreaded table oh my god this was about a table in an academic paper it's it's oh yeah i can see about how much they really like gt so it was really it was rarely do i find something that is almost verbatim what i'm looking for but i was able to just like scroll down and be like where did you put in the flags fantastic so then i learned about the country code yes definitely need that so yeah so this this saved me but like we're talking because i think maybe for context right i don't know how much time you spend on i mean you work with gt but i i usually have time yeah three or four hours on a table and i spent three or four hours getting the emotes the emoji to work oh sorry i didn't know it was that crazy no no no it's it's tough because you have to do a few things have the files yeah available and then you have to like use text transform and then like the other image function yeah then once you have those three things in place it's not so it's not that no it's so it was like a huge learning experience
i spent three or four hours getting the emotes the emoji to work oh sorry i didn't know it was that crazy no no no it's it's tough because you have to do a few things have the files yeah available and then you have to like use text transform and then like the other image function yeah then once you have those three things in place it's not so it's not that no it's so it was like a huge learning experience
Jesse's table: scope creep and Shiny
so my whole thing with this table was the scope creep because i was like i'm gonna do this and then i'm gonna do this and there were so many different things that i wanted to do with this table um that i just i didn't get to all of them but yeah so here's here's where i left off um and like styling wise i think it it's like not quite there but it's close
no it's really good i like the title that's that's an image right like eurovision song oh that's font oh that looks so much oh yeah you're right because i see the emoji in the middle that looks so much like the real like i'm not not real but like there's a bunch of like eurovision logos yeah search and that's like that's really close yeah so i looked like what is the font and then i tried to find it in google fonts and so the closest i could find was something called rock salt which is let me let me open my little outline here i've had to start outlining all the funny that's a good it's a good thing to do totally good thing yeah so you are euro and then i put because i then i was like yeah i put a heart in there and i was like oh
it's all marked down so here's where i can use the packet so i'm ultimately like i'm i'm happy with how far i got but then this is not finished i did start down this route and i swear to god if it doesn't run i'm gonna what were you planning on doing oh i see what you're doing you're you're like so oh you got some shiny stuff happening you got this is a shiny table it's a shiny table
okay this is great this is great so it's not quite where i want it like this was what i was working on this morning was like how can i just get a table that you know responds to a couple of different inputs right yeah this is brilliant uh but yeah it was really cool to make but you know like there's a beautiful gt well beautiful in progress gt table that is now responsive to different inputs which i thought was cool so yeah this is great basically it's like a reporting table and you can imagine like doing this for anything you just have to have like the framework in place i guess yeah yeah and so the code for this wasn't too bad i i started playing with pins i made a whole bunch of sweet coding coding things that need to be fixed up yeah
so yeah i fixed up a bunch of things i'm not sure this is the most effective way to do it but i did just take essentially the data table made it reactive um built the gt table just from that reactive inside render gt yeah it's not bad okay once you put it that way this is it's like two or three steps basically right yeah so it's basically what you need is you need a data frame that's going to respond to input so you need a reactive data frame yeah um and what i basically you know this is pretty straightforward i wanted it to filter the resulting data frame based on the artist country which is what you're grouped by and then the rank so just rank one two or three so set that up as a filter set that up as a reactive and then you call it as a reactive data frame before you pipe it into your gt table nice that's cool yeah that was that was something where i was like i feel like this is easier than it should be but it's kind of cool so you set your choices and that's cool because you keep being safe but you're just like limiting it to like things you know are there
like one to three yeah yeah i filtered one to three and there's different ways you could do this like with the numeric input but i was like let's just select eyes and see what happens i mean you can you don't even have to do a selected to start you can just kind of um right so you can start with just a blank table and then i think there's something that could be done you know obviously to clean this up a little bit um this is cool they got multi-select so those are like the the countries of like where they have this is any country oh i see being in the host country yes exactly no so this is any country that has had an artist oh got it okay great so it has nothing to do with like their winners or or not yeah i guess so no there's two different things so here's so your host country is what let me explain rank of course yeah yeah who has never seen eurovision here's what i know the host country is where the event is yeah yeah yeah and so then this is where the artist is from oh okay got it okay this is why it's kind of confusing with the flags because it's like oh it was held in austria and then these are like
that's there's there's some weird stuff so basically cesar conchita and udo are all from austria but this was the year and this oh in the event yeah i got it it's tough because like i ran to that exact same thing like there's like two sets of countries per line and so you really want to make it like especially like you know just like one each one's a year so like you have to really spell out like how do you make it so like people don't get like uh misled to think like this is the where the artist the winner's from and this is where the you know like the contest was held
yeah so i think there's there's definitely a clearer way like this still needs some work to make it a little bit more clean like to make it very clear actually as to what you're looking at but i was pretty happy with how far i got yeah that's amazing there's no animations
i can't even find it i have a piece of paper like all the things that i was going to do in this table and so i was going to get these like beautifully styled links that take you to you know and i'm pretty sure this is where we're going with yours like no it's actually it's actually tough to have links because like there's i guess they only go so far back maybe they do in the day i'm not sure i don't know if like all the previous like pre-internet obviously since this thing goes so far back that's a good question there's pages for all these things yeah so that's a dead end anyways that was one thing i was like oh that's like i finally decided like adding in links would be my really really nice to have so it was like okay one get the flags two get it in a shiny app three i wanted because you can get links to the artist which i i thought was cool but then from the artist page you can actually get a youtube link yeah do their song and then i was like oh that would be really cool and then i was like what if you could also embed that somehow in the shiny app so you could like pull something up um the coolest thing would be like you hover over like a row and it plays the song oh my gosh and that'd be like next level or something i didn't do it but i'm just saying like that's an idea i mean there's an idea you just play the song do it
just plays a song yeah that would be really cool so like i feel like also out of all the data sets we've looked at this was the first one where i was like there's so many different things you could do with this data set like this felt like a really good table data yeah great data set great table who can ask for anything more like this i feel like whatever you're about to show
Rich's table: GIFs and animated CSS
so as you can see it's a bit long there's some stuff in there but should i just run the whole thing just like let's see it i want to see what this is it's gonna run it's gonna appear here i'll expand this out oh my god i know i know it's a little bit insane i got little mini videos tiny videos they're like little gifts so you know no sound but still like if you have sound it'd be like a cacophony of sound check this out i didn't go too far back because you know like i wanted to like just you know yeah yeah exactly and i did i did what you do i i did some video editing i got some source material and i just said okay let's uh let's make you some gifts let's let's brew some gifts so i use gifsky okay manually i didn't do it in r because i'm you know i don't want to do more r for that sort of thing so i just took i screen captured a bunch of videos off youtube i basically pirated some youtube and uh yeah it was great the results are awesome look at this you get like you get a feel for like what happened in the final sort of thing um you know it's really nice like look at all this is like can i zoom in no i can't zoom in oh well oh yeah so this is like what you were talking about where right you could get the gift preview but then like hover over and then you get yeah that'd be like super nice like that's that's pretty cool and uh yeah these are really good they're mostly like uh the videos from like the final because like eurovision hosts all these for some reason for this one i got like the music video and it's just a naked guy in water so i wasn't too happy about that wait i was like your header is changing colors wait go back yes okay check sir it's basically animated yeah so i thought like you know it gets some flash going you know like yes you know this is where i started i was like playing background uh let's make that made it just names of songs let's get some video in there i don't know how did you do that like how all right okay let me show you i'll show you okay
so check that so and just scoot this off to the side because we've seen enough okay so basically uh yeah i got the data that's just a thing i have another file fine uh so yeah i have a bunch of so the logo i i took that from wikimedia it's nice because it's an svg and transparent background it's nice to have okay so that's what i got there uh okay so the table i'll just run through this and bring this down here so i did a ton of like deep wiring like beforehand yeah i didn't want to but i felt like i had to so so check this out there's a table like on the end it's pretty stripped down um but the key thing here is like i have like a whole directory maybe you have the whole directory maybe you have the same thing like these country flags as svgs where'd you get yours data dot world okay yeah wherever you got them you know like you just you did what i had you i got these on github github just a big old directory full of like these uh three by four flags they also have one by one versions but they're svgs and like uh you can totally use them so i put that directory inside the files folder where this lives uh i did some weird things like make this all capitalized just to have some differentiation between like the city name and the country name not because i really like all caps uh but it was just like underneath
and give it a font because so there's the flags so i do the same thing text transform here's the flags so if i just run this this is actually kind of cool i've never run this by there we go yeah it's in a separate column and come in here i'll show you some cool tricks later about how you can like put these together but preserve like the column name starting here uh but anyways so the videos are actually in a folder so eurovision videos i just made a bunch of gifts and i call them by the year okay that way i can copy the year to a separate um like column and then like change it to have like gif in the end um that didn't work uh how do you even do that oh i i know because i had gift at the end okay right here so i didn't have to do anything here so basically text transform the same way you can still use local image because like a gif even though it's animated is just an image so it'll still do its thing so if i run this just like up to there and i expand it there they are sort of in its proto form uh and yeah there's the years so let's kind of keep going so i didn't like uh for some reason i didn't like the video being here so i moved it over these are just things you do to adjust things yeah so now it's going to be over there on this side and then like tell us on the very end because i want you know like the videos to be there and then like this is like left aligned these titles i don't know why this is all cats i think that's a mistake but or it's the name of the song i think i looked at it in wikipedia it was just like toy like lowercase o lowercase y i think it's just like we just got some bad data here uh sorry so then i did like this calls merge thing to do um the host city and the host country so it's just like this you can totally add a line break and then it takes a long because it's videos uh you have like that okay so now we're going to change the column labels i do this all the time i'm going to combine that with like the font and making them all cats just in the interest of saving some time here so we're getting pretty close a bunch of options to change colors uh and what did i do here oh yeah cell text to be a bit smaller okay we're getting there
there you go so background color i want to make it like a dark color because you know like these happen at night i want to evoke oh yeah night i didn't quite get there because it's not dark enough but that's okay i think this is pretty good it's kind of like a middle ground uh column list i set those all because i want to be like super i want to leave just the right amount of space between each column like where like the longest word or phrase ends we have a little bit of space so it's kind of like super nice that way okay and more okay what did i do okay here's a cool thing see how count or it's actually country is like cut off yeah because another column there so when you size yeah exactly when you size all these columns things will get cut off because now the table sees that okay these are precisely all the widths of each column we're not going to like mess around anymore these are going to be the widths any text you have it's going to be cut off but no you have a choice you can like use oracle x visible on that column country emoji because that's actually still called like the column was country emoji so if you do this check this out this is a nice little trick there's always like a solution like a way out of your like weird things so i didn't have the mercials two columns i just did this and just size the columns and this just peeks over here which is totally fine because there's no i took out the column name anyways
CSS tricks and the animated header
see it's totally gone uh country there you go okay there's more uh i changed the font here i want these are song titles i want to be a sort of like you know scripty because you know like you think of like lyrics and writing things it's kind of like a little more evocative if you have like in a script font so i changed it from the from the font from the table to this uh square peg fonts google fonts i made extra large because this is like a really normally small font when it renders it's like super tiny it's like why okay so i just made it x large bump that up okay so much more uh padding which is in the vertical direction i sort of like tightened things up so i made like half the amount of padding so now it's even right here we can sort of see like everything fits just wait you can see euphoria which is great before you couldn't
okay here's the title uh i did the thing where i took that svg which i stole or i stole i borrowed it i don't know anyways i got it i'm putting a line break because it sounds like this is going to be html right here and then we're doing some like i made a div and i put the winners through the years the reason why i put a div in id is because i want to change it later in some css stuff below which you can see right here okay so we're getting okay this will put in that large title okay same background as before but as you know we've it's different in the end okay source note because i just want to call out that i got this from tidy tuesday and i always want to say like you know thank you tidy tuesday for providing this data it's really amazing thing you're doing okay this is this is the part that's really tough
um because this is just like messing around with css and my process for doing this is i just look at something i don't like i just do a inspect element and then like once i'm on the element and i may not be right on it i think i am here but if you're not you can use this it's a little bit tricky in RStudio you sort of like hover around and then find the thing if you find the background you can click onto it then go back to this and you can like mess around in here with different things like background which is red and just changes things yeah so once you know the trick to do that you can really mess around in like these dev tools and then as long as you have like some sort of id or way of like knowing what this is in this case it's what i do i put a background on uh sorry where i put it gt heading because oh geez uh if you look here gt heading is right there class so i'm like oh okay so that's the way to change it so basically i put a table id as well it's sort of a good practice to do that in your gt call you have an id argument if you stick something in there you can do this and if you have multiple tables on a page it won't mess up the other tables you're just like fixing it just one table that's why an id for tables good
um but yeah gt heading and then like i put this stuff this i did not invent i went to a page which is like add like an animated background you basically pick a few colors you change the angle a bit there's and then there's some like css you can copy so i stuck it in here and made sure i worked with gt heading and that's it well not that's it that's how i did the background being all animated and then i did a bunch more stuff like um see i know it's like this isn't red it should be white so i changed that to white somewhere uh right here the only anchor tag we have which is basically this just a color white text underline position under that makes the line a little bit lower lower yeah and then the source note this whole area i found it was kind of too scrunched in so i just add some padding on the top and bottom to compensate oh here's the cool thing you can do um and it's hard to show because um okay i really want to show you this because it's amazing okay i'm gonna take this out and i'll copy it back in i'm gonna show you the before and after because i found that this was like way too low this whole title and that's after just putting like you know like the svg and then like a line break then this but you can totally adjust that and the way i found it is just to inspect elements again doing that trick where you use this right here because you may not be right on top of the thing there we go uh div title text because i had that div with the id once you're on there you can like mess around with things and the thing i messed around with was this right here uh not font size is one thing but this is an important thing padding bottom that'll push it up margin top if you put a negative number that'll sort of like push it more up like it'll take away the space okay like right like the natural space between the two it's gonna yeah it's like super weird that it works but it's a great thing essentially if you look at this right here see that right here this goes way down yeah uh you can like break through that you can like move in like a div below that up into that space just by using the negative yeah exactly yeah if you use margin as well if you use padding it does not work okay if you use margin it allows you to use negative values and you can just like you can rescue your your bad formatting yeah so many things but yeah i did these things and i even included a margin here for this whole thing this image
if you use margin it allows you to use negative values and you can just like you can rescue your your bad formatting
i think that's right no hang on i changed the svg width right here that's this i think image was this right here i found the flags were if you took this out there's some other details here but like these are like little front end things yeah if you're not totally satisfied with the way it looks i found the flags to be like a little bit too high like each other one see how the like the distance between the bottom line was like a little bit off yeah that's what i did here with this and these are the only things which are like images i think it works for these two these are also images okay so when then when you rerun it yeah let's rerun it again to see
it'll more or less be centered now yep yeah nice yeah i was thinking about it should i do this this might take a while it may not work i did with one and i was like oh my god that's so cute oh my god that's so cute you have a little video in here
