 Great, so thank you Irene for the wonderful introduction. I want to make a quick small disclaimer that a large part of this talk is going to be color discriminability when you're dealing with projectors, especially when you have very large windows. Sometimes that might not go as well as you planned, so apologies in advance if there is any complications with that. And so I'm really excited to give this talk, especially because a lot of the other talks that we've already seen have briefly touched on color, and I think it's one of those areas of visualization that speaks to the cross-sectionality that is at that open viscone, right? I mean there's a whole lot of different ways to view color and to interpret it, and I'm hoping to cover a little bit of those perspectives throughout this whole talk. And before I get into things, I also want to mention that a few years ago Robert Simmons who spoke yesterday also gave a talk on color, not covering any of the same material, but it's also I think really complimentary and he covers a lot of good material that I won't have time to talk about today. So that being said, the aim of today's talk is kind of taking aim broadly at this divide that often happens when we talk about visualization design. And it's this constant battle between what we know and what we do. So the supplies and research, you know, researchers often publish papers and sometimes those live in the ivory tower and don't really make it over there, but I think it works on a lot of different levels, right? I mean we could as designers that are educated know that some things are really effective, but in our day to day when we have deadlines so that we need to be meeting, we might not always do what we know is most effective. So really what I'll be covering throughout the rest of the talk are just some examples of how we can help bridge this divide by applying theory through computation, and specifically of course for color. So with that in mind, there will be three different projects all kind of thematically connected through this that I'll be talking about. So the first will be a D3 module that I made that helps us calculate just noticeable differences, I'll be defining that in a little bit if you're unfamiliar. And that is online at the address. The next project is a little bit meteor, it's called Color Goracle, and that is a design assistance tool for making categorical color palettes. And then the last will be another D3 module that I've made which implements this new, kind of new-ish color space that is a new successor to LAB space which we heard about earlier in the day. Great. So first let's just cover just noticeable differences. And before I get into that too, I want to mention that even though that these are specific for maybe D3, a lot of this concept can be just broadly applied to any tool that you normally use. And before I get too far into this D3 J&D package, what I really want to talk about first is just involving one question. And it's a pretty simple one, right? What does it mean for visualization design to be effective? And even though that it's simple, I think it's a really interesting question to consider because if I asked this question to everyone in the room, I would probably bet that I would get very different responses, depending on what your background is, what your interests are, etc, etc. So that's kind of interesting to consider. For the purposes of just right now, we're going to focus specifically on color discriminability and how that can relate to effectiveness. So hopefully, great. So all those colors look discriminable. So there we go, done, kind of. So when we talk about discriminability and we want to precisely measure it, what we end up doing is use perceptual color spaces. So these are different than RGB color space which your monitor uses, which cameras often use. And instead, it measures color with lightness, redness to greenness, and yellowness to blueness. And we also have heard this a little bit earlier, but this is roughly based and approximates opponent color processing. So we have cones and rods in our eyes, and from that we get a signal that roughly corresponds to red, green, and blue. And then what your brain does is it transforms all that through process and out you get these three different color channels, right? Lightness, friendness to greenness, which is A, and B, which is yellowness to blueness, great. So when I talk about just noticeable differences, what I'm really talking about are minimum differentiable color distances, right? So if we take any two colors in this perceptual color space, are they far enough to be differentiable? So you can just see examples in the bottom as we start with the same color and then we gradually get further and further away from that. So when we talk about just noticeable differences, there's actually a lot of different ways that you can measure this. And there's a lot of papers and a lot of different perspectives on how this could actually work. For today's talk, I'll just be looking at one of those. And as I was saying, since we have this perceptual color space, we can calculate just noticeable differences in CIE lab, perfect. What about this? Still pretty discriminable, that? All right, so distance is really important, but there's also this element of size, right? So distance is necessary, but it's not sufficient. So luckily for us as practitioners, people have researched this. So, Maureen Stone, Daniel Abercephier and Vidya Settler at Tableau formalized this relationship in CIE lab and they published a paper about it, which I have a link to at the D3JND module website. And luckily for us again, they were looking at visualizations kind of application areas. So if you have bar charts, the physical area that colors and coding is gonna be much bigger than if we have this hollowed out scatter plot. In addition to these kind of more theoretically abstract squares next to one another and if you're unfamiliar, sorry. And then the results from all of this get boiled down into this noticeable difference function which takes in two arguments. One is a percentage, which you can think about is how conservative you wanna be when you're making things. And there's also this size, which is not measured in pixels, but in visual angle. And if you're unfamiliar with visual angle, if you outstretch your arm, your thumb is roughly two degrees. So that gives you some kind of sense of the scale for that. And then based on this equation, you plug in these two parameters and you get some kind of distance along each axis that you would need to satisfy in order for colors to be discriminable. So just to give a little bit of an intuitive sense for that. This is online, but just record a video. And if you look at the top, you can see the arguments and what happens when you lower the percentage. The interval goes down, the colors become less discriminable. Or you increase it and they become more discriminable. And this is just like a linear scalar for this percentage argument. You can see on size that this is kind of like a diminishing returns curve, right? So if it's a really small mark and we make it a little bit bigger, we get a much greater difference in scrotability. But that kind of evens out after a certain point. I'll just let this finish playing. Perfect. So how can we actually apply this into design, right? So I think one particular way is actually considering color encoded area size in the graphic. And I've actually talked to a few people yesterday and today that we're talking about the difference between designing for desktop and mobile, right? So these are very different situations and maybe you use the same pixels. But when you look at the visual angle, the appearance is going to be completely different. So I think that that's a really important consideration to take into mind. And something that using Jandies could actually help with. The second one is, this is of course not a one fit all scenario, right? Various situations call for various levels of discriminability, which is this percentage argument, right? So if you're making an infographic or if you're making some kind of tool to have emergency response management, those are obviously very different situations, right? And they call for different levels of conservativeness. If you were to use this module in D3, all you need to do is load it and you get access to the function that I was just talking about earlier, this ND function. So you can just give it two D3 colors, optional percent in size. And you get a bool, true or false, are they noticeably different? And similarly you can get this JND interval, which gets the same thing. So as far as how this connects to the broader landscape, I'm gonna move on to talking about this tool called ColorGorical, which is joint work with David Laidlaw, who is my PhD advisor and Karen Schloss, who is a color perception researcher that is at University of Wisconsin, Madison. And just like I was leading D3 JND with this kind of overarching question, I think it's also interesting to look at categorical color palette design with another kind of broad question. And that is, what do you do when you need to make your own categorical color palette, right? And again, I think this is, and we've actually heard this before too, it's very situation-dependent and there's a whole lot of different constraints. But the way that ColorGorical approaches this, and I would argue one way to approach just categorical color palette design in general, is by just trying to define some balance between discriminability and aesthetic preference. And that's great on the surface, but it also requires a really deep knowledge of color science, which a lot of people don't have. And even the people that do have it, like me, often don't spend so much time digging in the weeds to try and get at this balance. So what ColorGorical does is tries to do away with a lot of that, again, kind of bridging the divide between theory and practice, by applying color science to reduce design boundaries. And I'll get into the specifics of that in just a few slides. So for this part of the talk, I'll just briefly go into the background and focus a lot of time on how ColorGorical actually applies this theory to create usable palettes. And actually compare how this application applies to industry standards and talk a little bit about just ColorGorical as a case study for computational design assistance tools. Great, so if you were to load ColorGorical online, you would see this. The link's right there, if you actually do, hopefully it won't get a hug of death. And you'll notice that the very top is just the generate button and right after that is the number of colors and these three sliders. So these are the main functionality of ColorGorical and how it works. So users can define their own situation-specific importances of discriminability and preference and without having too much background knowledge about what each one of those things does. And under that is a hue filter. And I will just show a quick video of what that would look like if you were to interact with it online. Great, so as I was saying, you can change the number of colors. And under that are these sliders, nothing fancy. And then under that, as I was saying, is this hue filter wheel, which you can create multiple hue selections. So this is useful if you only want to look at particular colors. Let's say that you have some kind of brand identity, right? Or if you just don't like certain colors. Below that you have lightness range and you can also add certain colors. So if you do have a brand identity or some kind of style guidelines, then you can incorporate all of that. What that also means is that you can build off of existing palettes as well. So here I'll just generate a preferable color palette so you can see an example. And I'll get into how all of these sliders work in just a few seconds. And right here then we'll just fast forward and look at name difference, see what that looks like. So you can kind of get a qualitative impression already that dragging these sliders does reduce result in various appearances, right? And this last, I think, I'm just, yeah, increasing to eight colors. So how does this actually work, right? It's actually pretty simple if you dig into the code. I purposely made it so that there's not that many dependencies at all, both for if you do want to tinker with it or just for longevity. But as you just saw in that video, all of it boils down to manipulating these three different sliders and the number of colors. And you get some kind of output, right, that the user finds. But a really important first starting place is actually looking at how these sliders are defined, right? So what does it actually mean to be perceptually distant or have a pair of preference, right? So as I mentioned, two of these sliders correspond to discriminability and the first is perceptual distance. And this uses a CIA lab color space that we were just talking about and it's just Euclidean distance, right? So how far is point A away from point B? And name difference work uses research done by Jeff Herr and Maureen Stone that actually uses XKCD color survey data, which I always think is kind of funny. They have 153 color terms and then they look at histograms for those color name associations with every single perceptual color, right? So in this example, you can see that this blue color and this red color have very largely different histograms and have very large color name differences. Whereas this dark blue and this light blue have histograms that overlap, so there's a smaller color name difference. And these get at two different, very different notions of discriminability. Right here you have this perceptual notion. But for name difference, it could be useful if it's a different other applications, like if you're giving a talk or things like that. The third slider is for aesthetic preference and it's pair preference. And this is actually based on a very large scale study that one of my co-authors, Karen, she lost it at Berkeley. And by doing a lot of in-lab evaluation, she was actually able to quantify on average, kind of caveat, what people find preferable for colors and pairs. And so she found that in general, this could be predicted by looking at what are more blues than oranges. You can also look at similar hues and different lightnesses. So just to give concrete examples of that, what that looks like for preferable colors are combinations like this, right? So you have very different lightnesses, the hues are basically the exact same, and they're all cool. For imperforable colors, you might find this preferable, but on average, it's isoluminant, so the lightnesses are the same. They have opposite hue and one of the colors is very warm. Right? So you don't actually use these things. And the answer to that is pretty simple. It's just a weighted sum. So these sliders get converted into percentages from 0 to 100%. And then for any two colors, color-goracol will just compute the perceptual distance, the name difference, and pair preference, apply the scalar, and then you get this color pairs for, right? Great. Unfortunately, there's this other constraint that we need to consider. And that is an assumption that palettes are only as good as their worst pair. So as you can see in these charts, we just swap out one color, but we see very different appearances. This green and this blue are very hard to discriminate, and with aesthetic preference, adding this kind of mustardy yellow on average would probably be considered less preferable. So while color pair score is important, we need to introduce this new concept of palette score. And that's just formally, you know, how would adding a new color C change palette P's overall score? So that's just a random, possible color pair score between this potential new color you might want to add and what's already been selected. So that feeds directly into how color-goracol creates all these things and applies these color science principles into this design assistance tool, right? So if you have sliders, a number of colors, great. You have your output palette. In the middle of all of this, color-goracol will always pick a preferable first color because if you can pick any color, you might as well pick one that's more preferable or more likely to be preferable. Between picking palettes that satisfy this palette score and then deleting any non-noticable difference colors, which used just the noticeable difference function I was talking about earlier. Under the hood, color-goracol also makes 10 of these and it only returns the most preferable since if you can have all of these palettes that satisfy this user-defined balance, you might as well pick the one that looks most preferable. So to do this effectively, color-goracol pre-computes all of these pair preferences, as you can imagine, doing that for all colors in color space are probably pretty computationally expensive. And then after that, it'll filter to only the most preferable pairs, randomly sample from that, and you have your first color. And as I was saying after that, it's just this iterative process afterwards, right? So you have this palette score that's defined by the user as far as the relative importances and their own contextual requirements. And you calculate the palette score for all remaining colors. You filter so it's the exact same process and then just randomly sample from that and there you have your second color. And this gets repeated as many times as you need or until there's no more colors left in color space. So all this is great in theory, but we're also running under the assumption this actually works. So the first experiment that we did, actually validating all of this and also just testing the usefulness of these color design assistance tools in general, at least as they relate to color, is seeing if these assumptions map, can we actually successfully take what we know from theory and apply it into practice? Increase the sliders for perceptual distance. Do we get lower error? If we increase pair preference, do we get higher preference ratings? And to do that, we did this large mechanical Turk survey and we had this discriminability task or they're more left or right side of one color. We did a preference rating task where people just rated these from not at all preferable to very much preferable. And at the end, to just briefly go over all of this, we did find that things were consistent, right? So if you did increase perceptual distance, you got lower error. If you increase pair preference, you get higher preference ratings. So I think this is really cool, right? So we can successfully apply theory and get a design assistance tool. The other caveat, of course, is this thing actually useful compared to what people already use, right? So great. From a research perspective, good job. As far as practice, maybe. So the next step after this was actually comparing what we've created here to industry standards. And to do this, we went as hard as we could and compared against Color Brure for three, five, and eight colors. We compared against Microsoft. We compared against Tableau. The old Tableau colors. We can talk about how it compares against the new color if you're interested. And we also compared against this random condition which we thought would be a good baseline but also simulates someone who just is kind of randomly picking discriminable colors without too much knowledge, right? And I would argue that maybe the top three, maybe all four, broadly encapsulate what most people use when they resort to using colors and visualization. When we're actually talking about measuring against Color Gorkle, we used all of the data from Experiment One to figure out what settings generated the most preferable palettes, what generated ones that were preferable, but still pretty discriminable. And we used those in these comparisons for this experiment, right? And as far as what this looked like, I was basically the exact same experiment that I just told you about, right? So we tested discriminability. We tested preference rating for three palette sizes. Just went over the different palette sets. There were six of them, and then we had four versions per set. So a decent number of trials per person, right? And we went into this with predictions that were actually based on linear regressions trained with Experiment One's data, so they were pretty precise. And based on this, we thought that for discriminability, Color Gorkle should be pretty much middle of the road, right? It should have comparable discriminability. And as far as preference ratings, it should be typically more preferable. So when we actually look at the results of this experiment, I'll just start with what Color Gorkle results were. Here you can see the low error in orange, the preferable results in red. And when we introduced Color Brewer, it's basically the exact same as this low error setting, which is just already a really cool first result, right? And what about Microsoft? A little bit worse. Tableau. Basically the same as low error. And random. Great. So from all of this, we looked at the statistical analyses, and we found that Color Gorkle's overall comparably discriminable, which is great. You know, this is on-the-fly-created, customized pallets, right? And they're as good as these industry standards, which are carefully crafted and are widely used. So I think that's great. But we also need to look at this second bit, right? This overall preferable ratings, because if you remember the whole motivation for this work was to not just create discriminable pallets, but also ones that might be preferable, right? Give the power to the user to find their own balance. So to do that, we're just showing the Color Gorkle results first, just as before. Let's add in Color Brewer. Not too good. But very discriminable. So we're still good there. Microsoft is basically the same as low error. Tableau. And random. So here again, we find that in general, Color Gorkle's results are typically more preferable than what is currently used in industry standards. So the result of all of this and the big takeaway is that Color Gorkle is comparably effective, which I think is a really interesting case study into the potential for computational design assistance tools. That said, I think one of the strengths with these tools comes with the fact that they can offer more bespoke, customized options for designers, right? One of the difficulties when you're creating these color palette defaults is that you need to create pallets that are used by literally every single possible scenario that exists. So I think that that in and of itself is one reason why using these computational design assistance tools could provide really big benefits towards designers because it allows them to safely, maybe quotation marks safely, create pallets according to their own heuristics without being constrained by creating pallets that apply to every single situation, right? So the takeaways from this, if you want to boil them down into three things. The first is that we were able to define this user balance between discriminability and preference, right? And then the first experiment showed that applying theory from color science actually results into pallets that change the discriminability and preference of users. And at the end of that, we also found that this whole process is comparable to what people are already using. And going back way back to the first part of this talk, I think that it also shows how we can reduce design expertise requirements to make pallets, right? Because the current state of the art, the level of expertise is really daunting because you have to sink a whole lot of time and look at where colors are in color space, and this does away with a lot of the overhead for that. So after kind of summing this up, I also want to touch briefly on this other D3 module that I wrote, which is on this new color space called Camo2. And when we're talking about color spaces from a color science perspective, what we're really talking about is approximation and trying to effectively approximate how we perceive colors. So when we talk about CIE lab space, which I've been using throughout the whole entire talk so far, what we're really talking about is the assumption that this space should effectively model how our human eyes see color, right? So if we just took Euclidean distance, this should map roughly the distance that happens in our head. Unfortunately, if you've ever used a space, you know that that's not entirely true, right? So it's a little bit more complicated of an equation. So this is one kind of driving research goal of color science, and I think would be really beneficial to start incorporating more into visualization design. So really, you know, how can we change the spatiality of these perceptual color spaces to better approximate how we actually perceive color? And just as a fun anecdote, I started implementing this because of problems in color agorical. So color agorical favors sampling from the blue region, but for some reason it was running out of colors really quickly from that, and I was really curious why that was. So if you're unfamiliar with Camo2, all it stands for is a color appearance model created in 2002. UCS just means it's a uniform color space, and it uses axes that are basically the same conceptually as lab space, right? So we have this lightness axis. We still have greenness to redness and blueness to yellowness. And you can see already that it looks a little bit different. One of the reasons for that is if you look at lab, it has this really big skew downward to the right, and this is what I was talking about when color agorical was artificially running out of colors. So we can see that the blue is a little bit different from the blue's quickly, because all the blues were being shifted down into this bottom right quadrant where they should be more central bottom, or maybe to the bottom left. And just to show this more concretely, here's a little video which shows approximate volumes of each one of these color spaces, right? So you can already see from this that the volumes look very, very different, right? We get a little bit more of a spherical shape with Camo2 UCS than CIE lab. And this ultimately gets at the ideal of having this kind of Cartesian grid spatiality in an ideally uniform color space. So this is all great in theory, but what does this actually mean for designers and how could this influence design practice, right? So I think that maybe the biggest difference is that when you just talk about simple linear continuous color scales, right? So these are just your typical default color scales. You end up having very, very different looking appearances. So on the bottom of these are just what happens if you interpolate in RGB. So if you were to load things in a Photoshop, that's what the gradient would look like. Most people use CIE lab, which is the middle band. And the top is this new Camo2 UCS color space. And from this, it's strange because lab were all brought and taught that this is perceptually uniform. This is the gold standard. For some of these, the Camo2 interpolation looks completely different, right? And whether it's good or bad, you know, it still needs to be empirically tested, but at least for right now, it gives designers a little bit more freedom for how they might want their charts to appear. If you're actually going to use this in D3, the functions are modeled exactly after the lab functions and HCL functions, so you still have your JAB declarations here. You can import colors. It's basically the exact same. And you have so lightness, chrome, and hue versions of all this. So there is one caveat which I briefly alluded to, is that evaluation is needed. So the researcher in me still have my research hat on. This is a largely assumption-based thing saying that what we know from color science will be useful for visualization. So I think there's a lot of useful visualization research open questions here. But on the brighter side of things, Matplotlib uses this color space for the color scales. And these newer scales, all of them are created in this new color space. So there is precedent for using this. Another great contribution, too, is as far as I know, this is the first implementation in JavaScript of this color space. So I think that's really exciting, too. So just wrapping up a lot of these points. From the first talk, we were looking at just noticeable differences, and the big takeaway from this is distance is important and was a huge motivator for how color-gorcal picked colors. But you also should consider size, especially if you're developing visualizations for multiple different types of platforms. What does it look like on mobile? What does it look like on a giant projector? These are very different considerations. For color-gorcal, it was kind of a case study into how computational design assistance tools can be effective. They're comparable to industry standards, allow a little bit more bespoke customization. And with this new color space we should use color spaces knowledgeably and consider other options that we might have. So lab is obviously really important. It's not going anywhere. It's proven to be effective in a lot of situations. But could you get comparable results using this new color space? It's an interesting question. So if you go online and check out any of the source code, everything's open source or the documentation, I have tried to structure all of this so it reads more of like a teaching manual. And I want to close by just offering this, I think more of a perspective, but open source is necessary to bridge this divide between what we know and what we do. But we should also think about accessibility, too. And I think a lot of talks at OpenViz have really gotten at this point, and you can talk about this whether you're designing for learners, or if you're looking as a researcher, how do you make these applications more accessible to practitioners? There's all sorts of different ways to do all to think about how this relates to color, but also design effectiveness in general. So with that, I'd just like to say thanks, and be sure to check out the stuff online.