Setup Project Data in Plot Solution

[00:00:00]
>> Let's take a look at this very complex solution here. If you opened the hint you might find essentially the syntax that we need to copy here is the same as the mapping from x to run number or y to name. We're gonna add a new pair here to map the fill channel to the conclusion value or column.

[00:00:25]
So I'm just going to paste this in right there and then the hardest part about this exercise is remembering to add a comma. [LAUGH] so, once I've done that and I press again either this little blue icon or the keyboard shortcut Shift Enter, then I will see now I have some information coming through.

[00:00:45]
These aren't all identical black squares anymore, we can see some kind of differentiation between the different cells. Okay, any questions? So far this is just to get us used to the concept of how channels are set up in plot marks and also how to run observable cells, cuz that's what we're gonna be doing the rest of the day, all good?

[00:01:08]
Excellent, so, let us press on. So as we said before scales are essentially functions that we could think of as mapping values from the input of each channel. So the domain of the data values to the output of each channel which is essentially the range of visual characteristics that are specific to that channel.

[00:01:33]
So in this case, if we're using the fill channel, we're working with an output range that's in the color space, so we're working with a series of colors. There was a question in the chat about does observable choose the default colors here? So in this case, it's actually plot that's choosing the default colors.

[00:01:52]
And as you can see, they're kind of arbitrary and they don't really tell us very much in so far as, I'm not really used to seeing red, and blue, and yellow have any kind of meaning associated to them in terms of passing or failing tests, or canceled tests, things like that.

[00:02:12]
So what we're going to do is use plots notion of scales which are ways that we can customize how each of these channels does this mapping to configure the either the domain or in our case the range, the output values of this particular channel. So in the case of the channels fill and stroke, these are configured by a scale that plot calls color.

[00:02:42]
So essentially the color scale applies to both the fill and the stroke channels. Right now we're only using the fill channel. So, if we wanna change how values are expressed in that fill channel, we need to customize the color scale. So, the way that plot is doing this by default is essentially having these default domains and ranges for each of the scales.

[00:03:07]
The domain it figures out by looking at your data sets values, and in this case it says okay, look, seems like we have three different values in the data for this conclusion columns. So I have a domain of three different values and then the range is going to be taken from the first three values in my default color range.

[00:03:30]
That's how plot is choosing this. But what we wanna do is override those default values to use more easily recognizable colors. Now this is a great chance for there was a question earlier about accessibility and not just using values like red and green that might be not very accessible to folks with red green color blindness.

[00:03:50]
So this is a great opportunity for you to choose whatever colors you would like. Feel free to look up for example on some accessibility resources on the web if you wanna an accessible color palette. Or you could use kind of the conventional but not super accessible values like red for failure or green for success in our culture, right, so if you want to choose a different color palette by all means.

[00:04:15]
But essentially what we're gonna be doing is in this second cell that we have, or I don't know next cell down here, we essentially have the same plot that we just drew. We now have a little color property in our main plot options configuration here, where here is where we're going to be setting the new range of this color scale.

[00:04:46]
And so we are going to also have to configure the domain to make sure that the ordering of our input values matches the ordering that we expect from our output color values.