Setting Domain & Range Colors Solution

[00:00:00]
>> Okay, let's see how we implemented these additional channels. So if you open the Hints button here, you might have been had your memory, refreshed that the fill opacity channel, I'll just wanna spell like this with the camel case. And the the other channel that we want for the outlines is just like in SVG stroke.

[00:00:26]
So, and again remembering to put commas, very difficult. Let's see how we mapped these. Can maybe folks in the in person audience walk me through this, David or Julie? So for the for the first task we had to map the opacity to the length of time each test took.

[00:00:48]
So yeah, David
>> Yeah, so we can just do the key as fill opacity, like you said and then just map it to minutes.
>> Boom and so now, Uh-huh, beautiful, thank you so much. So now we have essentially the longer the test took to run, the darker it is.

[00:01:05]
We were talking in the chat about making the features that we want to jump out have the most salient properties in the visualization. So in this case, we're probably interested in any really long running test jobs, perhaps because that's a bottleneck that we wanna look at in more detail.

[00:01:24]
So using the fill opacity where higher durations have darker cells that jump out at us is maybe what we want in this case. If it was something else where maybe we want the shortest test to jump out we could reverse again like overriding the default mappings of those domains and ranges, we could change that direction as it were.

[00:01:47]
Okay, and then we noticed again that we have some of these zero duration cells where since we've lost all opacity now we don't know what color they were, we don't know what their conclusion status is, so Jelenia, maybe wanna help us walk through that solution?
>> Add a channel under the fill opacity for stroke, and then the value can be any color.

[00:02:12]
I just chose black.
>> Okay, so one thing we could do is put in a constant like this and have each of them kind of outlined. And this might be a visual choice that we make. But the other thing that we could do using exactly the same approach is we could actually re-encode the success or failure state, which we have saved in our data set in that.

[00:02:37]
So we had already encoded this in the film channel as the conclusion values. So this is a great example of how to use a constant in our visualizations which is often really useful for example in when we're adding outlines or maybe we want all of certain property to have the same value.

[00:02:57]
We can also make it dynamic in the same way that we did with the fill channel by mapping it to the conclusion as well. So totally up to you and your use case, how we wanna be doing that. Awesome, thanks so much folks. So for example, if we do map the stroke channel to the conclusion values then we'll see that some of these zero durations were canceled so maybe they just got cancelled before it even ran, and one of them maybe immediately errored out for example.

[00:03:29]
Okay questions, comments, concerns? All right, so we have one more exercise to do. And that is to take our now pretty informative plot and make it even super more informative and a little bit interactive by adding tooltips to each cell so that we can see the exact values of the duration and the conclusion status for each of those cells.

[00:03:59]
And plot exposes a channel for that. It's called, Title, just like we're adding a title to an element. So we can use the title channel to add text tooltips to each cell. And what we're gonna do in order to set the values for the title channel, is instead of passing in a single string where we have either the name of a field have the data or a constant value like we just saw in the last example, we can also with plot pass in functions.

[00:04:32]
So we can pass in a function that tells plot, hey, on this channel take in each data point and using that data point and whatever values are exposed as properties on that object, cuz each of these data points is one of those elements in that JavaScript array. Use those properties to come up with the value for this particular channel.

[00:04:59]
So that is our task. Our last task of this project is to figure out how to add a title channel. With a custom function and there are some hints in the hint button that gives an informative string about the details of that data point. And there's plenty of flexibility here so you might wanna include the test conclusion word.

[00:05:23]
You might wanna include the duration in minutes you might wanna include your name or some other fun thing you wanna spice it up with. But essentially by adding a custom function we can put in whatever we want as the value of this title channel. So let's take a few more minutes and finish up this project.