heatmap but with 2 values, one has positive and negative value (positive value = blue, negative value = red) and one is pvalue (the color graduates) in javascript in matlab

One way to create such a heatmap in JavaScript is to use a plotting library like Plotly. The following code snippet creates a heatmap with two variables, one with positive and negative values (represented by blue and red colors), and the other variable represented by a color gradient.

index.tsx
const xValues = [1, 2, 3, 4, 5];
const yValues = ['A', 'B', 'C', 'D', 'E'];
const z1Values = [[1, -2, 3, -4, 5], [-1, 2, -3, 4, -5], [1, -2, 3, -4, 5], [-1, 2, -3, 4, -5], [1, -2, 3, -4, 5]];
const z2Values = [[0.2, 0.4, 0.6, 0.8, 1], [0.4, 0.6, 0.8, 1, 0.2], [0.6, 0.8, 1, 0.2, 0.4], [0.8, 1, 0.2, 0.4, 0.6], [1, 0.2, 0.4, 0.6, 0.8]];

const colorscale = [
    [0, 'rgb(255,0,0)'], // red
    [0.5, 'rgb(255,255,255)'], // white
    [1, 'rgb(0,0,255)'] // blue
];

const data = [
  {
    x: xValues,
    y: yValues,
    z: z1Values,
    type: 'heatmap',
    colorscale: [
        [0, 'rgb(255,0,0)'], // red
        [0.5, 'rgb(255,255,255)'], // white
        [1, 'rgb(0,0,255)'] // blue
    ],
    zmin: -5,
    zmax: 5
  },
  {
    x: xValues,
    y: yValues,
    z: z2Values,
    type: 'heatmap',
    colorscale: colorscale,
    zmin: 0,
    zmax: 1
  }
];

Plotly.newPlot('myDiv', data);
893 chars
38 lines

The xValues and yValues arrays represent the x and y axis for the heatmap. The z1Values array represents one of the variables with positive and negative values, and z2Values represents the other variable with values ranging from 0 to 1.

The colorscale array defines the colors to use for the gradient. The first element of each array in colorscale represents the position of the color in the range of possible values for the variable (0 is the minimum value, 1 is the maximum value). The second element represents the color to use for that range.

In the data array, the type property is set to 'heatmap', and the colorscale property is set to either the colorscale array or the direct values of red, white, and blue for the positive/negative variable heatmap. The zmin and zmax properties define the minimum and maximum values for the variable.

The Plotly.newPlot function creates the heatmap. The first argument is the ID of the element in the HTML where the plot should be displayed, and the second argument is the data array.