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 javascript

To create a heatmap with two values, you can use a library like D3.js. For instance, you can use the heatmap function in the heatmap.js library, which is built on top of D3.js.

To color the cells according to their values and p-values, you can use a color scale. For the first value, you can use a diverging color scale that maps positive values to blue and negative values to red. For the p-value, you can use a sequential color scale that maps low p-values to light colors and high p-values to dark colors.

Here is an example code snippet that creates a heatmap with values and p-values using the heatmap.js library and two color scales:

index.tsx
// Data with values and p-values
var data = [
  [1, 2, 3, 4, 5],
  [-1, -2, -3, -4, -5],
  [0.1, 0.2, 0.3, 0.4, 0.5],
  [0.05, 0.1, 0.15, 0.2, 0.25],
  [0.01, 0.02, 0.03, 0.04, 0.05],
];

// Color scales
var valueColorScale = d3.scaleLinear()
  .domain([-5, 0, 5])
  .range(['red', 'white', 'blue']);

var pValueColorScale = d3.scaleSequential(d3.interpolateGreys)
  .domain([0, 0.25]);

// Create the heatmap
var heatmap = heatmapFactory.create({
  data: data,
  colorScale: function(value, row, column) {
    return {
      backgroundColor: valueColorScale(value),
      textColor: 'black',
      borderColor: 'white',
      borderWidth: 1,
    };
  },
  legend: {
    position: 'bottom',
    label: {
      text: 'Value',
    },
    colorScale: valueColorScale,
  },
  title: {
    text: 'Heatmap with values and p-values',
    color: 'black',
  },
});

// Color the cells according to the p-values
heatmap.cells().style('background-color', function(value, row, column) {
  return pValueColorScale(value);
});
1013 chars
46 lines

In this example, the heatmap factory of the heatmap.js library is used to create a heatmap with the specified data and color scales. The colorScale function is used to color the cells according to their values, and the backgroundColor property of the returned object determines the background color of the cell. The legend and title properties are used to add a legend and a title to the heatmap.

After creating the heatmap, the cells function is used to select all the cells in the heatmap, and the style method is used to set their background color according to the p-value color scale. Note that the value argument of the colorScale function corresponds to the first value in the data array, while the row and column arguments correspond to the row and column indices of the cell in the heatmap.