Data Visualization First Steps

Setting Domain & Range Colors Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Data Visualization First Steps

Check out a free preview of the full Data Visualization First Steps course

The "Setting Domain & Range Colors Exercise" Lesson is part of the full, Data Visualization First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to set the domain and rage colors in the provided chart using fill opacity to visualize test duration.


Transcript from the "Setting Domain & Range Colors Exercise" Lesson

>> Okay, let's take a look here at how we can configure the domain and range of a scale, in this case color to customize the way our values are expressed through one of our encoding channels. So in this case, we have some default colors being applied as the automatic mappings from the range of values that we have in our conclusion field, in our data set, which if you scroll back up to our little table at the beginning here.

If you scroll through, you'll see that we essentially have three different values that we find in the data set, success, failure, and canceled. So that is essentially our domain of values in our data space. And all we need to do in terms of overriding the domain here is to make sure that we know what order plot is receiving those values and because they're not numerical continuous values, they're not kind of values that have any obvious order so we just need to choose one.

So if we open the hint box we'll see that the way we configure the domain and range is perhaps as one might gather we specify the properties domain and range and we give each one an array of values. So in this case our domain, let's just put them in an order that we can deal with.

So I'll have success, be kind of the ideal state so that'll come first, failure will come second, and then canceled will be the kind of last one as hopefully an exception. So, this is how I set up my domain and if I evaluate here, Shift Enter, I'll notice that my colors stay the same but kind of swap around, which already tells me that plot defaults, we're looking at these values in a different order in the domain.

So now we know what order plot is seeing them in, and now if I override the range property, I can put in three corresponding colors to match my domain values. Again, this is completely up to us. So let's just use some kind of not ideal not super accessible defaults and I would love to hear in the chat what other palettes folks chose to use.

But let's say success maps to green, failure maps to red, and canceled we could use yellow, we could use gray, why don't we just go ahead and make it gray because canceled sort of means it's not a salient so let's have it fade into the background. I always forget if it's E-Y or A-Y let's find out, E-Y seems to work.

So, again if we wanted to change this we can put whatever colors we want in there yellow for canceled for example or I could change all of the these. So this is completely up to us, we've now seen for the color scale particularly but this extends to all of the other scales as well how to override the default domain and range.

So the default input values the range of these, sorry, the domain of input values that the plot is going to actually visualize and then the output range of values that plot is going to map those inputs on to. Questions, comments, concerns? Okay, pressing on. In our next exercise we're going to add a new feature from our data set into our plot.

So so far we've got the status, the kind of the conclusion status visualized with color, but we have more information in the data. So if we scroll back up to our dataset, we see we also have a minutes column here, which essentially tells us how many minutes it took for this test to conclude or to finish running.

And so we're gonna visualize that now using a different channel because we've already got on the Fill channel we've already got our conclusion feature visualized. So that means we're going to need to pick a different channel to visualize a different property of the data. In this case, we're gonna use the Fill opacity channel to visualize that duration in minutes.

Right now our plot answers the question did each test pass or what was the conclusion status for each test? Now we're gonna make it answer both that question and the question how long did it take to conclude? So that is our next exercise and after we answer the question how long did each test take in minutes, we're also going to notice that some of the tests have a duration of zero.

So that means that if our opacity channel is mapped to zero and we have an opacity of zero, it means it doesn't show up at all. We won't be able to see the status, the conclusion failure, success, cancellation status. So, in order to get around that problem as Part B of this exercise, we're going to also add a new channel to color the outline of each cell based on the conclusion.

So, essentially we're gonna duplicate our visualization using the Fill channel, into the channel that corresponds to the outline of each cell, which you can scroll up or check out the hints to remember the name of. So this is your task is to add some more mappings here.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now