358950_en-US

liliconcom

Defining custom color gradient in Graph Builder heat map with JSL

I have a model with eight factors and four responses. I'd like to create a heat map showing which factors are significant for which responses.  I would like to be able to define my own color scale, for example:

<0.0001 to 0.01 = orange

0.001 to 0.05 = red

> 0.05 = white

I've played around with the gradient in Graph Builder but can't see how to do what I want. Maybe this is not even technically a gradient anymore, but it seems it should be possible.  The image below is as close as I've gotten.

 

 

Here's a snippet of script. The full data set with saved script are attached.

 

 

gradient(
    {Color Theme( "Green Yellow Red" ), Scale Values( [0 0.05 .] ), 
    Width( 9 ), Range Type( "Exact Data Range" ), 
    Reverse Gradient( 1 ), Discrete Colors( 1 ), 
    N Labels( 5 )}
)

 

 

Any suggestions would be appreciated.

-Tom

 

Re: Defining custom color gradient in Graph Builder heat map with JSL

Awesome, thanks for the detailed explanation Tom!

Re: Defining custom color gradient in Graph Builder heat map with JSL

Hi Kira,

Thanks for your help.  That really helped me get to where I was trying to go.

 

I'll add a little more detail about how to do this for others who might be trying something similar, since I could not find any detail in the JMP documentation.

If you right click on the heat map legend, select Gradient, then click on the Color Theme and then the twisty to open "Custom Color Theme".  This is the setup that ended up working for me.

It appears here that there are only four points defining the gradient at 0, 10, 50, and 100%, but that's not true.  If you only define those four points you would get gradients between then, e.g. red to orange from 0-10%. If you want step from red to orange at 10% you need to define both a red and an orange point at 10%.  The UI only shows one marker there because we are using it for something it wasn't designed for.

 

To get three discreet color ranges you need to define six points, even though you only see four above due to overlapping.  While the visualization above is helpful after the fact, I could not use it to get what I want by moving the sliders around. I had to script it directly. This is what my code looked like:

{Color Theme(
{"White to Red p-Value", 2051,
/*0%->red   10%->red 10%->orange 50%->orange   50%->white    100%->white  */
{{255,0,0},{255,0,0},{255,165,0},{255,165,0},{255,255,255},{255,255,255}},
{.0000    , 0.1     , 0.1       , 0.5  , 0.5         ,   1          }
}

As Kira pointed out, the scale factor is important to get right. The values in the color theme go from 0 to 1 (0 to 100% of the defined scale).  The Scale Factor "maps" the color scale to your particular variable -- in my case 0 to 0.1.

 

I can think of other cases where I want to take continuous data and map it to color steps not gradients, so maybe there a better way to do this in JMP or just a setting I'm missing. (I also did it the way Kira suggested, with creating a new column -- that's definitely a reasonable option too.)

 

My final output looks like this, with F Ratios shown in each cell:

 

In the attached file is original data set. The first script runs the model. The second goes into the report, extracts the p-values and f ratios and makes the heat map.  I wish I understood enough about navigating report tree structures to make that heat map script "smart" enough to find the "Effects Test" table wherever it is in the report.  As it is now, that's hard coded so the script will probably only work with this particular report.

dt_pvals = report(fls)[outlinebox(1)][TableBox(6)] << make combined data table;

I think this could be a helpful visualization tool when working with multiple factors and responses.

 -Tom

Re: Defining custom color gradient in Graph Builder heat map with JSL

Hi Tom!
You can define your own color themes in JMP. Try out something like this:

Preferences( Add Color Theme(
  {"White to Red p-Value", 2051, {{255, 255, 255}, {255, 255, 255}, {252, 187,
  161}, {252, 146, 114}, {251, 106, 74}, {239, 59, 44}, {203, 24, 29}, {165,
  15, 21}, {103, 0, 13}}, {0, 0.95, 0.96,
  0.97, 0.98, 0.99, 0.995,
  0.999, 1}}
 ),
 );

The colors are coded in RGB values (e.g. {255, 255, 255} is white) and the increments you are interested given in the end (e.g. the first 95% of the color scale will be white as it is defined currently). This is a first rough draft, so you might need to change the increments or the colors just as you would like to. Note, that this will create a new color theme that you can use in any graph. In the graph, make sure to include "min" and "max" for the color scale, otherwise this gradient will not start getting orange at 0.05:

gradient(
      {Color Theme(
       {"White to Red p-Value", 2051, {{255, 255, 255}, {255,
       255, 255}, {252, 187, 161}, {252, 146, 114}, {251, 106,
       74}, {239, 59, 44}, {203, 24, 29}, {165, 15, 21}, {103,
       0, 13}}, {0, 0.95, 0.96, 0.97, 0.98, 0.99, 0.995, 0.999,
       1}}
      ), Scale Values( [0 1] ), Reverse Labels( 1 )}
     )

However, one side-note from a statistician: Actually, it does not matter how small the p-value is as soon as it is below the threshold (e.g. 0.05). The only thing you should be interested in is: Is it significant (e.g. less than 0.05) or not. So a simple formula column indicating if the p-value is less than .05 or not and coloring by that should be perfectly fine for your application.

Hope that helps!

Kira