 Okay, I guess we'll get started without a video, but I'm Emily Zaber, I'm from the Cleveland Clinic and I'll be moderating this next block of sessions that are all about reporting and data visualization. So our first talk is by Cara Thompson on building a data-vis design system for a medical research project. So we'll go ahead with that video now. It's always such a joy hearing what people are doing and particularly in the field of medicine. So as a patient who understands something of what it takes to pull off these projects, let me just take a few seconds to say thank you and well done for all the work that you are doing. And I'm gonna be talking today about the process involved in building a data-vis design system that allows a research team to get from plots that look like this to plots that look like this with just two lines of code. We've only got 10 minutes, so without further ado, let's get cracking. So what is a data-vis design system? The best way to think about it is data-vis friendly brand guidelines. We've got a set of colors, a set of fonts, and some simple rules that we can follow to make sure that our plots always look nice and unified. Now, what is it that makes it data-vis friendly specifically? Well, we want to be thinking about purposeful color semantics, which is something that I cover in workshops, but you want to think about colors that evoke certain things that you're talking about, certain metrics or things like color intensity to signal more or something. We want to have some data-vis friendly text formatting. We might have some preferred gems that we want to use as a team. And in all of this, we want to be mindful of accessibility guidelines. And the good thing about this is that the constraints here are tighter than they would be for a more generic set of brand guidelines. So we can apply this to our graphs, to our tables, but also outwards to our presentations and documents and get some really nice looking outputs for the research team. Why would we do this? Why bother having a data-vis design system? Well, it's about so much more than just pretty graphs. It gives us a clear visual identity. If we're doing a large project, we're going to want to be published in lots of different outlets and having a clear visual identity will mean that we're recognized as the team that has produced all of that. And it saves you a lot of energy in terms of decision-making and trial and error. And if you're doing it in our stats, then you can automate the boring stuff that some of us actually find quite fun to focus on the stuff that needs your expertise. There are three key aspects to the data-vis design system. There's the functional aspects. So we're looking at text hierarchy, the number of colors that you need, any symbolisms that we can use, and of course accessibility. Then we've got the aesthetic side. So we want it to look on-brand. We want it to have the right kind of personality in it. And there's some nice little extras that we can add in. Some backgrounds and some options that we can toggle on enough. And finally, there's the implementation side of it. So we want to have clear documentation. We want to automate it, preferably as a package if we can, but we need to have enough flexibility that this acts as a foundation for your creativity rather than something that's going to just constrain you too much. So let's have a look at this project that I've been working on. So here's lots of Clermi's website. And from this, we can start to gain a bit of an appreciation of the colors that she has associated with her research project. We see a professional who also looks fairly approachable. And we can gain a sense of the tone that she uses in discussing her research with other researchers and with the lay audience. The next part of the project involves having a conversation. So I had a conversation with Claire to ask her exactly what it was that we needed to provide. We wanted to look at the colors that she wanted to have associated with the project. I wanted to ask her how many colors she needed. And I have to say that I was slightly shocked when the answer was maybe 30. I wasn't sure that that was doable, but we did pull it off in the end. And also asked about any color semantics that we should include. And she'd asked about a positive to negative scale, but didn't want it to be green and red. So I had a look at how we could do that as well. And I asked her what types of plots she tends to use a lot so that I could make sure that whatever I tried, I could test out upon those types of plots. And also how much personality she wanted to convey in the formatting of the text. When I asked Claire about the colors that she wanted for her project, she said that she wanted something feminine, but not slightly sweet, which makes a lot of sense. And those of you who've come to some of my workshops before may know that one of the things I like to do is start from a photo or a piece of art. So here is the work of art that I thought would be a good starting point for a color palette for this project. And what I did was I took this image, which is a painting by Leon Marocco, and I fed it into image color picker, and then also into the chroma.js color palette helper and took them a little bit and came up with a scale that seems to scale nicely to nine colors, which is probably the maximum that I would normally recommend people use, but because we didn't want the requirement of 30, I tried to push it and see what we could get, and yes, it did work. I managed to get 32 colors that the palette helper thinks are distinct enough. In terms of font inspiration, there are some constraints to work with. So we want to make it easy for the end user, so for Claire and her team. And so we want to find fonts that are easy to find and to install. And also because our plays nicely with true type fonts, it was easier to use those as well. We want something that has versions for italics and bold, and we want it to not do anything too weird with numbers and to include all special characters that we need. So I used Google Fonts and typed in some phrases that I knew she was gonna be using and also some letters that are quite useful in making sure that we can distinguish between them very easily. And this is the font that I suggest for the headers in the plots. The main thing I was looking for here actually was a very aggressive bottom to that G. I wanted it to be very clear that it was a G and not a C because I knew that that would be a word that would come up often enough. And then finding a font that matches that, if you want to be looking into that more, I recommend other version of his font matrix. We've got our colors and we've got our fonts and we're now really onto the implementation stage. What we're gonna do is use the anchor colors that we had a look at just now in the palette checker and create a list with them. And we're gonna call that list Ophelia colors because that's gonna be the theme of this package. And then we can use that list and the colors inside it to create a bunch of different color palettes. So we've got our default one. We can focus on just using the cool colors or just using the warm colors. We can create a negative to positive one. And I also thought I would add in a palette that's just greens and one's just purples just to mix things up a little bit but keep it still anchored in the same group of colors. And what we're gonna do at this point is feed those color palettes into a bespoke function that we're calling scale color Ophelia. And that function makes use of duty plots, discrete scale and the color ramp palette and also the scale color gradient N to use those anchor colors and kind of stretch them out so that we've got enough colors for the plots that we are working on. And I've added a few extra touches to that function so we can reverse the order if we want to. We can say continuous or not. And then there are different color palettes that we can use. So we're using the default one as our default one and then we can change that to the color palettes that we've just created earlier as well if we want to. The last thing we need to create for our package is a theme function. So we've got theme Ophelia and the aim is to remove the clutter to add some custom fonts and some text hierarchy to make sure that the margins are relative to the text sizes and we can use things like element markdown or element text box simple to add some easy formatting for the title and the subtitle and avoid them running off the side of the plot. And ultimately to achieve a consistent aesthetic with very little effort that goes beyond just the color scheme. And again, in building this, I've added a few options that we can toggle. We have it, we've got all the components of our package. So let's give it a whirl. As I said at the start, the whole point of this is to enable the research team to get from a basic plot to a really nice looking plot that fits with the rest of their projects. And we just two lines of code. So let's just show what that looks like. Here we've got a very basic gtplot. This is all the code that goes into it and it produces this which we all have learned to love and to know well. And as I said, two extra lines. We have the color scale and we have the theme and it's transformed into something that is already perfectly acceptable for a presentation or a publication and that fits with the branding of the project. We can also apply this if we've got a continuous scale and if we're using a fill rather than a color. And again, it does the same thing. We might want to increase the text size. We can do that fairly easily as well. And maybe we want to try something a bit different. So let's go for the cool colors palette and remove the background color and see what that does. It works pretty well for the bars as well as the dots. Donuts, anyone know penguins like donuts? Not sure. But again, we can make a quick change to make that work. And finally that positive to negative scale. For this is the last trick I'll show you but it allows us to make use not only of the theme but also of the extra arguments that we can feed into the functions that are inside the bespoke function that we've created. And you can also keep building on your plots. The next steps are to add a table styling function to finalize the documentation to share the package with the whole team. And we'll do that fairly straightforwardly with a GitHub installation from a private repo. We will then provide a bit of GG plot training for the team and keep an eye out for affiliate plots in the wild which I'm looking forward to seeing. That's it from me. I'm not sure if we've got time for questions but if you do have a question just feel free to reach out and we can maybe chat about it over coffee. And enjoy the rest of the conference and I'll see you around. Thank you so much. That was a really fantastic presentation about how to customize some color palettes to your business needs. And I see that Kara was answering questions in the chat. So hopefully everyone's up to date and we can just keep moving since we started a couple of minutes behind. So let's.